Moving from CodePen to VS Code

[00:00:00]
>> This is the moment where we're going to move all of the stuff on our website from CodePen into VSCode. And I'm actually going to let you take the first pass at this. And I'll walk through setting up the file structure with you. And then I'm gonna let you do this part copy over the code on your own to get the practice of moving from one environment to another.

[00:00:23]
So what we're going to do first is we're gonna set up a file structure on your desktop, and I'll walk you through how to do that here in just a moment. And what we're going to do is go through your CodePens. So we have one for the intro that we put together, we have one for the footer, and we have one for the navbar, and one for the contact.

[00:00:45]
So that's four of the five sections on that homepage we've actually already finished. So you'll go back and investigate those CodePens and copy in their code into the VS code and then we'll debug. So let's start here with setting up our file structure. So what we're going to do is right here on your desktop, we're gonna make a new folder, and I'm gonna call this folder, the portfolio Folder.

[00:01:19]
So that will give us a start here. I like to put it on the desktop because then it's really easy to find, if you wanna put it somewhere else in your file structure on your computer that's just fine. It's just easier to find on the desktop sometimes. And then I'm going to open up my VSCode here.

[00:01:36]
And again, you can use any text editor that you want, I am using VSCode there's a link for it back in chapter one under prerequisites if you would like to download this and install this on your own computer. And now I'm just gonna simply grab that portfolio folder and drag it and drop it inside of VS Code.

[00:01:58]
And I'm gonna say don't save. For the question that it asks, and then you should see that, so you may see a welcome panel over here on the side, and over here on the left hand side you see absolutely nothing, all is well. Inside of that portfolio folder that has absolutely nothing in it we're gonna create two more folders.

[00:02:29]
So, however you do that in your environment, go ahead and do that. I'm going to create a folder called Image, I-M-G for image, and I'm gonna create a folder called CSS, just like that. And once I create them here, they will also show up in VS Code. Those of you who know VS Code, yes you can also create your folders there.

[00:02:52]
So once you've got that in place you have your portfolio folder. Inside of that is a CSS folder with nothing in it, an image folder with nothing in it. Let's start our HTML file and a CSS file so that you have those ready to go. So right here in this Welcome tab, you can click on New File, that's what we wanna do.

[00:03:11]
And it will ask you to select a language to get started. So let's do the HTML first. If you scroll on down to HTML here, there we go, that will start you in HTML file. The advantage here is that now we can type an exclamation point, one single exclamation point, and then hit Tab.

[00:03:32]
So you have to make sure that when you start your New File it's the type of HTML. Then you're gonna type an exclamation point just one and hit Tab, not return but Tab and it will fill in all of this information here for you automatically. That is a functionality called Emmet, that drives all of that, it's a really great little shortcut to getting started.

[00:03:57]
I'm gonna change the title of my document to Jen Kramer's portfolio website or whatever else you want to do for the title of your document, and then we can just save it File Save. It will ask us what we wanna call it, we wanna call it index.HTML. Why index?

[00:04:19]
Because index.HTML is one of those default file names that if you were to put this up on a server somewhere, it would be recognized generally speaking by that server as the homepage for the website. You call it index or you call it default and there's a couple of other names.

[00:04:39]
So, we'll say Save. So that's in place. Now what I'm going to do, I'm gonna go back to that welcome Tab or you can go to New File, is the other way to get there, and I'm gonna make a CSS stylesheet. So we'll select a language and I'm gonna select CSS from list and we can save this.

[00:05:07]
That's gonna go inside of the CSS folder and let's call it style.CSS because we're really creative that way. Okay? Back in our HTML now we need to link those two things together. So we have our HTML document, we have our CSS document, but they're not talking to each other yet, so let's make them talk to each other.

[00:05:33]
In the head of your document, it can go anywhere in the head of your document. I usually put mine towards the end of the head of the document, often after the title. We'll add to this link href equals quote, we're gonna go to CSS, we're gonna go to style.CSS, and we'll add rel equals stylesheet.

[00:06:03]
So that's gonna link our stylesheet document to our HTML document. Super important to get started. So I'm gonna have you do pretty much the second part here. So what you're going to do now is the following. For the very last CodePen that we worked on working on the Footer grab that CSS and we're just gonna copy and paste that into the stylesheet and you're done with your CSS that's all.

[00:06:29]
Then what you're going to do is in the HTML file you're gonna need to make links to Google Fonts. Remember that's oxygen and oxygen mono that we've been working with unless you have other font choices that you've been working with. You're gonna have to generate that whole bit of HTML that Google will give you, drop that into the head of your document, you'll need to do the same for the Font Awesome font pack.

[00:06:57]
And then go through each one of the individual CodePens, as I mentioned navigation, the intro, the contact and the footer. Get that HTML, copy and paste that into the HTML document, clean it all up, make sure it flows well, format your HTML and so forth, and it is not going to be perfect.

[00:07:23]
We're gonna have to walk through those issues but that's as far as I would like for you to get for now. Have fun, moving from CodePen into VS Code, and then we're gonna debug and clean everything up. So, if you had ran into problems along the way or anything else you could take a look at my files they're on GitHub, and inside of that you'll see where chapter four begin.

[00:07:54]
Those are the files after you did those first threeish steps. So if you got hung up or confused along the way that you can download that folder and continue to move forward here with the workshop. Let's just take a peek at those now. So we'll start here with the HTML.

[00:08:14]
And over here we've got Google fonts and you looked up oxygen mono, and you looked up oxygen, and you loaded up those styles, Google gives you this bit of HTML down here at the bottom, this goes in the head of your document. So that is, That's what's going on here, we've got our links to our various Google thoughts up here on the top of the page.

[00:08:42]
As for font awesome, what I wound up doing to just sort of make things simple, any CodePen here under the CSS. If you took a look here, there was a link that was given to you here inside of the CodePen to Font Awesome. And so what I did was I copied that link and I put that in just a regular old link, href.

[00:09:08]
There's that link from from CodePen, Rel equals stylesheet, so that would give you the Font Awesome styles, and then after all of that is the link to our stylesheet. And as I mentioned before that style sheet is just simply to take the styles that you had to that point in time for the footer Copy all of those styles because the footer was the last CodePen we worked on.

[00:09:33]
We've been accumulating styles through all of those exercises, so everything is here, we just copied and pasted that into this style sheet. Now in terms of the HTML, we had to give a little bit of thought as to what order we put things in. So, we have of course, the body tag starts it all off.

[00:09:52]
Then we follow that up with here's all of the navigation bar that we had put together, there's that chunk of code, that's followed by the chunk of code from the intro copied and pasted in that HTML there. Then we have a chunk of code here for the contact, so we grabbed that from that CodePen and pasted that into place.

[00:10:14]
And then finally down here at the bottom we have the footer okay, so hopefully that worked out okay for you. And, when we put this into a web browser. It looks something like this. Did you all get something similar? In other words, not necessarily the prettiest thing in the world, and there's definitely some issues going on here.