Meester van CSS Grid: Een diepgaande verkenning

Meester van CSS Grid: Een diepgaande verkenning
1 / 14
volgende
Slide 1: Tekstslide

In deze les zitten 14 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

Meester van CSS Grid: Een diepgaande verkenning

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Lesdoelen
Aan het einde van de les kun je uitleggen wat CSS Grid is en de belangrijkste eigenschappen van gridcontainers en -items benoemen.

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over CSS Grid en hoe verschilt het van flexbox?

Slide 3 - Woordweb

Deze slide heeft geen instructies

Activeren van voorkennis
Wat zijn de belangrijkste verschillen tussen CSS Grid en flexbox?

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Wat is grid
CSS Grid is een lay-outmodule waarmee je complexe ontwerpen kunt maken door elementen te plaatsen in een tweedimensionaal grid.

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Containers en items
In CSS Grid zijn er specifieke elementen die als containers dienen en de elementen die daarin geplaatst worden zijn de items.

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Container properties
Gridcontainer eigenschappen, zoals 'display: grid', 'grid-template-rows', 'grid-template-columns' en 'grid-gap', bepalen de structuur van het grid.

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Item properties
Item eigenschappen, zoals 'grid-column', 'grid-row' en 'align-self', bepalen de positie en het gedrag van individuele griditems.

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Klassikale oefening
Maak een gridlay-out voor een webpagina met behulp van CSS Grid.

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Individuele oefening
Pas een bestaande webpagina lay-out aan met behulp van CSS Grid in plaats van flexbox.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Lesdoelen toetsen
Wat zijn de belangrijkste verschillen tussen CSS Grid en flexbox? Geef een voorbeeld van een grid-container eigenschap.

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Schrijf 3 dingen op die je deze les hebt geleerd.

Slide 12 - Open vraag

De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.
Schrijf 2 dingen op waarover je meer wilt weten.

Slide 13 - Open vraag

De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.
Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 14 - Open vraag

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.