Samenvatting Labo 04 - Responsive Webdesign

Doelstellingen

  • Een webpagina responsive maken voor verschillende schermgroottes.
  • Media queries correct toepassen.
  • Responsive images gebruiken
  • Elementen laten meeschalen met de venstergrootte.
  • Tekst correct en leesbaar maken.
  • Een knop correct stylen met voldoende kleurcontrast.

Beschrijving van de oefening

In dit labo lag de focus op het bouwen van een responsive website die bruikbaar en leesbaar blijft op verschillende schermgroottes. Door het gebruik van media queries, flexibele layouts en responsive images werd de layout aangepast aan zowel kleine als grote schermen. Daarnaast heb ik aandacht besteed aan typografie en het correct stylen van knoppen met een voldoende contrast voor toegankelijkheid.

Wat was belangrijk?

  • Mobile-first denken bij het opbouwen van de layout.
  • Correct gebruik van media queries om layout en tekst aan te passen.
  • Afbeeldingen laten meeschalen zonder kwaliteitsverlies.
  • Gebruik van relatieve eenheden zoals rem en %.
  • Voldoende contrast tussen tekst en achtergrond.
  • Knoppen duidelijk herkenbaar en bruikbaar maken.

Wat had ik nodig?

  • HTML-bestanden (index.html)
  • HTML semantische elementen
  • CSS flexbox
  • Responsive images
  • CSS transitions
  • CSS logical properties
  • Browser DevTools
  • aXe DevTools

Gerelateerde Links

Reflectie

Beschrijf wat je goed gedaan hebt:

  • Media queries correct toegepast.

    Layout werkte goed op verschillende schermgroottes.

    Afbeeldingen schaalden correct mee.

Beschrijf wat moeilijk was:

  • De juiste breekpunten bepalen.

    Tekst leesbaar houden op zeer kleine schermen.