Linking Fonts & Images

[00:00:00]
>> I am going to go back to my web browser here, and I've actually kept my Google Fonts open the entire time here, you might not have. So we need to make sure that you have your families selected here inside of Google Fonts. So go to fonts.google.com, we wanna make sure that we have so selected Fera Mano, Josefin Sans and Lato, okay?

[00:00:27]
Chances are when you open up fonts.google.com, this is all still there. Is that true, people in the classroom?
>> Yes.
>> Awesome. Okay, so what we're going to do is we're going to go to get embed code, and right here where it says, embed the code in the head of your HTML, all of that right here.

[00:00:46]
We're gonna copy that code and we're gonna put that exactly in the head of our HTML. So you can put this, I like to put my style sheet last, so I'm gonna put this after the title before my style sheet, I'm just gonna paste that on in. So yours should look something like this now.

[00:01:14]
>> It didn't remember my fonts, are they listed on this chapter 6 page or should I go to the previous chapter?
>> If you take a look, I think it's chapter 1, it'll tell you exactly the fonts that you need, yep? Okay, great. So now we have our HTML document, it is currently talking to, in theory, talking to Google to get the fonts, it's talking to our stylesheet, let's think about our images next.

[00:01:46]
So, if you open up each of these sections here on the web page, you will find somewhere, let me find a section that has an image in it. To go all the way to the container, the section featured area here, and you will see that all of the images currently go, .2codepen, make sense?

[00:02:11]
Because we copied this out of CodePen, so it's doing exactly what it was told to do. What we need to do is we need to swap this from CodePen to the images that are right there on your hard drive, which you should have downloaded from GitHub. So the easiest way to do this is, we're just gonna highlight what we've got here, okay?

[00:02:32]
So I'm gonna highlight assets.codepen.io/that number, okay? And then I'm going to go to Find and Replace, which I think is under Selection, it's under Selection. It's under Edit, and I'm going to choose Replace. So what I'm going to do instead of having assets.codepen.io/ that number, I'm going to replace that with img.

[00:03:03]
So that img should fit right in there with a slash, and then my image name. Make sense? Okay, always good to do one first and make sure it works the way you expect, [LAUGH] before you swap them all and then find out you broke everything, right? So try one, make sure it worked okay, Let's see.

[00:03:32]
So we replace one, make sure it works okay, and then if that is true and it's working okay, then you can replace them all. All right, and there's quite a few of them in here. Once you're done with that here in your HTML, you're also gonna wanna do that same search inside of your stylesheet.

[00:03:55]
So, save your HTML, we're gonna switch over to the stylesheet. Remember, your style sheet has got lots of images in it also, so we can do this exact same search here inside of your stylesheet. I am going to do that search for assets.codepen.io/ the number, and we'll find it.

[00:04:17]
We'll swap it and make sure it works. But remember, this time, what we have happening here is, actually, can I undo? I can undo. What we have actually happening this time, if I swap in img, is that the right path here to these images? If I said url is img/fem-comment.jpeg, is that the right path?

[00:04:52]
Why not? [INAUDIBLE]
>> Well, actually, the code is correct, this is a URL, this the way you write it inside of CSS, but the path is incorrect, right? Because I'm currently in my stylesheet here, and I need to get to my images here. This path is gonna tell me to look inside of my CSS, yeah, cuz I'm currently in my style sheethere, I need to look inside of my stylesheet folder for another folder called img.

[00:05:26]
And I don't have one of those. So how do I fix this problem? [INAUDIBLE]
>> Dot, dot, slash. I'm gonna put a dot, dot, slash in front of it, and by the way, VS Code rewards that by telling you, yeah, I kinda know now where you're talking about, okay?

[00:05:44]
So the Find and Replace here is gonna have to be dot dot slash when you get to your stylesheet. Now we can swap these And make the changes here to your stylesheet. Hopefully that is all in place. Phew! So now we have an HTML file, that HTML file links to our Google Fonts, that HTML file links to our custom stylesheet, that HTML file was looking for images that are on the hard drive that's in front of us, not off at CodePen.

[00:06:20]
And our stylesheet is also looking for images that are on our hard drive, not in front of CodePen. Phew, so that is how you move all of those sections that you developed in CodePen, add a CodePen, and put them into VS Code, so that you can continue to do further development.