Converting from Codepen to VSCode

[00:00:00]
>> Well, congratulations, you have all survived to have now coded every single section of this website. It's all been coded, and we are ready now to start moving things into VS code. The last step here for putting together this homepage is to actually assemble the homepage from the Component CodePens that we have.

[00:00:22]
So the first thing that I need to ask everybody here to do, is to open up VS Code. If you want to open up your copy of VS Code, you should see something like this. It looks absolutely like nothing at all. This is just plain old VS Code.

[00:00:37]
What I'm going to do to get started here, I'm just gonna work on my desktop. And here on my desktop, I am going to make a new folder. However you go about making a new folder, make a new folder right here on your desktop, and I am going to call this portfolio, that is going to be the name of the folder where I'm going to keep all of my files associated with this particular website.

[00:01:06]
Inside of portfolio, I am going to make more folders. I'm gonna make one folder called img. That is where my images are going to go. And I'm going to make another folder here. This is going to It's gonna be called CSS. Guess what goes in there? Okay, that's where our style sheets are gonna go, all right?

[00:01:31]
And then what I can do is, in VS Code, I can just drag my portfolio folder right into VS Code. And it should set itself up so that you can see the folders over here on the left hand side. Now we're gonna do a whole lot of copying and pasting.

[00:01:51]
First thing we're gonna do is download some images in a starting HTML file from GitHub. You can get there from the course website if you go to the GitHub icon up here in the upper right-hand corner and click on it. This is going to put you into GitHub.

[00:02:06]
And what you'll see here is chapter six. This is the thing that we're going to need to download to our computer. If you're a GitHub person and you're familiar with how GitHub works, do your GitHub magic, however it is that you wind up doing that and download these files to your computer.

[00:02:23]
If you are not a GitHub person, what I would recommend that you do is here in this green button that says code. There is an option to download a zip file. That's what we're gonna do here. And it's gonna ask me where to download it. I'm going to put it on my desktop.

[00:02:45]
Okay. And then I'm going to go to my desktop, and inside of my portfolio folder, I'm gonna unzip my zip here. I'm gonna grab my images out of this folder, all of them. And I'm going to drag them into my portfolio images folder. [SOUND] Okay. I'm also gonna grab the project, start.HTML, and I'm gonna drag and drop that into my portfolio folder as well, okay.

[00:03:24]
And again, if you know, if you're a GitHub person and you know how to do this, you just do your thing. The end result should be that you have a folder called CSS, a folder called Images that has all of the images in it that you downloaded, and a file called Project Start.HTML, and all of those should be inside of a folder called Portfolio.

[00:03:44]
Everybody okay so far? Fantastic. Okay. Great. So now that we have those folders and the images that are downloaded and we're set up and ready to go with that. What we're going to do is go from our most recent CodePen. We'll copy the CSS from that and paste it into a new style dot CSS folder.

[00:04:17]
And so the most recent CodePen was Chapter five, which we just went through, putting together the featured project here. This contains all of the CSS that we've written in the course to this point in time. If you just copy this CSS here, I'm just gonna highlight, I'm gonna copy, and then in VS Code Inside of my CSS folder I'm gonna start a new file, I'm gonna call this style.css, and then I'm just gonna paste in all of that CSS from code tab and save it.

[00:04:57]
Then what we're gonna need to do is, you're gonna need to go through your other various CodePens here, and I've given you the links for these. And we are going to copy and paste the HTML from each one of these CodePens into our index.html file. So, here inside of your VS Code folder, let's make a new file.

[00:05:19]
We're gonna call this It's index.html, okay? So there that is, and then what I'd like for you to do, as soon as you've saved it, very important that you save it first and call it index.html, what we're gonna do is we're gonna type an exclamation point, just like that, and then hit the tab key on your computer.

[00:05:46]
And if you do that, you will wind up with the sort of basic framework of an HTML document. We'll have the head and we'll have the body. Did it work?
>> What was it? Exclamation point then what?
>> Exclamation point and tab. Worked. Okay, great, perfect. Okay, so this is what we need in order to get started.

[00:06:10]
So now what we're going to do, is, we're gonna go in each of these CodePens in order, and I'm gonna do this first one for you, and then we'll, you can do the rest of these on your own. We're going to start with header slash nav. So I'm going to open up this CodePen, and I am going to copy header, and then I'm going to go to my VS code, and I'm going to paste that here inside of the body, once again inside of VS Code, just like CodePen, it has those little collapsible arrows.

[00:06:47]
So if you're feeling a little overwhelmed looking at all the code we've written today, that is where you can just collapse these and make it a little less overwhelming. Then we're gonna go to intro We're going to select all. So Cmd or Ctrl+A, Cmd or Ctrl+C, and go into VS Code.

[00:07:17]
And paste. So that's our intro. And we're gonna do the same again with featured. Everybody getting the idea here, just copy and paste.
>> So everything is gonna go into index.
>> Everything is gonna go into index.html and we're just listing them one after the other. In between the body and the slash body, but this header here, that was our navigation.

[00:07:52]
This is our intro and then now I'm going to paste in my featured. So we're just gonna continue to paste these one right after the other like this. So your code should look kinda like mine, I've collapsed everything, so you just see the sections of the webpage. So, you should have the head of the document here, it's kinda hidden at the moment.

[00:08:18]
Then inside of the body element, you should have your header. You should have your section with a class of intro. You should have your section with a class of Section featured, section with a class of Section projects, section with a class of Section contact, and your footer. Make sense?

[00:08:37]
Okay, now, so we have an HTML page. We have a stylesheet. We've got a ton of images and none of them are talking to each other, right? Okay, so one of the things we need to do is we need to link up our stylesheet, and we also need to make sure we've linked up our fonts, right?

[00:09:00]
So let's link up our stylesheet, right after the title here, we can put in link href equals. We're gonna go into our CSS folder and find style.CSS. So this will be CSS slash style.CSS rel equals Style sheet. That's how you make a link to your local style sheet, we can change the title of this document to Jen Kramer Portfolio.

[00:09:41]
Frontend masters or whatever you wanna put inside of your title. This is gonna be your homepage. Everybody okay so far? Okay. Now we need to get our fonts. And, yes.
>> When do we know if we need to reset that CSS.
>> Well at this point we have worked through all of the styling of our documents so we do not need a reset CSS file for this particular project.