Lab 3

Goals of this exercise

• Learn to work with logical properties
• Make websites more accessible
• Make use of visually hidden elements
• Use flexbox
• Create overlay links
• Use transitions
• Create cool hover effects for flexbox cards

Description

In Lab 3 we learned a lot about accessibility, flexbox and advanced properties such as margin-inline-start, hover effects, transitions and hiding items for design purposes. This was done by visual hidden classes, which makes it so screen readers can still access these elements that were hidden, and make sure the HTML has the correct order of elements (h1,h2,h3,...).

Related links

• MDN Docs: margin-inline-start
• MDN Docs: hover
• Normalize.css
• Google Fonts

Reflection

What went well?

• Using flexbox and creating custom cards
• Importing local fonts using woff2 format
• Make use of transitions

What was difficult?

• Using the visually hidden class
• Using the overlay link classes