Oefeningen

Oefening 1: Maak je Website Volledig Responsief

Wat te doen?

• Pas media queries toe om je website aan te passen voor verschillende schermgroottes.
• Controleer je website op verschillende apparaten of gebruik de ontwikkelaarstools van je browser om te simuleren.

Tips

• Begin met een mobile-first benadering.
• Gebruik flexibele eenheden zoals percentages of fr in Grid.
• Test op breekpunten zoals 480px (mobiel), 768px (tablet), en 1024px (desktop).

Uitdaging 1: Gebruik van Grid Areas

Wat te doen?

• Maak gebruik van grid-template-areas om je layout te definiëren.

Uitdaging 2: Voeg Een Responsieve Afbeeldingsgalerij Toe

Wat te doen?

• Maak een sectie met afbeeldingen die zich aanpassen aan de schermgrootte.
• Gebruik CSS Grid om de afbeeldingen in een raster te plaatsen dat verandert op basis van het scherm.

Tips

• Gebruik grid-template-columns met de repeat() en auto-fill of auto-fit functies.