Lab 06 - CSS Frameworks

Goals of the exercise

• Understanding CSS frameworks, and learn how to use Javascript without having to write it yourself.
• Learn how to use documentation, and implement a plug-and-play library like baguetteBox.js using its documentation.
• Understand the difference between functional (utility-first) and object-oriented CSS.

Description

For this lab we receive 3 reference pictures, which are screenshots of a fully finished website in a mobile, tablet and desktop viewport. The goal is to replicate this website as close as possible using only the Bootstrap CSS framework.

Related links

Some of the websites I've consulted while developing:

• W3 Validator
• Axe Browser Extension
• Mozilla Documentation
• Bootstrap Documentation
• BaguetteBox Github Repository
• Bootstrap Codepen Playground

Reflection

• Woaw!

  I feel the end result was quite polished, and I'm happy about where it ended up. It eventually resulted in a beautiful website looking very much like the original reference pictures.

• Aauuw!

  I had no prior Bootstrap experience, so all of this took me a lot of time. If you're not familiar with the Bootstrap classes, you have no other option than diving head-first into the Bootstrap documentation, and this can get a little dense at times.

• Not sure?

  All in all, it was a good first introduction to Bootstrap. No regrets!