⏱️ Leestijd: ca. 3 min.

Opdracht: Flexbox Froggy

CSS Flexbox is een van de krachtigste methoden om elementen op een webpagina netjes uit te lijnen. Of je nu knoppen in het midden van een navigatiebalk wilt zetten of een hele pagina in kolommen wilt verdelen: Flexbox is je beste vriend.

Om de werking van Flexbox op een leuke en interactieve manier onder de knie te krijgen, ga je in deze les aan de slag met de game Flexbox Froggy. Help de kikker(s) naar het juiste lelieblad door de juiste CSS Flexbox-eigenschappen te typen!

1. Wat ga je doen?

Je doorloopt alle 24 levels van de game op de website Flexbox Froggy.

Bij elk level krijg je een situatie voorgeschoteld waarin de kikkers niet op hun lelieblad zitten. Door het schrijven van de juiste CSS-code stuur je de kikkers naar de juiste plek.

Tip: Neem je tijd om te begrijpen waarom een bepaalde regel werkt. Lees de uitleg die bij elk level aan de linkerkant staat goed door!

2. Punten & Beoordeling

Belangrijk: Ben je klaar met level 24? Sluit je browservenster of tabblad NIET af! Steek je hand op en spreek de leerkracht aan om je resultaat te laten controleren en registreren.

3. Spiektabel: Belangrijke Flexbox Eigenschappen

Tijdens het spel zul je onder andere de volgende eigenschappen gebruiken. Gebruik deze tabel als geheugensteuntje:

/* Uitlijning over de hoofd-as (horizontaal bij row) */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

/* Uitlijning over de dwars-as (verticaal bij row) */
align-items: flex-start | flex-end | center | baseline | stretch;

/* Richting van de flex-items */
flex-direction: row | row-reverse | column | column-reverse;

/* Volgorde van een specifiek item aanpassen */
order: 0; /* (kan positief of negatief zijn, bijv. 1 of -1) */

/* Uitlijning van één specifiek item overschrijven */
align-self: flex-start | flex-end | center | baseline | stretch;

/* Items laten omklappen naar een nieuwe regel */
flex-wrap: nowrap | wrap | wrap-reverse;

4. Stappenplan

  1. Open je browser en surf naar https://flexboxfroggy.com/.
  2. Controleer rechtsonder of de taal op Nederlands staat ingesteld (dit gebeurt meestal automatisch).
  3. Begin bij Level 1 en typ de vereiste CSS-code in het codevak.
  4. Zodra de kikker op het juiste lelieblad zit, klik je op Volgende om naar het volgende level te gaan.
  5. Werk zo zelfstandig mogelijk door tot en met Level 24.
  6. Zodra je Level 24 hebt behaald: laat je scherm open staan en spreekt de leerkracht aan om je score op 24 af te tekenen.

5. Verwachte Output

Een volledig uitgespeelde Flexbox Froggy game (Level 24 voltooid) waarbij alle kikkers correct op hun leliebladeren zijn geplaatst door middel van geldige CSS Flexbox-code.

6. Evaluatiecriteria