In deze les zitten 17 slides, met interactieve quiz en tekstslides.
Lesduur is: 60 min
Onderdelen in deze les
CSS Grid
Slide 1 - Tekstslide
Leerdoelen
Je past CSS Grid toe om een gestructureerde lay-out te creëren.
Je past de CSS Grid-eigenschappen correct toe om elementen binnen een grid te positioneren.
Je gebruikt grid-rijen en -kolommen om de opmaak van een tijdschriftartikel effectief te beheren.
Slide 2 - Tekstslide
Wat is een grid eigenlijk?
Slide 3 - Woordweb
Slide 4 - Tekstslide
Slide 5 - Tekstslide
Een grid is een soort raster dat je kunt gebruiken om dingen netjes te organiseren. Bijvoorbeeld op een pagina. Je kunt het zien als een onzichtbaar bord met vakjes.
Binnen die vakjes kun je verschillende elementen plaatsen.
Slide 6 - Tekstslide
De kast is je grid container.
De vakken in de kast zijn de rijen en kolommen.
De spullen die je in de vakken zet zijn de grid items.
Slide 7 - Tekstslide
De kast is je grid container.
De vakken in de kast zijn de rijen en kolommen.
De spullen die je in de vakken zet zijn de grid items.
Slide 8 - Tekstslide
De kast is je grid container.
De vakken in de kast zijn de rijen en kolommen.
De spullen die je in de vakken zet zijn de grid items.
Slide 9 - Tekstslide
De kast is je grid container.
De vakken in de kast zijn de rijen en kolommen.
De spullen die je in de vakken zet zijn de grid items.
Slide 10 - Tekstslide
De verticale lijnen zijn de kolommen.
columns binnen CSS
Slide 11 - Tekstslide
De horizontale lijnen zijn de rijen.
rows binnen CSS
Slide 12 - Tekstslide
De ruimte tussen de columns en de rows noemen we gaps.
Waar kennen we gap nog meer van bij CSS?
Slide 13 - Tekstslide
De lijnen tussen de verschillende columns noem je column lines.
De lijnen tussen de rows noem je row lines.
Bij het plaatsen van items verwijs je naar de lines en dus niet het vakje
Lesduur is: 60 min
