FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Structuring the Header

Now that all the pieces are in place, in this lesson we'll walk through the basic markup we will use to display the header of the page. We'll be relying largely on Bootstrap for styling and layout.

2.4 Structuring the Header

Hello and welcome back to Scroll Events Made Easy. In this lesson, we're gonna get started with the HTML for our site. We've already included our JavaScript and CSS files that we need, and now we're gonna get started actually laying out our content. So we've got our site1 folder, and you might notice that an images folder has magically appeared there. It's not being used in the site1 folder, but it is there. And we now have access to a few different images and there's a license.pdf file in the project files folder. That describes the license for those images. And now what I wanna do is copy that site1 folder. I wanna make sure that we give you a copy of all the files as we're working through this course, every step of the way. So that if at any point you get lost, you can just jump in where we left off in one of these folders. So I'm gonna start with the site01 folder, which we finished up earlier. And I'm gonna make a copy of that, just copied and pasted that into the same directory, and I'm gonna call this site02. And so all the changes we make in this lesson are gonna be saved there in that site02 folder. So I'm gonna grab that site02 folder. I'm gonna drag it down to the Brackets icon, which is my text editor of choice for small projects, like this, and there we go. So we have out images folder. We have our index.html file, which we've already started on. And then we have our JavaScript folder with our paralax.js file in it. So, in the body of our document, we've already included our script and link tags. I'm going to nudge those down, those are gonna be at the very bottom. And then inside our body, we'll get started. So the first thing I'm going to create is gonna be the header of our site. We're gonna use the HTML5 header element there. And inside that header element, we're gonna create a navigation unit. And we're gonna be using some Bootstrap classes to help us fill this out a little bit. So I'm gonna create an element, a nav element, if you will, and we're gonna give this a class. And again, these are Bootstrap classes here, I'm not just making these up. I'm gonna give it a class of navbar, and then I'm also gonna give it a second class of navbar-inverse, and we'll talk about what that does in just a moment. But there we go, we have our navbar. Now if we wanted to save that file and see what it looks like, we could certainly do that, we can show that in Finder, and then double-click on it, or if you want to link up using Brackets. If you wanna link up to Chrome, you can click over here, on this little lightning bolt icon for a live preview, and as you type in your code, it will automatically update in the browser. Now, I'm not gonna do that for this particular course, just because it kind of messes with my video process. So I'm just gonna save the file and then jump back and forth between the browser, the old-fashioned way. So let's jump back in our browser. That's not our browser. There we go. And, in Chrome, you can see that we now have this black bar at the top, but by default, Bootstrap puts rounded corners on these navbars, because they're designed by default to be put inside a container, not to take up the whole width. So if we were to put this inside a container, for example, let's just give this header a class of container, just so we can see what that would look like, save it, and then refresh. You'll see that container class gives it a maximum width, and then we can see those rounded corners much better. But, I'm gonna undo that, just go back to where we were. And then in our CSS, we're just going to un-style those rounded corners. So to do that, I'm gonna create another folder inside site02. So we can just right-click here, and click on New Folder. I'm gonna call that folder CSS. And then I'll right-click on the folder, and click on New File. And let's just call that main.CSS. So this will have all the CSS for our page. And then we'll style up our navbar. So remember, it has a class of navbar, so on our CSS, I'm gonna say .navbar. And then in the parentheses, or the curly brackets here, excuse me, I'm gonna give it a border-radius of 0. Now if you have Bootstrap on your system, you could go into your Bootstrap CSS, find the CSS for the navbar, and edit it there, but I would highly suggest that you don't do that. And the reason for that is, some day you might want to upgrade your version of Bootstrap. For example, Bootstrap 4 is now an alpha, at the time of this recording. It's not quite here yet, but it's coming in the not too distant future. So if at some point you wanna upgrade from Bootstrap 3 to Bootstrap 4, and you just replaced your files, then all the changes you made are gonna be gone. So I like to refrain from editing the Bootstrap files, just like I will never touch a jQuery JavaScript file. I will never touch the JavaScript files for any of the plugins that we're gonna be looking at, unless for some reason, I'm absolutely certain that I'm never going to upgrade those files. But even then, I would almost rather just override whatever settings are there. So that's what we're doing here, we're overriding the navbar setting by setting the border-radius back to 0. So let's save main.CSS, and then in our HTML file, we need to point to that file. So let's just create another style sheet link here, and we'll give it an href of css/main.css. And that should take care of that for us. So now if we were to save our HTML file, we can see if that is, if that override is working. We'll jump into our browser and refresh the page. And now we can see those corners are no longer around it. So that sort of gets us where we're going. So let's go back to our HTML up here and continue with our header. So right now, our navbar is just a black background. And inside that navbar, I want the content inside it to be, to have a maximum width, basically. So we're gonna put the rest of our content for our navbar inside a container div. So we'll create a div here with a class of container, which is again, a Bootstrap class that limits the width for large browser sizes. And then inside that container, we're gonna create some rows and columns. So we're gonna create a div here with a class of row, and then inside that row, we're gonna create a div with a column class in it. Now this column is gonna take up the full width of that container, so it's going to have a width of 12. It's gonna take up all 12 columns of that 12 column grid system. And we want it to do that for all browser sizes, so I'm gonna give it a class of col-xs, oops, you have to get that right, xs- and then 12. So the xs tells us that from every size, all the way from extra small, all the way on up, it's going to take up the full width. So, you would use xs if you want this value to occur for all browser sizes, which is what we want here. So, we're going to create that div, and inside that div, we'll create some navigation. And this is really just to add some content to the page, we're really not gonna do much with this navigation. So we'll just create it, add a few links here, and it's not gonna be anything fancy, and I just realized I created a list item without a list. So before that list item, we're gonna create an unordered list. That's what I get for talking and typing at the same time. And we're gonna give this a class of nav, again, these are Bootstrap classes that we're using here. The Bootstrap CSS files define what this nav class is gonna look like. And then we're gonna use another class of navbar-nav. So we've got two classes applied to that UL. And then we'll grab this list item that we created here, cut it, and put it inside our list. And let's go ahead and create maybe three or more copies of that list item and we'll just give them different names. So we have Home, About, Blog, and maybe Contact. So we've got four links there, and we're pretty much finished with that part of our header. So let's save our file, jump over to our browser, and refresh. And now we can see that it has nicely laid those out for us. And because of the classes we used, Bootstrap has laid it out in a way that looks really nice. It's not just an unordered list with bullet points on it, it's actually styled. You can see the list items are all in line. They're next to each other, instead of stacked on top of each other. As you hover over the links, you'll see that they change colors. All of these are a result of the default Bootstrap settings. And, of course, you can override those, if you want, and at any time, you can go to, and get more information. So if you go to your CSS, you can scroll down and see all the different default styles that are applied to different aspects of your page. You can also come over here to Components and see a little bit more. So here's where you have your navbars, so we can click on Navbar, and it'll scroll down to that section. And we can scroll down and read more information about it. And this is, by default, what a navbar looks like. If you just give it a class of navbar, and then another class of navbar default, it gives us this nice light gray background with darker text on it. If you give it a class of navbar inverse, like we did, and we did that right here, then it will kind of flip those colors. It'll give you a black background with light gray text, and that's what we see on our page here. So if we go back to, you can see all kinds of things here. So we have this Brand, here. You'll see that this is different than the rest of the links, and if you scroll down, you can look through the HTML and see the different classes that were used. For example, you can see this anchor tag with a class of navbar-brand, and that's where the word Brand is. So, if you give it a class of navbar-brand, it will style it like we see it up here. You'll notice there's also dropdown links. And again, you can scroll through and look at all the CSS for that. So there's all kinds of possibilities here. If you want to learn more about the HTML that we're entering into our page, then I would definitely encourage you to get familiar with the Bootstrap framework. It's really, really great, if you're in a hurry to build a website for somebody, cuz you don't have to rebuild all those columns and default styles by yourself. So, let's go back to our code. And we have our navigation in place. And let's put a little bit more content inside of our header before we finish up this particular video. So I'm gonna create another div here, and this div, you'll notice, is going below the navbar, so it's not gonna be in the black area. It's gonna be just below it on the white background. And I'm gonna give this div a class of container. So just below our navbar, we have a container. So we're gonna have some content here with a maximum width. Just like the div with the class of container that we have inside the navbar. So inside that container, you will almost always create a row immediately following that. So, div class = row. And then, this content is also gonna take up the full width. So we're just gonna put a single column here with a class of col-xs-12, because we want it to take up the full width. And here, I'll put an h1 tag, and we'll call this Scrolling with Parallax.js. And then after that, I'm gonna use another Bootstrap class called well. So I'm gonna create a div here with a class of well. And we'll see what that looks like in a moment, inside that well, I'm just gonna put a paragraph with some Lorem Ipsum text. Now I've got a plugin for brackets that allows me to just type lorem, and hit Tab, and then it throws in a bunch of Lorem Ipsum text for us. I'm gonna go in and just create some line breaks, only to make it a little easier for us to read. Those line breaks, excuse me, won't show up on the page, obviously, but that makes it a little easier to read. So we have a div with a class of well, and then a paragraph inside that. Let's see what that looks like. We'll save our page, jump back into our browser, and refresh. And there we go. So we can see some of these really nice, simple, default styles that Bootstrap offers. So we have our h1 here. And then the div with the class of well is what gives us this nice little gray container with a darker gray border. So as we move forward to the next lesson, we'll continue to add more content to our page. Thank you for watching, and I'll see you then.

Back to the top