Footer Section Practice

[00:00:00]
>> So what I'd like for you to try is the layout for the footer of this webpage. Once again, I've given you a beginning CodePen, I'll show you what that looks like. Here it is, fill in your name, fill in your title. Here's where you're gonna place your LinkedIn, your GitHub, and your email links, and you can set up your copyright statement here, okay?

[00:00:21]
So you're gonna do everything that we have talked about this morning. You're gonna start with good semantic markup. This is the footer of the webpage, that should be a hint to you. This is a series of links here that have icons associated with them, that should be a hint to you.

[00:00:39]
It's gonna be about 400 pixels wide across all dimensions, so you don't have to worry about responsive design, just worry about getting it to work this way. And again, it'll work independently inside of that CodePen. I have copied over into that introductory CodePen all of the styles that we have generated through the navigation portion of the course.

[00:00:57]
It's already hooked up to our Google Fonts, and it's hooked up to Font Awesome, so you don't need to worry about that. So go ahead and write that markup, put in your icons and make them accessible, and style it up so it looks just like the image that I showed you.

[00:01:20]
So I have up here my answer. And so, let's look at the HTML first, because it always starts with great HTML. So first of all, I wrapped a footer element around the whole thing because, of course, it's the footer of the webpage, and so that makes sense. I have put in my name and my title.

[00:01:44]
And then I have a series of links. Notice that I did not wrap this series of links in a nav tag. That's because this is not major navigation for the website. It's navigation, it should be a series of links to be visited in any order. That is an unordered list with some links inside of it.

[00:02:04]
But major navigation usually gets the nav element as opposed to things that often occur in the footer like this. Or privacy policies, and terms and conditions, and that kind of stuff that you find in the footer, generally doesn't get a nav tag. If you put in a nav tag, it's really not the end of the world.

[00:02:22]
There is definitely some debate on the nav element in whether it should be used just for major navigation or all kinds of navigation. That's the way that I interpret it though, so that's why I don't have a nav element there. If you put one in, that's awesome. Okay, so then, of course, we have pretty much what you had before for LinkedIn, what we had before for GitHub.

[00:02:45]
And then you could set up that mailto link that I talked about earlier, you could set that up with the email here. Make sure that you have all those text equivalents in place, and I set them all to be screen reader only. And then down here at the bottom of the page, I have my copyright statement.

[00:03:02]
And I have an element here that you may not have heard about before or maybe you've been told not to use, and that is the small element. So small just like B and I, this was an element that we had back in the day. [COUGH] The opposite of a small was big [LAUGH] and it was designed to make text small or big.

[00:03:24]
It disappeared in HTML 4, it came back in HTML 5, and the small element is now recommended for small print, fine print. So disclaimers, for example, or copyright statements, or other types of things like this, where it's sort of all of that terms and conditions type of stuff.

[00:03:46]
That is what small is used for, and that's why I put it down here in the copyright statement. If you didn't do that and you just have a regular old paragraph, that's okay too. The small element is sort of a higher level kind of element that you may not have already known about.

[00:04:02]
We go into our CSS, so this is all of the CSS prior to the footer element here. This is all of the CSS that we've written so far in the course. And then to this, we add the following. So first of all, I align my text in the center, I just put that right on the footer element, and text align is a property that's inherited.

[00:04:25]
So that will carry through into all of the descendant elements from the footer element. Then, of course, we style up our unordered list. Just like I told you before, I have a list-style-type of none and a padding of 0. I did keep some margin here in place, although it looks like it's not displaying over here in CodePen.

[00:04:47]
But just to provide a little bit of space when we copy this over into VS code, which is what we're gonna do next. And then, of course, I turned it into a nav bar by making it display flex, row wrap, justify-content in the center. I gave it a nice fat gap, cuz again, finger navigation on a phone, you wanna have a nice big clickable area and you wanna have space between those links, and pumped up the font size.

[00:05:15]
So I pretty much styled the footer here in just two styles. And the rest of the stuff carries in from the navigation, and including the fact that we have these magenta colored icons. And that when we roll our mouse over them, they turn to the hot magenta color, that all carries in actually from some earlier styles.