Lab 04 - Responsive Webdesign

Goals of the exercise

• Learn how to make a webpage responsive, e.g. using media queries and responsive images.
• Learn to apply the proper typographic rules to text.
• Learn to correctly style buttons in color, with the right contrast.

Description

This lab consists of 4 exercises:

1. Creating a fully responsive website from a provided mobile-only website.
2. Adapting the navigation cards from the previous lab to use responsive images.
3. Adapting a provided website to use a different font and applying typographic rules to it.
4. Styling links and buttons.

Related links

Some of the websites I've consulted while developing:

• W3 Validator
• Axe Browser Extension
• Mozilla Documentation
• Google Fonts
• W3Schools Flexbox Tutorial

Reflection

• Woaw!

  I really liked working on the navigation cards again, and further updating them with responsive images.

• Aauuw!

  Again, this lab contained many different tasks and things to keep in mind, and was a lot of work to complete. Especially converting the mobile website to a responsive one was a lot of work, and took me a lot of time and effort.

• Not sure?

  I'm not convinced on the usefulness of certain logical properties, like using "padding-block-start" over "padding-top". It's definitely not an improvement in readability or conciseness, and feels more like a regression to me.