Lab exercise 2: CSS

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

Goals of the exercise

The goals of the exercise are the following:

  • Correct application of tag-, class-, id- and pseudo-selectors.
  • Correct application of text - and background colors.
  • Correct creation of re-useable classes.
  • Using and understanding normalize.css.
  • Using and understanding box-model. Applying box sizing property.
  • Correct adding of external fonts and designating a fallback font.
  • Correct adding of a stylesheet to HTML and optimising selections for re-usability.
  • Correct analysis of CSS, debugging using web developer tools.
  • Correct usage of advanced selectors such as combinators and pseudo-classes.
  • Correct application of priority/specificity rules.

Reflection

Easy

Copying the required figure was fairly easy. I think I have a good idea of what the easier selectors do and how they act.

Hard

I am having a hard time getting certain things to work. At the time of writing this report, the .highlight selector doesn't seem to work properly when I try to exclude the footer out of the selection. Adding :not(footer) doesn't seem to have any effect. Addendum: solved this issue.

Unsure

I am fairly sure I have misinterpreted some of the assignments and errors have sneaked into the solution of this lab report. I will try to redo it from scratch, step by step, just to see where I went wrong. Addendum: second attempt seems to be much better. Took my time to look at every step of the assignment, and it has been an improvement.