From the course: Crafting Meaningful HTML

Move your code from CodePen to Visual Studio Code (VS Code) - HTML Tutorial

From the course: Crafting Meaningful HTML

Start my 1-month free trial

Move your code from CodePen to Visual Studio Code (VS Code)

- [Instructor] Now that you know a little bit of the basics of HTML that go in the body portion of the webpage, I want to move everything on over to VSCode. And the reason why is it's going to give us access to the head of the document, there's some things we need to talk about there. We're also going to wind up having to drop in some images, and the free version of Codepen won't allow you to work with images here directly within Codepen. You have to do some other things in order to make that work. So let's go on ahead and move this HTML that we've written so far into VSCode. So the way to do that is you're going to start here with the Codepen for this particular chapter. And we'll just go on ahead and copy the HTML that we have. Just highlight everything, and then you can just go to edit, copy. Then what I'd like you to do is open up VSCode and you can just grab your Exercise Files folder. If you just grab it and just drop onto the VSCode screen, notice how I don't want it just to go on half the screen. I want it to go on the whole screen. And this is going to go ahead and load in my exercise files, and I've got access to all of my folders here. It just makes things a little easier as you work through stuff. You can close this welcome screen. So now what we're going to do is we're going to make a new document. If you go to File, New File, this will go ahead and open up a new window for you. The first thing you need to do is save this. So we're going to File, Save. And I'm going to call this salad.html. I'm going to save it directly on my desktop, and that's going to be where I'm just going to keep this as a working file. Go ahead and say save. It's very important that you save this file first, even though there's nothing in it, for this next step to work. If you don't save the file first, this next step will not work. In this next step what you want to do is type in exclamation point. And as you'll see here this is an Emmet Abbreviation. Emmet is short pan methodology. It's baked into VSCode. Go ahead and type that exclamation point and hit the tab key. And this is going to go ahead and write in the basic format of an HTML document. In other words, it comes in with a whole bunch of stuff in the head of the document, and then we have the body. Now inside the body we can go ahead and say Edit Paste. That's all that code that we just brought over from Codepen, and you'll just paste it here into the document. Once you've got that in place, go on ahead and hit save, and we'll be ready to move on here into our next video.

Contents