2.4 Laying Out the Header
In this lesson we will use a few Bootstrap classes to help us lay out the main navigation bar for our web page.
1.Introduction2 lessons, 05:34
2.Structuring Your HTML9 lessons, 1:03:52
3.Styling the Page5 lessons, 43:27
4.Conclusion1 lesson, 00:31
2.4 Laying Out the Header
Hello, and welcome back. In this lesson, we're gonna start building out the overall layout of our webpage in HTML. And you'll notice that I've taken our site two folder and made a new copy and called it site03. So all the changes we make in this lesson will be saved in the site03 folder. But if you're following along, you wanna go ahead and open up the site02 folder because that's our starting point. So if we jump into Photoshop, we can see our basic page design. And then up at the very top, we have our main menu, here. Now, Bootstrap provides us a very easy way to create a navbar like this up at the very top of the screen. And we're gonna do that using Bootstrap, so if we go back to our browser and go to getbootstrap.com and then in the upper right hand corner here I'm gonna change the version here to 3.3.7. And then if we click on the components link, this will take us to a page where we'll be able to look at the HTML for a navbar. So, if we scroll down a little bit, we can see some examples of a navbar in action. So we have this navbar class, as well as this navbar default class. And we're gonna be using both of those, but then I also want this navbar at the very top of our webpage. And there's another variation on the navbar, if we scroll down a little bit further, and we have this navbar fixed to top class, this is not the one we're gonna be using, but this is a class that we would use if you wanted that nav bar fixed to the very top of the browser window. And if you wanted it to stay there at the top while you scroll down. So it would never leave the top of the browser window. However we do want it to scroll up as the rest of our page scrolls. So I'm gonna move down to this navbar static top class, that's a class we want there. So the combination of these three classes, navbar, navbar default, and navbar static top will give us what we want. It will give us a good starting point for our page. So having said that, I'm gonna jump into our project files folder. I'm gonna open up site03 in Visual Studio Code. And then we'll open up our index, not our images folder, our index.html file. And we can get started. So we can take a look at this file if we want, in our browser window. Right now all it has is this hello world text in it, and we are gonna change that. So let's jump back into whatever code editor you're using, and here's that H1 tag with the hello world text inside it. And also inside the head of our document, you'll notice that it says Bootstrap 101 Template. I'm gonna change that title because that title right now is showing up. If we were to take this out of full screen mode, you'll see that that's showing up in the tab for this particular webpage. And so we're gonna change that to whatever title you want for your page. We'll just say Landing Page here. And then we'll jump down to the body of our document. So in the body of our document, when I'm editing, I like to have a little bit of space to work with because it's just easier for me to work if I have a little space. So I've got a couple extra lines above and below. We can reduce that space later on once we're done, but I like to be able to really focus in on what I'm doing here. So I'm gonna zoom in a little bit on the text, so that we can really see what we're doing. And let's pull this over a little bit and we're gonna get started. So I'm gonna create a nav element just like we saw on the Bootstrap website and we're gonna give it a few different classes. We're gonna give it a class of navbar. And then we'll give it another class of navbar-default. This is what takes care of the basic colors within that navbar. There's another option called navbar inverse, where you would have a black background with white colored text. But the navbar default will give you a white background with darker text. And then our third class here is gonna be navbar static top. Which is the one that will put it at the very top of the page with no margins or rounded corners around it. So that's our opening tab, we'll go ahead and add roll, equals Navigation, and there we go. We'll nudge that closing tag down a couple of lines. And then I'm gonna jump over to our Photoshop file again. So the Nav bar itself, as you see, takes up the full width of the browser. But the content inside the Nav bar is contained within that fixed width that we've talked about before. So we're gonna need to put all of that inside a bootstrap container. So the nav bar itself is not inside the container. Because it takes up the full width but the content inside it will need to be inside a container. So we'll jump back into our code. And I'm going to type in some shorthand code to type this out a little little bit quicker if you have access to Zen coding or Emmet in whatever code editor you're using, then you should be able to do this as well. But I'm going to give this div a class of containers, so using Zen coding, that would just be div.container and then we'll hit tab, and you'll see it fills that out for us. Again, the ability to use that shorthand just really depends on what code editor you're using. A lot of code editors do have plugins available for Emmet or Zen coding. If you're using something like brackets, then you can get the Emmet extension. If you're using Visual Studio code, then it comes by default. But there we go. So we have our containers. So everything inside this container is gonna be within that fixed width that we talked about. So now we have a couple of items we're going to put inside that container. And I'm just going to copy these and paste them. We'll kind of go over it. So first we have this anchor tag with a class of navbar-brand. That navbar-brand class is just another class available to us through Bootstrap. And that's just going to style this text a certain way. If you're using an actual logo, an image logo, then you don't need that nav bar brand class but I'm using it here and then below that anchor tag we also have unordered list. And we have a few more Bootstrap classes here. We have nav, navbar-nav, and then pull-right. And these first two are just going to style our list in a certain way, and then the pull-right class is going to float it to the right so that it's on the right side of our nav bar. Then inside that unordered list we have a few list items. And our very first list item has a class of active, it's our active current page. And you can see those just have links inside them. So let's save that document and then jump back into our browser, and refresh the page and see what that looks like. So there we go, we've got our navbar in place with our LOGO on the left and a few links over here on the right. So as we move through the next few videos, we're gonna take this one chunk at a time and we're just gonna be laying out the HTML for each of these sections. Later on we're gonna jump in and start styling this, you'll notice that the nav bar here actually here has a white background, whereas the Nav bar that we just created has a light gray background. So we're gonna need to change that to match what's in the Photoshop file. But first I want to take care of the bulk of the HTML before we jump into our CSS. So thank you for watching, and we'll move forward in the next lesson.