Lab 6 - CSS Frameworks

Goals of the exercise

  • Understand what a CSS framework is and what it is used for.
  • Explore the components included in the chosen framework (Bootstrap).
  • Gain insight into JavaScript functionality without having to write the code yourself.
  • Implement a plug and play library, such as baguetteBox.
  • Use documentation effectively to work with a library or framework.
  • Understand what Functional CSS and OOCSS are, how they work, and how they differ.
  • Build a correct, semantic, and validated HTML page based on a screenshot.
icon new tab Go to the solution
preview picture lab6

Description

In this lab, you build a small responsive website using Bootstrap, after first styling a product card with Functional CSS and OOCSS. You then recreate a given design with a collapsible navbar, hero section, responsive cards, a baguetteBox gallery, a Bootstrap carousel, and a simple footer, using clean and semantic HTML.

Related links

Reflection

  • Waauw!

    Copy the given HTML code on the Bootstrap website.

  • Aauuw!

    creating the HTML of the asked page.

  • Not sure?

    Knowing which classes to give the HTML elements.