Lab 03 - CSS Layout and Positioning

Goals of the exercise

• Learn to correctly implement custom fonts; downloading, converting and self-hosting.
• Learn about layout and positioning of elements using the CSS "position" and "display: flex" properties.
• Learn the correct usage of CSS nesting, transitions, logical properties, custom properties, etc.

Description

This lab starts by recapitulating the subjects of the previous labs; we need to set up a basic website from a reference picture, after which the actual CSS exercise can start!

The CSS part is divided into 3 exercises:

1. Creating 2 vertical columns in a page using flexbox.
2. Creating a navigation pane with a visually hidden title.
3. Creating polished navigation cards with a title, description and random image that automatically updates on every page load.

Related links

Some of the websites I've consulted while developing:

• W3 Validator
• Axe Browser Extension
• Mozilla Documentation
• Google Fonts
• Picsum Random Image API
• Stack Overflow

Reflection

• Woaw!

  The first 2 exercises were pretty straightforward, and were relatively simple to complete, but the third exercise (cards) was a lot of work, especially if you want a nice and polished result. However, I am very pleased with the final outcome, so it was worth the time investment!

• Aauuw!

  This lab was a lot of work to complete. Especially considering the "intro", for setting up the starting point, was pretty much a small lab in itself! But the third exercise of creating the navigation cards definitely takes the cake in terms of difficulty and time investment.

• Not sure?

  The material from the lab itself is clear, however I'm not entirely sure if the "Related links" section in this page should only contain top-level domains, or more specific links (for which there might be a lot more).