Footer Exercise

[00:00:00]
>> Now that you've seen how you can get an SVG from a site like Font Awesome and include it in your webpage, make it accessible, and you of course already know how to work with text and background images on a webpage. It's time for you to take a stab at this next exercise.

[00:00:17]
So the last thing I'd like for you to do here in chapter three, is to try building the footer here on your own. So starting with the opening CodePen. Make sure you put in your information, your name and the title that you're going to have, add your icons for LinkedIn, GitHub, email, whatever else you wanna add.

[00:00:40]
And then mark it up, add your styling, and see if you can make your footer look like the footer that I am showing here. And I anticipate this is gonna take you somewhere between 15 and 30 minutes, so give it a try and I'll give you my answer momentarily.

[00:01:01]
All right, so I hope that that went well for you and that you now have a footer that looks awesome and kind of like the one that I have here. So let me go through what I've got for code and so forth. So this is the footer of the web page.

[00:01:16]
So a great way to mark the data is with the footer element. So there we are, there's the footer element. Inside of that we have a div with a class of container. So this is just like we have been doing throughout the course where we had that outside section except in this case, it happens to be the footer instead of a section element.

[00:01:35]
And then we have a div with a class of container. The name, Jen Kramer, plus my title seem to be pretty important down here in the footer, so I've marked that up with an h2. Then I have my list of links. So here's all the ways that you can contact me, and you'll see here that these are set up pretty much the same way.

[00:01:55]
So here's the LinkedIn1, with a link to my LinkedIn page and then the aria-label of LinkedIn so that people who are using screen readers will know what it is. And then of course in the SVG itself, we want to set the aria hidden to true so that we skip over those SVGs and the screen reader doesn't try to read it.

[00:02:16]
Okay, so we repeat that same process with GitHub. And then with email, remember, again, the email link is slightly different that's going to be mailed to colon with your email address, and an aria-label of email. You'll have to go to Font Awesome to go download that SVG but I showed you how to do that earlier.

[00:02:37]
And then finally at the very end of everything here I have my copyright statement. And what the way that I've marked that up is with a paragraph and I've actually used the small HTML element. Now, the small element was something that was frowned upon for a really long period of time, of course was invented back when small meant make the text small.

[00:02:59]
Today that small has now been repurposed into a meaning that means this is like the fine print. So this would be the legalese at the bottom of your web page or the copyright statement. Something that's not necessarily all that important but legally we've got to put it there, so there you go.

[00:03:16]
There's my copyright statement. So that's why I use the small element for that. If you didn't use the small element for yours, absolutely fine, it's fine with just a paragraph. Notice that as I make my page bigger and smaller, that image does change a little bit here. I have a little trick in the CSS that's going on that shows you different parts of the image as I changed this.

[00:03:39]
So let's look at the CSS for that piece of it. Okay, so here in the footer I have my layer of footer that's set up here automatically and then inside of that we have my footer style, very similar to the other sections that we've seen before. I'm centering my text, I've added some padding.

[00:04:03]
I gave it a background color of black just in case, for whatever reason, the image doesn't load quickly. Then we have the image itself, don't repeat it, center it on the page. The line of code that makes it do this thing where, it's showing different parts of the image is this line right here, background size of cover.

[00:04:24]
And so what that's going to do is basically take the image that's here and resize it such that it's filling in the space that's available to it. Because the dimensions of the viewport here are changing different, it needs different amounts of image in order to show. And that's why like when it gets small like this, you can actually see the island and the sunset down here at the bottom, as opposed to when it is wide, when you see just the stars on the top.

[00:04:54]
If you didn't have that line of code, that's not the end of the world. What it would look like is this instead, you would see the stars swirling around, and it would pretty much be the same no matter what. You would just have the swirl kind of scrolling off the side of the screen, and that works absolutely fine as well.

[00:05:12]
There's nothing wrong with that, but I just really like the sunset down at the bottom, so I added that line of code, which dealt with the layout of that image a little bit differently. Then finally down here at the bottom, we have our footer, ul, so of course I had all of my icons inside of a list.

[00:05:32]
So we did all the same things that we did before with the navigation bar. We've turned off the padding and I guess I've left a little bit of margin on the top and bottom so that those icons stand out. We've set them up with Flexbox, they show up in a row.

[00:05:46]
They have a little bit of a gap in between them so that we have plenty of room for for clickability. We have made our SVG is turned white and they are green when you hover over them. And that pretty much takes Care of the footer for the web page.

[00:06:01]
It's a lot. It's a lot, but we've talked about all those lines of code before.