Lab 3 - CSS 2

Goals of the exercise

  • Download, convert, and self-host a font
  • Position elements using CSS
  • Apply the basic principles of Flexbox
  • Understand the difference between hidden, display: none, visibility: hidden, and .visually-hidden
  • Visually hide elements while keeping them accessible for assistive technologies
  • Apply CSS transitions
  • Use CSS nesting to create structured and readable stylesheets
  • Work with CSS logical properties
  • Create, use, and override CSS Custom Properties (variables)
  • Create an overlay link and explain its purpose
icon new tab Go to the solution
preview picture lab3

Description

This exercise walks you through building a small but annoyingly educational web page using modern CSS. You set up a clean project, self-host a custom font, and apply a proper CSS foundation with variables, logical properties, and normalize styles. From there, you practice layout techniques like Flexbox for navigation, columns, and responsive cards, while learning how visibility, accessibility, and overlay links actually work instead of just pretending they do. The goal is to produce structured, readable, and accessible CSS that behaves well across screen sizes, and to prove you can style things on purpose rather than by accident.

Related links

Reflection

  • Waaw!

    The use of Flexbox went very well. Creating responsive layouts with rows, columns, navigation menus, and cards felt clear and efficient. CSS custom properties also worked smoothly, making it easy to manage colors and maintain consistency across the stylesheet.

  • Aauuw!

    Hosting and implementing a custom font was successful after converting it to the correct format. Using logical properties instead of physical ones required some adjustment, but once understood, they improved the overall flexibility and readability of the CSS code.

  • Not sure?

    The card layout and overlay links took more time than expected and required additional time to trail and error.