Lab exercise 4: Responsive webdesign

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:

  • Creating a responsive webpage.
  • Correct application of media queries.
  • Correct application of responsive images.
  • Scaling elements depending on screen width.
  • Correct layout and styling of text.
  • Correct layout and styling of a button while avoiding contrast issues.

Reflection

Easy

Recreating the small nav bar at the top of the page is now routine.

Hard

Exercise 1: Getting everything to align properly while not having written the code myself confused me a bit. I had the same issue with the cards, but I think I figured it out properly in the end. Can't seem to get the little X to align properly with the text either. Might have something to do with the icon?

Unsure

I am not sure if my application of margins in the third exercise is correct. The X icon added in exercise 4 seems to be not entirely aligned with the link, but I can't seem to get it to align properly.