Skip to content

A8 - Bootstrap Navbars and Simple Website

In our final coding assignment, you will a create simple, three page, responsive website using the Bootstrap CSS Framework. You can base the website off of the lyrics that you did for the first assignment, like I've done in my example, or you can choose something completely different.

A good first step would be to run the update, and then look at the example I have done. There are two new concepts here:

  • Bootstrap Navbars, as documented here
  • Links between pages on the same website

There are a few styles you can use. For your website, you can either use the one that is already there in my example, or you can paste another one from the link above. Like everything else in Bootstrap, navbars are responsive, meaning they will adjust based on screen size.

When building a simple website, it is best to keep all files (HTML, CSS, image, etc) in the same folder. To create a link to a file in the same folder, you do this: 

<a href="albums.html">Albums</a>
Here, the page we want to link to is called albums.html, and the link text is Albums.

A link on a navbar should include the nav-link class: 

<a href="albums.html" class="nav-link">Albums</a>

As seen before, a button link should include the btn class, as well as any additional class you may decide to include to customize the button: 

<a href="albums.html" class="btn btn-outline-secondary">Albums</a>

Fake Links

Since this is not real website and more of a learning experience, you may decide to include fake links that lead to nowhere. For these, use # for the href:

<a href="#" class="btn btn-outline-secondary">More Information</a>

This will cause the link to just take you back to the top of the current page.

Your Task

The easiest approach would be to start with my sample website and update it to suit your own idea. Your website should include the top navbar and at least three pages. Otherwise, the assignment is pretty open ended. In term of evaluation:

  • You'll get Approaching Expectations for simply changing the text and some colours
  • You'll get Meets Expectations by adding to what's already there, and/or demonstrating your ability to work with more advanced bootstrap concepts such as:
    • Margin and padding
    • Responsive columns
  • You'll get Exceeds Expecations if you can take things even further than this. For example, getting creative artistically or with your use of some of the Bootstrap features. You could also add your own custom CSS to this by linking in your own stylesheet (I can help you get this started).