Setting Up a Local Project

[00:00:00]
>> Jen Kramer: We finally have our completed webpage. We've coded the whole thing inside of Github and the next thing to do is actually get it somewhere that the whole world can see it. Codepen is not the place for that. So that is the next thing that we're going to walk through and we're gonna do this in two steps.

[00:00:17]
One is we need to take everything out of Codepen and set it up as individual files, which we're gonna work with inside of VS code, which is a typical editor that's used for this kind of work. And then the second part of it is we're going to move it from our files that are here on our computer up to GitHub, and then ultimately to GitHub pages.

[00:00:39]
And I'm gonna talk about all those steps in a lot of detail. But the very first thing that we're going to do is take this out of CodePen and set it up as individual files. So to start with, you are going to want the finished state of chapter six after we've gone through and we've put in our switch and we have all of our tweaks done, everything is ready to go, this is where we're starting from here, okay.

[00:01:06]
All right, so the easiest way to do this is the following, and the way that I usually do it, what I'm going to do here is right on my desktop, you can set up a folder.
>> Jen Kramer: And of course, this is different on Windows than it is on Mac, so however you set up a folder.

[00:01:27]
And you can just call it whatever, website, some sort of original name for it. Inside of your website folder, we can put in a couple of folders here. We're gonna want our images, so I usually call mine img, you could call it images, the word. And then typically we also have a folder for CSS.

[00:01:50]
So I'm gonna make a folder for CSS as well. And that'll just be sitting here on my desktop right here, so there it is. You're gonna wanna work with a program that will allow you to write HTML, CSS, off in JavaScript and many other languages on your computer.

[00:02:08]
The one that most people use these days is Visual Studio Code. If we google for that, this is at code.visualstudio.com. It is a free program, you can download it right from here. Mine says, download for Mac because I'm on a Mac, if you're on Windows, this will say, download for Windows, all right.

[00:02:30]
You can download this and install it on your computer, this will allow you to assemble your web pages. So I am going to open up my copy of VS Code, and once you have it installed on your computer, you will see something probably kind of like this. And the easiest thing to do to get going is just to grab your folder right from the desktop and drag and drop it over here in this left column, we just drag and drop.

[00:03:00]
It may give you an error like this, do you wanna save your workspace configuration as a file? If you all know what you're doing, you do you. For those of you who are new to this process, I'm just gonna say don't save. Okay, so this is gonna give us our folders over hereas, there's nothing in them yet, it gives me a folder for CSS and it gives me a folder for images.

[00:03:22]
All right, I'm gonna start by creating a new text file here inside of VS code, and it's gonna say, select a language or whatever. So I am going to say File Save, and I'm gonna put this right in my website folder and I'm going to call this file index.html.

[00:03:46]
So this is really important, you wanna call it index.html. That will be the page that loads when your website loads. If you call it anything else, if you call it gen.html, if you call it, whatever. It will not load automatically when your website loads. This is what we wanna do, it has to be called index.html.

[00:04:10]
And we're gonna say Save, and it should be there installed on your computer, okay? The next thing that I do, let's give it a try. I'm gonna hit an exclamation point, single exclamation point, and then click the tab key on my computer. So single exclamation point and the tab key on the computer and this should give you all of your HTML, both the head and the body of your HTML here inside of VS code.

[00:04:42]
All right, so now if you've gotten this far, we are at the easy point. So what we're going to do now is copy over our HTML, and then we're gonna copy over our CSS, and then we need to work on our images. So I'm gonna go back to my window here, and I'm going to go to my HTML.

[00:05:04]
And I'm just gonna do Control or Command A to select everything here, Control or Command C to copy and come here into index dot HTML, and Control or Command V to paste. And so you'll see how all of our HTML code will show up here.
>> Jen Kramer: If things are scrolling all the way over to the side and that annoys you, you can always turn on your word wrapping that's under view, word wrap.

[00:05:37]
>> Jen Kramer: And then probably pretty key here on line six is our title, or HTML title. I'm gonna change that to be brissa is Sid rose website, or actually, I'll say portfolio react developer, or whatever. You can put in, this is a place that Google tends to look for keywords.

[00:06:04]
So put in some keywords so people can find you. So now that we've got that in place, the next thing we need to do is copy over our CSS. And so once again, we're gonna go back to our code pen. I'm going to open up my CSS. So I'm going to select everything, copy it, and I'm gonna go back to VS code, and I'm going to create a new document.

[00:06:28]
Just use the new document button right here, and I can call this styles, styles, dot css, and I'm gonna drag and drop that into my CSS folder, yes, please move that. And then into this I can paste all of my styles. All right, we'll save that. Okay, so now I have an index.html that contains all the HTML from my code pen in between body and slash body.

