Lab 3 - Typography with CSS

Goals of the exercise

• Fonts: download & self-host
• Positioning & flexbox
• Hidden vs display/visibility
• Nesting & logical properties
• CSS variables
• Overlay links

Go to the solution of the exercise: click here

Description

Set up an HTML/CSS project with a self-hosted font, flexbox layouts, and responsive navigation. Apply CSS nesting, transitions, custom properties, and accessible hiding. Create cards with overlay links, follow cascade rules, and ensure mobile responsiveness.

Related links

I used this link to search how to make cards in css.

I used a second link, this to read more about making cards in css.

Reflection

• Good
  • I worked well with flexbox and CSS transitions, creating a clean and responsive layout. Using CSS variables and a self-hosted font also went smoothly.
• Difficult
  • I struggled with the difference between display: none, visibility: hidden, and .visually-hidden. CSS logical properties and overlay links were also challenging at first.