Beschrijving

Oefening 1: Mozilla Layout

De eerste oefening is gebaseerd op een case van MDN (Mozilla Developer Network). Het doel was om een bestaande "mobile-only" website om te bouwen naar een responsive site. Hierbij is een breakpoint toegevoegd op 40em, waarna de layout verandert naar een desktop-weergave met een maximum breedte van 80rem.

Oefening 2: Responsive Cards & Images

Hier bouwen we verder op de card-componenten uit eerdere lessen. De focus ligt op:

• Responsive Images: Het laden van verschillende afbeeldingsbestanden op basis van de schermgrootte (via picture of srcset) voor betere performance.
• Fluid Layout: De kaarten schalen mee tot er ruimte is voor 3 naast elkaar (minimaal 18rem breed).

Oefening 3: Typografie

Een goede leesbaarheid is essentieel. In deze oefening is een Google Font toegevoegd en is de tekst geoptimaliseerd. Er is gekeken naar een modulaire schaal (headings 1.5x groter), een correcte regellengte (measure) via max-width, en "logical properties" voor de marges om een goed verticaal ritme te creëren.

Doelstellingen

• Een webpagina responsive maken (Mobile First).
• Mediaqueries correct toepassen.
• Responsive images toepassen (art direction vs resolution switching).
• Elementen vloeiend laten meeschalen met de venstergrootte.
• Tekst professioneel opmaken (Vertical Rhythm, Measure).
• Knoppen stijlen met correct kleurgebruik en contrast.

Not available

Reflectie

• Wauw!

  Het concept van 'Mobile First' werken en dan uitbreiden naar grotere schermen voelt heel logisch aan. Responsive images zorgen ervoor dat de site op mobiel veel sneller laadt.

• Au!

  Het berekenen van de juiste marges voor een perfect verticaal ritme (typografie) was lastiger dan verwacht. Ook de syntax voor responsive images is even wennen.

Gerelateerde links

Bronnen gebruikt bij deze opdracht:

• MDN Responsive Skills
• Google Fonts
• Responsively App (Tool)