On this Craft Cms lesson we're going to clean up the code exported by Webflow using the HTML comment tags.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Hey, what's up guys. Welcome back. On this lesson, we're going to take a look at exporting the code from Webflow, and we're going to try to dissect it, clean it up, and then try to apply what we've learned from our previous lesson. So let's go ahead and do that. I've got here, my account ready on Webflow.
The project that we've created, just let you guys know very simple things. When you export out the code using Webflow, the code that you are going to get is not going to be the best and that's because, webflow is trying to get you to host with them. So you're going to just get a very messy code when you export this out and it's not going to include any foreign functionality.
So let's go ahead and export that code. What we do is simply click on the export code. We go ahead and prepare the zip and then download it to our finder. We'll get, of course a zip we'll need to uncompress okay. And. You're going to notice all the files that get exported. You can simply double click on any file and we'll be able to access our static pages that we have created on Webflow.
But the next step is to actually get yourself an IDE. So an integrated development environment tool is just a software that you install on your computer to, it's almost like a text editor for you to start looking up at the code. My favorite IDE is actually called visual studio code. So you go ahead and download that one.
So maybe it's easier for you to follow this lesson. Alternatives, of course you can look up Atom.io is pretty cool. I think it's super lightweight, you can customize the look and feel. Another one very simple and the one that's kind of a little bit older is sublime text. I use that all the time, not for coding, but for just writing notes and stuff like that.
Okay over here we have the movies let's try to make, let's make sure we open up all these files, you'll notice of course, because there's no CMS collections, all we're getting are the actual components we can look at here at the playground, making sure that all our CSS is there.
This one. So detailed movie is the template that we're going to use to customize and add our summary and query our actors and reviews. Okay, over here we have our CSS folder. Okay. So let me quickly open up our visual studio. So this is our IDE we're going to be using and we're going to either go directly into your finder and simply drag and drop the file that you want to open, or you could open up a, an entire folder.
So that way you have a workspace as a place where you can access the, all the files. So just simply find your downloads, look up your stream, VR from webflow, and then add that in here. We're going to be able to click on this little icon on the top, which will give us the explorer to see all our documents.
What I want to do with the code that we're going to get is just, understand what workflow gave us. You're going to see how everything has an opening tag and a closing tag. We have kind of a header and the ID, what it does, it allows us to kind of toggle open and close code snippets so that we have, an easy way to visualize that code.
And what I typically do when I start getting code from these type of tools, like webflow is, you start to add comments to wherever one of those tags ends. So for example, the head tag right here, I would add a comment, to just remind myself where that final closing tag is. So over here, the way you add a comment is by simply adding the opening bracket with an exclamation mark. So a couple of dashes you'll notice right away, visual studio code ads the closing tag for that comment. And I can just say, over here, heading, header or yeah, HTML head and I can do the same thing with the rest of the text. So this one would be body and that's that's it.
So ideally what we want to do is, go through each of those, each of those diff tags across and make sure that we have a closing comment on every one of those. So I'm going to just toggle some of these out so we can see an example.
Okay. So as you can see over here, I have added some of the comments to every section. It doesn't necessarily take a long time, but depending on how many components you've created, um, it might take a bit longer. But this is going to save you so much time down the roads. This one, for example, I've added a couple of forward slashes just to make the point that this is a bigger component called the media grid and that media grid is going to contain smaller instances of cards.
So notice how I've added the comments. Anything you add after the two dashes is custom, it's customizable. So you can play around with that with using asterisks or however you think works best, but the important thing here is for you to understand that every little Div that I'm wrapping or closing, I have a little comment, so that it's easier for me to find right away.
You can see here, I have the preview thumb. So thumbnail. And this one is the meta. What is the meta, preview meta it's just data, right? So Jennifer Anniston and their label. So just like that, I've gotten a little bit of idea of how the code structure on HTML is for those components. We are now ready to start implementing this code into our craft installation.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS