7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Page Header and Banner

In this first exercise lesson we'll create the header and banner for our presentation page.

5.1 Page Header and Banner

Hey, welcome to the exercise part of the course. Now in this lesson, I'll start building a very simple product page using some of the components that I showed you in the previous lessons, and also some new ones. So, the very first thing I wanna do is have my navbar. So I'm gonna say navbar, and I'll start with nav, class navbar, and I want it to be black, so I'll choose navbar-inverse, and I also want it to be fixed on the top. So I'm gonna say, navbar-fixed-tap and give an, an idea of main navbar. Okay? Here I'm gonna say, role navigation for accessibility. And then inside I want all of my lemons to be placed inside a container to be centered properly. And then I'm gonna have my navbar-header. This is very similar to, to what I taught you in the previous lessons. I'm gonna have my toggle button, which will display the responsive navigation. So, button, type is gonna be button. I'm gonna give it a class of navbar-toggle. And since it's a collapse, I'm gonna add data-toggle, sorry, equals collapse and then data-target will be my navbar-collapse with a hash sign in front. Okay, now inside button I'm gonna place the span with a class of sr-only navigation, or you can say toggle navigation, and then span a class of icon bar times 3. All right. So that's your button. Next I'm gonna have an A with a class of navbar-brand, which will link to my index HTML which is this page. And in here I'm gonna say product name. All right, let's check it out. Good. Next, I'm gonna have my content. Bit of a typo there. So navbar header and then div with a class of collapse, navbar-collapse and ID of navbar collapse, which is the ID that I used here. [BLANK_AUDIO] Okay. Inside, I'm only gonna have some links which will take me to different sections within the page. Because this is a one page which shows multiple sections. I'm gonna have an ul with a class of nav. And then navbar-nav, which contains list items with an anchor tag. And let's do about four list four list items. And let's see. We have first of all, I need some testimonials for the product. This is a pretty good place to start. So section-testimonials. Next, I need some features. So I'm gonna say section-features. Next I need a gallery. Maybe show some screenshots. So, I'm gonna say section-gallery, and then I'm gonna need some frequently asked questions about the product. So, I'm gonna say section-faq. And then let's add another one, a last one actually a section for contact, where we're gonna have a contact form. All right let's check it out. Testimonials, Features, Gallery, FAQ, and Contact, great. Now I also want to include a scroll spy, which means whenever I scroll to a specific category, the corresponding link will become active, but I'll do that at the very end. Right now, I still need to add some sort of banner, because I can't just go directly to testimonials. Every learning page, every product page needs to have like a starting banner which catches the user's attention, and this is usually called action. It contains some information and also some buttons which take you to a purchase page or a download page of sorts. So after the nav, I'm gonna use a component called jumbotron. This is the former hero unit from Bootstrap. So I'm gonna say JUMBOTRON or actually let's call this BANNER. I'm going to use a div on a class of jumbotron, and inside I wanna center my content. So, I'm gonna say container and then text center. Inside I'm gonna do an h1 plus a paragraph. Each one is gonna say something like great product title. The paragraph is basically a description paragraph. Now below those, I'm gonna have two buttons. One saying buy now and the other saying try it free. Now, I can do the buttons normally like two links. But, I can also place them in something called btn-group, or button group. And I'm just gonna show you what it does in just a bit. So end btn-group. Let's see it. Okay. And now for the btn-group, I'm gonna do anchor tag with a class of btn and btn-lg because I want big buttons. And also btn let's say success. Let's do times 2. And the first one is gonna say, Buy Now, which is a green button and the second one is gonna say, Try it Free. And I'm gonna do like a default button here. All right. Save. And this is how it looks like. Notice by adding these buttons in a button group, they merge on the sides here. So if I were to disable the button group, they will be separate. Coming back. They're now linked like this. All right, now since I did this green button here, I think I'll also add a green button in the main navigation. So I'm gonna go back here and I'm gonna add an a with a class of btn. And then btn-success to get that green color, and then navbar-btn to center the button inside the navbar. And also navbar-right, to move the button to the right. Okay, href, I'm gonna say Buy Now, refresh. And there it is. All right, now, here's the thing. When you add a fixed navbar, you've got to set some top padding to the content below. Because right now this banner is kind of hidden behind my navigation. So what I'm gonna do is actually create an inline style here, and that's gonna say body. I'm gonna add a padding-top of 50 pixels, which is about the size, the height of my navbar. So refresh, and now I have a proper banner. Now, you also need some spacing between these two. And you can alter it in CSS. You can target this paragraph here if you want. And you'll probably do that because you create this website, this page, in bootstrap, but you gotta apply some styling afterwards. I mean, this is just the framework after all. It's a place for you to start. After you're done writing the markup for the page, you can then proceed to styling it. But yeah that's basically it for this lesson. Next time I'll move on to the testimonials section.

Back to the top