Labo 04 – Responsive webdesign

Doelen van de oefening

Een webpagina responsive maken.
Mediaqueries toepassen.
Responsive images gebruiken.
Elementen laten meeschalen met de venstergrootte.
Tekst correct opmaken.
Knoppen correct stijlen met kleur en contrast.

Beschrijving

In dit labo hebben we geleerd hoe je een website responsive maakt. We pasten mediaqueries toe om layouts aan te passen vanaf 40em, en zorgden dat de website bij 80rem stopt met schalen.

Ook oefenden we met responsive cards: afbeeldingen die veranderen bij grotere schermen, cards die mee schalen met de venstergrootte en maximaal 3 naast elkaar tonen.

Ten slotte werkten we aan typografie: een leesbaar Google-font toevoegen, juiste font-size en line-height instellen, en marges en contrast correct toepassen.

Geraadpleegde links

Reflectie

Wauw!

Ik heb geleerd hoe ik een website kan laten meeschalen en hoe mediaqueries en responsive images correct werken. Het resultaat ziet er nu goed uit op verschillende schermgroottes.

Aauw!

Het correct instellen van max-width voor cards en de marges tussen headings en paragrafen was soms lastig.

Niet zeker?

Ik twijfel nog hoe ik de typografie optimaal combineer met responsive layouts en hoe ik verschillende font-stijlen het beste inzet.