Lab exercise 6: CSS Frameworks

Solution

Find the solution to this exercise here:

Solution

Related links

W3C Validator: validation tool:

W3C-validator

aXe DevTools: accessibility validation tool:

aXe DevTools

MDN Web Docs: HTML source:

MDN Web Docs

Google: we all use it:

Google

Bootstrap: CSS framework used:

Bootstrap

Goals of the exercise

The goals of the exercise are the following:

  • Understanding what CSS Frameworks are.
  • Understanding the components of a CSS Framework.
  • Understanding how JavaScript works without having to write it ourselves.
  • Implementing a plug-and-play library such as baguetteBox.
  • Working with libraries and frameworks while using the provided documentation.
  • Understanding what functional CSS and OCCSS are and how these methods work.
  • A recap on how build a semantically correct website based on a screenshot of the goal website

Reflection

Easy

Inserting a baguetteBox and Carousel was fairly easy considering this is mostly copy-paste of links and-or code. The provided documentation is crystal clear and easy to follow.

Hard

Getting the third card to turn "vertical" when the viewport is tablet sized while preserving the contents took me a while to figure out. My first solutions basically only stretched the image without preserving its aspect ratio, which looked horrible. But I have fixed this, and even added some nicer borders to the picture (as opposed to the lab assignment).

Unsure

I needed some practice working with the rows / columns system and I believe/hope I have applied these well enough. The flexbox habit was strong here.