Navigation HTML Markup

[00:00:00]
>> Chapter 3 is where we get a little bit funky. We are going to build our navigation bar, and we're gonna build it with a hamburger button. So this is fairly advanced for a lot of you, but I think you're gonna find this helpful. We're gonna start by building the desktop layout, and then we're gonna make this progressive smaller going down to mobile layout.

[00:00:23]
So if you open up your beginning CodePen, and what I want you to do is, I want you to customize the text that's here inside of this window. So obviously, you're gonna put in your name, as I say here in the instructions. If you wanna include all this stuff, if you don't, you can just include links to homepages.

[00:00:48]
So include a link to your LinkedIn, to your GitHub, maybe a link to your online resume. If you've got it in Google Drive or if you've got it in Dropbox or someplace like that, make sure it's publicly accessible if you want people to be able to see it.

[00:01:03]
I've given you some places where you can set up links for projects, about, and contact. Add your name to the text on the page, and then mark up all of this stuff. But for right now, what I would just like you to do to get started is just to put in your name and set up the links.

[00:01:24]
Don't worry about the rest of the markup yet, I'm gonna go through that with you momentarily. Welcome back, hopefully, you managed to find all those links and modify the navigation to reflect what you wanna show on the website. Here's what I have for my answer. So I have a linking to index.html for my name.

[00:01:48]
Because, usually, when you click your name, this would just gonna wind up being the logo of the website. When you click that, it's gonna go back to the homepage. Now, if you were to click that link right now, you would get an error. And that's because, of course, index.html doesn't exist anywhere here inside of CodePen.

[00:02:06]
It will exist when we get to taking things out of CodePen and putting them into VS Code, which we're gonna do later in the workshop. I've got my projects linked and my about links set up and the contact link, all of those, again, same issue with not working right now.

[00:02:24]
The ones that have that pound or hashtag signed with the word projects and contact, does anyone know what that is? It looks kind of weird, we have index.html, and then we have index.html#projects, what does that mean?
>> That lets you jump to a specific part of the web page, right?

[00:02:43]
>> Exactly.
>> That you have marked as projects or contact.
>> Exactly, you are exactly right, that is exactly it. So we are going to mark somewhere here, when we start assembling this page. We will put in the IDs, it's an ID that is used for this, for projects and contacts.

[00:03:00]
So when you click those, you'll go to the homepage, and then skip to that part of the section, somewhere there on that. And, of course, I have links to LinkedIn and GitHub, I have those opening in separate windows, that's what that target="_blank" is. Remember to put the underscore in front of blank, very, very, very important, to have this open in a new window.

[00:03:22]
If you say target="blank" without the underscore, you are creating a new window that is called blank. As opposed to target="_blank", which means, simply, open in a new window. So if you set up a whole bunch of these with target="blank", no underscore, you'd wind up loading over that page every time.

[00:03:42]
So I'd see my LinkedIn, then I'd load up the GitHub, and then I'd load up the resume. As opposed to the underscore, in which case, I'll still open new tabs for all of those. So that's one of the big differences between _blank, which is a reserved word kind of thing, and blank, which could be just a custom name for a window.

[00:04:03]
And we have this all set up as links right now, everybody good, for the most part? Fantastic, so let's go through how we're gonna wind up marking up the rest of this. This is ultimately going to be the header of our homepage. So can anyone make a suggestion as to what might be a good element to wrap all the way around these things, the header of our web page?

[00:04:28]
>> The header element.
>> Really, you think, how about the header element? So we are going to put header up here on the top. So header, and then after all of the items there, we can put in a /header, great. Okay, then, for my name, that is the most important thing on the webpage.

[00:04:56]
Because this is the name of my website, it's I'm Jen Kramer, this is my portfolio, yes? So what would be an appropriate element to use for this particular item? Most important thing on the page would be?
>> h1.
>> h1, so this is gonna have an h1 around it, h1 and a /h1.

[00:05:20]
Okay, fantastic, the rest of these items here, what are all of these links? These are ultimately going to be a what? Navigation bar, yes, so what would be a good element to use for a navigation bar?
>> nav.
>> How about nav? So we're gonna perhaps nav around all of that, because that is our navigation.

[00:05:48]
Now inside of that, we have a whole bunch of links, what are these links, what is this? It's a list of links, yes, they can be visited in any order, yes? What would be a kind of element that we could use to mark up a bunch of things I'm linking like a list?

[00:06:06]
An unordered list, anyone have a suggestion for an element for that, ul, yeah. So we're gonna put in a ul here, unordered list, and we're gonna end then after all of those links. And then, of course, what are we going to do for each of these list items?

[00:06:30]
What are we gonna give it?
>> li.
>> li?
>> li, for list item, yes, okay, so let's go through and put in all of those list item links. And there we go, and then we're gonna close all those list item links, copy, copy, copy, paste, paste, paste.

[00:07:00]
Great, and then we can clean up our HTML, format it, and there it is. Okay. So a few things here. I have not included my section around all of this or used the header as my section, I have not included my container. Ultimately, what's going to happen as we build out this web page, this header is going to go inside of my intro comment image.

[00:07:28]
So if you remember, if we take a look at the, Back here, we take a look at our final version of this. My navigation is ultimately going to be part of that introduction, the intro part of the web page. And so, this is gonna have to go inside of that section of, what do we call it, section intro.

[00:07:53]
It's gonna have to go inside of the container, so I'm not gonna include those elements right now in my CodePen. I just wanted to remind you this is ultimately how it's going to look.