Lab exercise 3: CSS 2

Solution

Find the solution to this exercise here:

Solution

Related links

W3C Validator: validation tool:

W3C-validator

aXe DevTools: accessibility validation tool:

aXe DevTools

MDN Web Docs: HTML source:

MDN Web Docs

Google: we all use it:

Google

Goals of the exercise

The goals of the exercise are the following:

  • Correct usage and hosting of downloaded fonts.
  • Correct use of flexbox to position elements.
  • Understanding the difference between hidden, display: none, visibility: hidden and visually-hidden.
  • Hiding elements in a purely visible way.
  • Correct application of CSS transitions.
  • Correct usage of CSS nesting to add more structure to CSS code.
  • Correct application of CSS logical properties.
  • Correct creation, usage and overwriting of CSS custom properties (variables).
  • Correct application of overlay links and recognising their purpose and use.

Reflection

Easy

Copying the required figure was fairly easy. Selfhosting a font is fairly straightforward and I have applied this to my portfolio aswell. I feel that I have an okay understanding of basic HTML.

Hard

Flexbox has proven to be challenging because of the way that you already need to have a basic idea of your lay-out/design, before applying it. It doesn't take a lot of div elements to make it a confusing collection of elements that do not respond the way you would assume/hope they would.

Unsure

Unsure of flexbox application. Adding the color filters over the overlay effect was something I could partially recreate, but likely the wrong way. I consider my version the temu version compared to what was shown in the clip.