Lab 2 - CSS

Goals of the exercise

  • Use essential and advanced CSS selectors
  • Apply colors, fonts, and box-model rules
  • Work with normalize.css and link styles correctly
  • Build a clean HTML structure with semantic tags
  • Create reusable, modifier, and utility CSS classes
  • Make layouts responsive with containers, viewport units, and inheritance
  • Debug CSS using browser tools
  • Add basic interactivity (hover, focus-visible)
icon new tab Go to the solution
preview picture lab2

Description

The exercise teaches you to build a small webpage using proper HTML structure and modern CSS techniques. You learn to link stylesheets, use normalize.css, apply fonts and colors, work with the box model, and create reusable classes. You also style navigation, practice advanced selectors, make the layout responsive, and add simple interactivity like hover and focus-visible effects while debugging your CSS with browser tools.

Related links

Reflection

  • Waaw!

    Working with basic and advanced CSS selectors went very smoothly. I could apply class-, id-, and pseudo-selectors correctly, and the box-model settings such as box-sizing: border-box were implemented without issues.

  • Aauuw!

    Linking normalize.css, adding the Google Font, and setting global styles like :root variables, font-family, and OKLCH colors went well. Creating the container class and making the layout responsive also worked as expected.

  • Not sure?

    I struggled a bit with specificity and inheritance, advanced selectors such as nth-child and attribute selectors. Debugging conflicting rules in the devtools took more time than expected.