H1. CSS Lay-out: Grid en Flexbox (edited)

H1. CSS Lay-out: Grid en Flexbox
WDV-IV
Week 14
1 / 24
suivant
Slide 1: Diapositive
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Cette leçon contient 24 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

H1. CSS Lay-out: Grid en Flexbox
WDV-IV
Week 14

Slide 1 - Diapositive

Terug naar de Front-end
  • HTML en CSS
  • CSS: Grid
  • CSS: Flexbox

Slide 2 - Diapositive

Waarom CSS Grid?
Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 3 - Diapositive

Waarom CSS Grid?
Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 4 - Diapositive

Waarom CSS Grid?
Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

Slide 5 - Diapositive

Hoe gebruik je CSS Grid
1. Verdeel je website in
een raster (een grid)

2. Geef aan in welk
'hokje' elk item moet
komen te staan.

Slide 6 - Diapositive

Hoe gebruik je CSS Grid
3. Items kunnen 
meerdere 'hokjes'
hebben.

4. Hokjes kunnen
verschillende grootes
hebben

Slide 7 - Diapositive

CSS: Grid
Grid = raster

Slide 8 - Diapositive

CSS: Grid

Slide 9 - Diapositive

CSS: Grid
Alle children worden op de Grid uitgelijnd

Slide 10 - Diapositive

CSS: Grid
Twee kolommen van 50%

Slide 11 - Diapositive

CSS: Grid
50px ruimte tussen de grid items

Slide 12 - Diapositive

CSS: Grid
Deze grid item overspant twee regels

Slide 13 - Diapositive

Grid oefenen met een spelletje
https://cssgridgarden.com/

Slide 14 - Diapositive

Slide 15 - Diapositive

1: uitleg
2: code schrijven
3: resultaat

Slide 16 - Diapositive

3e verticale grens
1
2
3

Slide 17 - Diapositive

Succes met Grid Garden!
✋Na goed lezen en veel proberen een vraag? Steek je hand op!
✅ Klaar? Geef aan dat je klaar bent. Je mag even wat voor jezelf doen.

Slide 18 - Diapositive

Met welke CSS code geef je aan
dat een HTML element een
CSS grid is?
A
B
C
D

Slide 19 - Quiz

Op welke manier maak je daadwerkelijk een
CSS grid?
A
B
C
D

Slide 20 - Quiz

Wat doet de volgende CSS Grid code?

A
Plaats alle items van rechts naar links, of beneden naar boven op de grid.
B
Zorg ervoor dat de items niet buiten de CSS grid geplaatst kunnen worden.
C
Geef aan dat het eind van de grid bereikt is.
D
Plaats alle items aan de rechterkant van hun cell (a.k.a. hun 'hokje')

Slide 21 - Quiz

CSS: Flexbox

Slide 22 - Diapositive

Waarom Flexbox?
Soms wil je items
alleen horizontaal of
verticaal positioneren.

Een volledig grid
maken is dan meer
werk dan nodig.

Slide 23 - Diapositive

Flexbox oefenen met een spelletje
https://flexboxfroggy.com

Slide 24 - Diapositive