Lab 6 - CSS-Frameworks

Goals of the exercise

  • Understand what a CSS framework is and how to use Bootstrap classes to structure a web page.
  • Learn how JavaScript can be used through plug-and-play libraries without writing code yourself.
  • Explore the components included in the chosen CSS framework (Bootstrap).
  • Implement an external library such as BaguetteBox to create an image gallery.
  • Apply Functional CSS and OOCSS principles to style elements.
  • Build a responsive and semantically correct HTML page based on provided screenshots.

Go to the solution of the exercise: click here

Description

In this lab, we recreated a responsive website using Bootstrap based on provided screenshots for different screen sizes. The site included a navigation bar, a hero section with text and a button, adoption cards, a BaguetteBox gallery, a Bootstrap carousel, and a footer. Before that, we completed a small exercise where we styled a product card twice, once with Functional CSS and once with OOCSS. Without using any frameworks.

Related links

I used this link to look up documentation about Bootstrap.

Reflection

  • Good

    • The navigation bar and hero section looked similar to the provided screenshots.

    • The Bootstrap grid system worked well to create a responsive layout.

  • Difficult

    • The transition between mobile and desktop views could be smoother.

    • I needed more time to fully understand the difference between Functional CSS and OOCSS in practice.