Lab 03 - CSS 2

Goals of the exercise

  • You can download, convert, and self-host a font.
  • You can position elements.
  • You can apply the basic principles of Flexbox.
  • You understand the difference between hidden, display: none, visibility: hidden, and .visually-hidden.
  • You can visually hide elements in a way that keeps them accessible to assistive technologies.
  • You can apply CSS transitions.
  • You use CSS nesting to create more structured and organized stylesheets.
  • You can work with CSS logical properties.
  • You can create, use, and override CSS Custom Properties (variables).
  • You can create an overlay link and explain its purpose.
Go to the solution
the CSS logo

Description

in this lab exercise, we had to create an HTML page and use CSS to create a style. We then had 3 exercises where we used different CSS properties to make items flex in different ways. This way we learned how to work with flex properties to create different sized columns, an animated navigation bar when you hover over it and cards that show off an image, text and a link to the page behind it.

Related items

/

Reflection

  • Wauw

    Exercise 02 about the Nav was a challenging, but fun exercise. Creating the hover effects for it was a nice exercise and I got to play around with different parameters to create a custom effect.

  • Auwch!

    Like the teacher said, the cards exercise would be the hardest and he wasn't wrong lol. It took some reading the manuals behind different properties and a whole lot of trail and error to get it right.

  • Hmmm?

    The columns exercise was a weird one, where I had to get some help. Although it seems rather obvious in the end, I definitely need to practice this some more to understand it fully.