Building a Resume Website - Navbar

Locked lesson.

Upgrade

About this lesson

Adding a Navbar to our website.

Quick reference

Building a Resume Website - Navbar

Let's add a Navbar to our Resume Website.

When to use

Navbars are great to use for nearly all websites.

Instructions

To create a Navbar, head over to GetBootstrap.com and click the "Components" link, then scroll down to the Navbar section.

Copy the dummy code and paste it into your HTML file.

Modify the dummy code by removing the items that you do not want and updating links.  It should look like this:

<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">John Elder</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      </ul>
     
      <ul class="nav navbar-nav navbar-right">
        <li><a href="personal_statement.html">Personal Statement</a></li>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>  

Hints & tips

  • Adding a Navbar is quick and easy!
  • Find the Navbar code on the Components page of GetBootstrap.com
  • Paste the code into your site, then modify it, removing items, and adding your name.
Login to download
  • 00:05 Okay, first things first let's grab our nav bar, so if we come back to Bootstrap,
  • 00:09 getbootstrap.com click on components, scroll down to nav bar.
  • 00:13 And I think this is what we want.
  • 00:16 There's some different options you can read through.
  • 00:18 I'll use the first one here.
  • 00:20 Copy.
  • 00:20 I click this little copy button that copies it.
  • 00:23 If we head back to our resume.html and
  • 00:26 just right here at the top, I'm just going to paste this in.
  • 00:28 I'll just save this right off the bat.
  • 00:31 Come back here and click reload.
  • 00:32 Then, we see boom, we've got this nice nav bar.
  • 00:34 We've got a little bit of a shadow on there that's kinda cool.
  • 00:37 But we've got all the stuff that we don't really want.
  • 00:40 So let's go ahead and get rid of this.
  • 00:42 First thing, I'm gonna look for is this submit search field.
  • 00:45 Definitely, don't want that.
  • 00:46 So let's look through the code here.
  • 00:48 And you can see the different things that come with this.
  • 00:51 I'm just gonna kinda eyeball it and look for, there we go Search.
  • 00:57 So here's our form field so
  • 00:58 we can just kinda highlight all of these and delete it.
  • 01:02 Now, if I save this and click reload, boom gone.
  • 01:04 So, next, let's get rid of these drop down thing here.
  • 01:07 It should be just right above and yes here it is we see an LI for a drop down.
  • 01:11 And if I highlight this LI right here,
  • 01:14 you can see the closing tag sort of highlights itself.
  • 01:16 So we know that's what we want to delete.
  • 01:19 So we save this, come back and hit reload.
  • 01:21 Boom. Okay. That's gone.
  • 01:22 I don't want these two links.
  • 01:23 Let's go ahead and get rid of them.
  • 01:26 These guys it looks like.
  • 01:31 Okay, so if we save this, come back, boom.
  • 01:33 Looking good, so this brand, what is that?
  • 01:36 Well, let's change those two our name.
  • 01:38 Go ahead and type in your name, and for this link, we want it to go to resume.
  • 01:44 Let's just leave it like this.
  • 01:48 So now if we click on this, it goes back to our main website.
  • 01:51 Eventually, we're gonna take this resume and turn it into our index page.
  • 01:55 So we'll leave that like that for now.
  • 01:57 Okay, what's next?
  • 01:58 We got these guys.
  • 01:59 Let's get rid of this drop down.
  • 02:00 We scroll down a little bit.
  • 02:02 We see, let's see drop down looks like right there.
  • 02:07 Delete that.
  • 02:08 Save it.
  • 02:10 Okay, so that guy's gone and this length,
  • 02:12 let's change this to we want to add a personal statement.
  • 02:15 And we can see right here is the link.
  • 02:18 I want to change this to personal statement.
  • 02:22 And let's call this Personal_Statement.html.
  • 02:29 We haven't actually built this page yet but that's fine for now.
  • 02:33 If we click on it, it works.
  • 02:35 The file is not found.
  • 02:37 But let's go ahead and copy all of this.
  • 02:39 Click CTRL+C.
  • 02:40 And let's just come up here and right click.
  • 02:44 Let's create this personal_statement.html, and
  • 02:48 if I right click and push that in there if we come up here to the title,
  • 02:54 I might want to change this to personal statement something like that save it.
  • 03:01 After we hit reload and click this link, it goes to our personal statement page.
  • 03:04 So now, the page exists, we haven't actually done anything with it yet, but
  • 03:07 that's good enough for now.
  • 03:09 And so, okay.
  • 03:10 So, pretty easy to make a navbar.
  • 03:13 And I think that looks pretty good as a navbar.
  • 03:14 All we had to do was paste in this code and tweak it a little bit to
  • 03:18 make it exactly how we wanted it with the precise lengths and everything.
  • 03:21 So yeah, that's nav bars.
  • 03:23 In the next video, we'll start to work on panels and
  • 03:25 that's the thing we're gonna use to put the main content of a resume on the page.

Lesson notes are only available for subscribers.

Gift this course