Footer Semantic Markup Exercise

[00:00:00]
>> Jen Kramer: All right, well then, congratulations, you finished chapter three on setting up our bio. We are moving on to our next chapter, which is looking at our footer. And I would like you guys to take the lead in this. So we're going to start with the same kinds of ideas that we did before.

[00:00:21]
I'm gonna open up our beginning markup here. This has all of the CSS styles that we just wrote for the about me section incorporated here into our CSS. I've put in the wrapper around the outside here, and this is the text that we're going to include on the page.

[00:00:42]
We have other projects, we have some blogging information, some other things here for open source, okay? And we have another round of icons down here at the bottom, which will eventually be here for our contact. Make it small, you're not supposed to make it pretty yet. What I would like for you to do, is I'd like you to take, just go through the HTML and see if you can semantically mark up this footer context based on what you see there.

[00:01:14]
Just worrying about the HTML, sound good, don't worry about CSS. Don't make it pretty, just see if you can work on marking up some HTML here in the footer, and then I'll go through my answer with you.
>> Jen Kramer: Welcome back, everyone. I hope you did well on that little challenge and your markup.

[00:01:38]
Let's go through what I came up with for an answer. And, so here is what I've got, the styling isn't going to be perfect. Don't let the styling bother you, we haven't even tried that yet. This is taking in styling that we've already written from our about page and applying it here to our footer.

[00:01:57]
So we'll tweak that up here in a moment. So the way our HTML looks should be something like this. We started with a div with a class of wrapper. Ultimately, when we go to our final website, we'll have the about section, the project section, and the footer all on top of each other.

[00:02:13]
The wrapper will go all the way around everything. So I've roughed it in here for us. And then after that, I have a footer element that goes all the way around everything here, why? Because this is the footer, and that's what footer elements are for. So we've identified this as the bottom of our web page.

[00:02:33]
Inside of that we have the words other projects, this should be marked up as an H2. Remember we only have one H1 per page, we already take in that with Cedro, the name of the person's portfolio, the site that we're building. So this is one of the second most important things on the page, so it gets h2.

[00:02:54]
After that, we have different sections here in our footer. We have a section about blogging, we have a section of open-source. And a section about other courses, so each of those get the next level of heading, which is an h3. Remember that keeping your headings in order is really important for accessibility purposes.

[00:03:12]
We wanna make sure that those headings make a reasonable scaffolding, sort of outline of the page for people that are using screen readers, and that they are always in order, and that we don't skip levels. That's what they mean by that. After that we have, the items inside of this look like an ordered list, they're just a list of links, right?

[00:03:33]
So we have our uls and lis for each one of these items, and there are links associated with some of these, not all of them, but some of them. So that is the markup that you see here. So we have that for blogging, we have the same kind of thing for open source, although for whatever reason, open source didn't have any links associated with it.

[00:03:57]
And then we have that here for other courses, okay? And then finally, when we get to our contact section, that also gets at H2 because other projects in contact are of equal importance, so they both get H2s, and then we have a list of icons again. In fact, you probably could copy this very easily from the top bar that we already coded from the about part of the page, you could just copy this right on down to our footer.

[00:04:28]
So this is exactly the same markup again, this is the icons. And then remember that we have our icons are in an unordered list, each of them getting a list item, and remember that we have to include our title inside of our SVGs for accessibility purposes.