Task 5#

In Task 5, you will put it all together and make a fully functioning Bootstrap website!

If you’d like to watch the FreeCodeCamp instructor do something similar, go ahead and watch this video (optional):

Just remember that some of the JavaScript (search bar, dropdowns, responsive navbar) will not work yet because we haven’t added the JavaScript to this website, so for our purposes I’ve removed those elements.

Here’s what you need to do for this task:

  • You will be doing everything in this task, in the task5.html file.

  • The entire website should be centred on the page (hint: use Bootstrap grid).

  • Top NavBar stickied.

  • Add links back to the index page in the NavBar.

  • Hero image: choose something that speaks to you, and is important to you.

  • Explain the hero image you picked, and add a button that links to a website of your choice.

  • A fun, inspirational, or motivational quote that you want to highlight or share, as a badge or as a card, spanning the full length of the page.

  • At least three picture cards with a button of your interests, laid out in some organized way (hint: use another Bootstrap Grid), linking to other websites using buttons.

  • Add a way to contact you (Optional).

  • Add a footer to your website with a copyright statement and a Year.

Here’s roughly what we’re expecting for this task (feel free to be creative and choose different colours and layouts):

../../../_images/task5.png

Here is an annotated version of the screenshot above to point out some key features we will be looking for:

../../../_images/task5_annotated.png

Attribution#

This lab (particularly Tasks 4 and 5) relies upon the excellent work by FreeCodeCamp.org and in particular, Dawid Adach founder of MDBootstrap.com.

Specifications#

  • Link to task5.html from your main index.html file.

  • Follow all the specifications laid out above in Task 5.