Nav Bar HTML Practice

[00:00:00]
>> Navbars are some of my favorite things in the whole world. Because I think you can teach pretty much all of web development [LAUGH] in terms of HTML and CSS inside of a navbar. You learn good semantic markup. You learn all kinds of crazy layout tricks. You learn all kinds of interesting things about the cascade and selectors and all the rest of it, sort of a little microcosm of web page.

[00:00:22]
And, of course, they're highly relevant. What is a web page without a navbar? So we'll start here and I'm going to give this to you to do first. Creating the correct markup for a navbar inside of a CodePen. So let's take a look at our beginning CodePen. As you see here, I have copied over the CSS as it exists so far.

[00:00:44]
That's the CSS from the intro exercise that we did, the CSS from the contact exercise that we did. And I have given you, here's what our navigation will ultimately look like. You're gonna put in your name, and then there's a series of links here. And so what I would like for you to do now, is I would like for you to give a pass at this,.

[00:01:06]
Take like five minutes and think about how you would go about marking up this navbar in a semantic way. Remember that this is a list of links, hint hint. It is a list of links, so you'll need to put in a link. It doesn't have to go anywhere.

[00:01:24]
We can worry about that part later. It's a list doesn't matter what he's links in, it probably doesn't. So that should sort of trigger something else for you in terms of the HTML. Its navigation, its major navigation for the web page, that should trigger another HTML element for you.

[00:01:43]
And we had talked about that there's an H1 in here somewhere as the most important part of this. So think about all of that, and take a first pass at marking this up as a navbar. And I'm gonna talk you through the answer here in just a moment and see what you can do in terms of just marking this up.

[00:02:01]
Don't worry about how it looks just yet. How did you do that?. Hopefully, you did okay with that navbar markup. Navbars are really again, one of the things I really love because the markup is pretty much always the same. And very few people are doing it correctly at this point in time.

[00:02:22]
A navigation bar is a list of links that can be visited in any order. So it's a list that should immediately trigger in your head one of the types of HTML lists that are available. UL for an unordered list, OL for an ordered list, or if you're super fancy, maybe even DL for a description list.

[00:02:43]
I'm sure there's several choices to choose from but that doesn't matter what order you visit those links in. There isn't a first thing to do or a second thing to do and we don't have pairs of information. So that means that the unordered list is going to be the foundation of how our navbar works.

[00:03:01]
Then we're going to flag it with the nav element in order to set this as the main navigation on our webpage. It's not any list of links, it is our navigation. And so that's why we have a nav tag there. So that is the foundation of any navbar that you ever code from now on.

[00:03:18]
Now a lot of developers look at this and they go, man, that just looks like a lot of extra HTML markup. Well, let me tell you, having all those extra elements will wind it making styling a lot easier and a lot more interesting. It also enhances accessibility along the way.

[00:03:35]
So here's my CodePen and how I marked this up. Some of this should be pretty straightforward for you. So there's that navigation, it starts here at the beginning and it closes at the end of this whole thing. Inside of that is our unordered list, starting and ending unordered list.

[00:03:53]
And then we have a series of navigation items. They start with an LI, they end with an LI. Inside of that, we have links. And I think all of that's pretty straightforward. Where are the curveballs? Curveballs are here, so here on line five, that's where I put my H1.

[00:04:11]
Now you may not have seen that kind of markup before where you have an LI. Inside of that, we have an H1. That is the main heading for an entire webpage, but this is valid legitimate markup. A heading element is allowed inside of a list item. And that will ultimately be my logo, it's gonna be a text based logo.

[00:04:33]
But my logo for the web page is going to be that H1 right there. And I have set that to link to itself. Ultimately, it's we're gonna make a page called index.HTML, which is historically, the homepage of your website. So that's why I've linked that there. Then we're going to have a link to the projects section of our webpage, we haven't built that yet.

[00:04:56]
But you can set that up there by linking to pound projects, or pound contact, pound hash tag is the other one, of course. So the way you set up that linking inside of the same page simply linked to that particular ID. So by hashtag contact here, we're skipping down to the section with the ID of contact.

[00:05:24]
Okay, so that's what all of that is. I have a link to my LinkedIn. I have a link to my GitHub, and I have a link to my resume. I prefer to make things that go off site open in a new window. I know some people feel very strongly about this going the other way that everything should open in the same window.

[00:05:43]
My advice to you is you can do either of those things just be consistent. We want them to all either all the links go upside open a new windows or they all open in the same window. Whatever way it is that you want to choose how to do that.