Custom Font & Responsive Image

[00:00:00]
>> So where are we are at this point, we've got a page that looks like this. We've got our colors in place. We've done our type scale, we're missing a couple of things. We need to set our background color on our body and our text color. We need to get that set and we need to set up our font family.

[00:00:20]
So let's do those three things right now. What I need to do is make the background of this webpage I need to make it teal color. Anyone have any idea how I could set the entire background of this webpage to the teal color? Yes.
>> Use a body selector.

[00:00:39]
>> Exactly, we're gonna use our body selector. So we'll scroll on down to find our body selector here it is. And we will give this a background color of var(""teal) and that should set it to this color. Now if I wanted to change all of the colors of the text here all together, how would I go about doing that?

[00:01:07]
In one single declaration How can I change the color for everything that's here on this page?
>> In the body.
>> In the body? Yep, you can set it right here color is var(""white), everything changes Whoops, type the right thing. Everything changes, Except for one thing. What didn't change?

[00:01:37]
>> The link.
>> Why didn't the link change?
>> It's defined by pseudo classes.
>> It is definitely defined by pseudo classes, but where does that blue underline style come from?
>> Text decoration.
>> Text decoration is part of it that's responsible for the underline. But where does the blue underline come from?

[00:01:59]
>> Brower default.
>> It's the browser default, exactly. So, we need to set up some link styling as well. We can set that up here and often that is just done with the letter A, okay. So A is stands for our anchor for our links and we can set that up with a color and I'm going to say var.

[00:02:28]
I think I said lime. Maybe I had lifted magenta. I don't quite remember. Lime, okay, so there it is. You can roll your mouse over it. Nothing happens. Should we have a hover state? Yeah? Let's have a hover state, so we're gonna say a colon hover. And you want that to go after the A, always do not put it before the A, put it after the A.

[00:03:01]
There's an order for these things in order for your cascade to work correctly. And so here we can say our color will be var(""cyan). It's one of the colors we set up earlier, and when you roll your mouse over it, you'll see that happen. Now, for those of you accessibility people looking at this and saying, that color contrast doesn't look like it quite squares with accessibility standards, you are absolutely right, it does not.

[00:03:31]
However we will not be using this link on this particular background. So don't worry about it right now. [LAUGH] It will work eventually, and that is something that you should think about make sure that you have adequate contrast between your background and your link colors, but this is not the ultimate way we'll be using these colors.

[00:03:55]
Okay, and then we need to set up our font family here. Remember, we had said we were going to use poppins. And I'm gonna go through this process with you because we're doing this in CodePen. I'm sure most of you know how to do this with Google Fonts.

[00:04:09]
You go in, you get a little bit of code, you drop your code in. The fonts apply. But we're a little bit different here in inside of Code Pen. So let's go through this. We're gonna go to fonts.google.com. And we can search for our font, which is called Poppins.

[00:04:33]
Okay, and there it is. And it will show you all the different types and variations of the Poppins font. How many of these should I use? Should I add all of these to my web page?
>> Not necessarily.
>> Not necessarily why?
>> Because they're different styles like extra lighter light.

[00:04:58]
So if you only want some of them, you only need to import some of them.
>> Absolutely, if I'm only using some of them, I should load only some of them. But why? Why wouldn't I just load them all? Especially if I don't quite know what I'm gonna do.

[00:05:14]
>> Yeah, I guess if you wouldn't use them, it's not really necessary.
>> Right? If you're not gonna use them, it's not necessarily and all of these have a file size associated with them, right? So if you stack them all up, then you wind up degrading the performance of your webpage, so we only want to use the ones we're gonna use.

[00:05:32]
In this case, we are going to use light. So Light 300, we can select that. Just click on the little link over here, it'll add it over here on the side, and we are going to use 600 semi-bold. So down here, normally we'd either use the link or the ad import and you would copy this code into your web page.

[00:05:53]
But we're in Codepen, so there is a different way of doing this for CodePen. What I want you to do is in the third item here, where it's the last link. So there's a link with a pre-connect, a link with a pre-connect, and then there's a link here with just an href.

[00:06:08]
That's the one we want. You wanna copy the href part of this. So I'll highlight that and leave that there for you to see. You wanna copy just that part of it. Basically, the things between the quotes at the href. In that last link, we're gonna copy that.

[00:06:26]
And then we're gonna come back to our CodePen. And here in our CodePen, we're gonna go to Settings up here on the top. We're at CSS here. Scroll down to External Style Sheets and Pens, click in the box here underneath, not the search box, but the one that's underneath, and you can paste in that URL that you copied, okay.

[00:06:57]
So that's under Settings, under CSS, and then down under add external style sheets or pens. We paste in that URL, say Save & Close, And it should apply. Did it work? Font looks a little bit different? Little rounder. Okay, and why is that? Why did it just apply?

[00:07:31]
We actually copied over this code from our type scale. It was already set up for us with Poppins. Okay, so we could leave it like that if we wanted, but, as you know, type is something that changes a lot. So this is another thing that works really well for adding to our variables.

[00:07:48]
So let's add a variable. And I am usually super creative this way. I call it sans-serif, because that's what this font is. It is our sans-serif font. And we can put in this is Poppins. ,sans-serif. All right, and then we'll add that here. Inside of our body element instead of calling for pop in san-serif, we can just say var(""san-serif) saref.

[00:08:29]
We have just a couple of extra styles that we wanna set up and apply here. I am going to add two more items that we're going to use momentarily and that is a class of club. We can set that up here and we want club anything with a class of club to have a font size of 1.25 rem.

[00:08:54]
Which of my variables should I use to get 1.25 rem? H5, right, h5. So, our font size here will be var h5. Back in our body element. Something that's always good to set padding 0, margin 0. And what this does because some browsers do it with padding, some browsers do it with margin.

[00:09:27]
See how my text is now shoved up against the edges of my web page here? Okay, because body has a little bit of either padding or margin on it by default, so we'll just turn that off really quick. The last thing, it's just a good practice to set when you are just starting to work here on your web pages.

[00:09:46]
If we made our web page a little bit smaller here with this image, notice that it just starts to get cut off, right? It's not resizing. Images are the size that they are. They don't wrap,they don't change. They display at whatever dimensions that they have. So one of the little hacks, because it's a hack, that we can add to this for images is the following.

[00:10:15]
We'll just say image, generic images. We're gonna say with 100% max width 100%. Now ideally you're loading the right size image for the situation. So if you wanna a big image, you're gonna load that big image in, and if you want a smaller image, you're gonna load that smaller image in.

[00:10:36]
But if you want something to be flexible, file size is relatively small, this is how we make a flexible image. See how that works? Now that image will flex. So this is another little bit of code that you can just drop in any web page that you put together.

[00:10:54]
So that your images are flexible for responsive design, and it doesn't all in one fell swoop. And then you can make adjustments for those images a little bit later. So let me point out to you that from the web page, we should have worked through pretty much everything that's here at this point.

[00:11:09]
If you scroll to, right here, I've got it highlighted, just before the picture, there is a link for the ending CodePen. You can take a look at that ending CodePen, that is the way your code should be looking when we are done with this, which we are.