[00:07:06]
And I have all of the CSS that I've created in a file called styles.css. And these two things are hanging out there. Yay, they don't talk to each other, right? Now we need to link them together so that they talk to each other. To do that, we're going to add that right here into the head of our document.

[00:07:26]
And this is going to be link href equals, we're gonna go to css/styles.css rel=stylesheet.
>> Jen Kramer: So that will link the two things together, that one line of code. Another extension that I have installed is the ability just to view this HTML directly in my web browser. That is here, it's called Tech.

[00:08:01]
I believe, is the name of the company, and the name of the extension is Open in Browser right here, okay? And what that will do is give you the ability to right click on this, and I can say open. In my case, I'm gonna open it in Chrome, and boom, there it is.

[00:08:21]
Yes, so it's open in Chrome. Okay, now sharp eyes are gonna notice that this is actually not the same font. This is probably Helvetica, and the reason why is because we haven't actually linked to our font from Google Fonts. So let's get that done now. If I go to fonts.google.com, we are going to search for the Inter.

[00:08:51]
Inter is the name of our font, okay? And that is the one that we're going to wanna get. So we're gonna click on get font. There's a lot of ways you can do this. You can download it, blah, blah, blah, blah, blah. We're just gonna do the simple way.

[00:09:06]
We're gonna get the embed code, and we're going to get the link here that that is in the head of your HTML document. So I'm gonna just copy that embed code for the head of your HTML. And I'm going to add that here. I usually put it before my custom style sheet, so there it is.

[00:09:31]
If you're wondering where that was in CodePen, this is a setting that you can put in so here, under settings, under CSS, if you scroll down, if you have the URL for your font, which case starts with fonts, dot google, apis.com, you can copy and paste this in here and you have linked to the Google font that you want to use.

[00:09:59]
In our case, so you never actually saw that link here inside of this code pen, but that's not gonna help us when we carry over here into VS code. So we need to make sure that we link to our font here in the head of our document as well.

[00:10:14]
Once that's done, then that should be working correctly. Next thing we need to do is we need to take a look at our images. So right now, I have no images here inside of VS Code, but I have images that are inside of my CodePen. So I'm gonna go back to my CodePen.

[00:10:36]
>> Jen Kramer: Get VS Code out of the way here. And inside of my website folder, inside of my images folder here, I am going to, I can actually do this right here on my Mac, I'm not sure if this is a Windows thing, but you can just drag and drop these from here on your Mac, drag them right into the folder.

[00:11:02]
If that is not an option for you, then you can right click on these images and there's probably like a save image as kind of thing, and you wanna save those into your images folder. So I'm going to pull down. There was the picture of Brissa. There's the picture of these projects.

[00:11:26]
>> Jen Kramer: Because we've have our SVGs directly inside of our HTML. We don't need to pull those down. So I think there's just four images here. On the site, do we have a place where we can copy that? That's a very good question. So where do images come from on CodePen?

[00:11:44]
If you have a free account, you cannot put your own images inside of CodePen. You actually have to have a paid account. If you have a paid account, there is an option here for assets and you can upload your images here directly in. So because I have a paid account, and you forked a copy of my work.

[00:12:03]
You have access to these images as well, yeah? But you won't be able to add your own images to CodePen without getting a paid account. You can use an absolute path to images elsewhere on the internet though, if you want. Okay, so here then inside of VS code, you should have your images that you just downloaded from your CodePen, and now we just need to find those images here.

[00:12:34]
All right, so in line 56 I have noticed that this is calling an absolute path. So this is calling my image right from CodePen and I don't wanna do that, I wanna call it from my local copy of my image. So this is just gonna be img/brissa or fem frontend masters fem.brissa.jpeg.

[00:12:58]
All right, and we'll just replace that for our other items as well.
>> Jen Kramer: Okay, so that should now be pointing to your local copy. [COUGH] And if we refresh, we'll get the inter font and these should all be now local images, okay.
>> Jen Kramer: How's everybody doing so far?

[00:13:39]
>> Speaker 2: Do we have to log in to get the images?
>> Jen Kramer: No, you should be able to just right click, right-click on any image.
>> Speaker 2: Okay.
>> Jen Kramer: Yeah, and just save images. Yeah, okay, so briefly here, then we have done the following. We downloaded VS code, we set up a folder that had folders for CSS and images inside of it.

[00:14:06]
We created a file, we copied our HTML into that file, we added to it, we added our links to our Google font, and we added a link to our custom style sheet, which we also created by creating a separate document, copying and pasting over our CSS from CodePen.

[00:14:25]
We downloaded all of the images that were there on our design and we saved them into our images folder. So we're now completely disentangled from CodePen. We now have a complete local website here, living on our computer inside of vs.code