Lab 2 - Advanced HTML

Goals of the exercise

  • Selectors: tags, classes, IDs, pseudo & advanced (combinators).
  • Styling: colors, fonts (with fallback), reusable classes.
  • Layout: box model + box-sizing.
  • Best practices: normalize.css, stylesheet linking, optimized selectors.

Go to the solution of the exercise: click here

Description

You practice the basics of CSS: selectors, colors, fonts, the box model, and normalize.css. Focus on creating reusable classes with efficient selectors, using the box model and box-sizing correctly and also understanding specificity.

Related links

I used this link to refer to a version of normalize.css

I used this link to load the Montserrat font from Google Fonts with weights 400 and 700.

I also used this link to validate my code.

Reflection

  • Good
    • The things that went well were the use of selectors (tag, class, id,) and reusable classes. Also applying colors went good.
  • Difficult
    • The things that where difficult for me where using pseudo classes and also using really specific selectors. Using external fonts with fallback was also difficult.