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

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

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

Onderdelen in deze les

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

Slide 1 - Tekstslide

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

Slide 2 - Tekstslide

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

Maar dat blijft niet zo...

Slide 3 - Tekstslide

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

Maar dat blijft niet zo...

Slide 4 - Tekstslide

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

Maar dat blijft niet zo...

Slide 5 - Tekstslide

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 - Tekstslide

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

4. Hokjes kunnen
verschillende grootes
hebben

Slide 7 - Tekstslide

CSS: Grid
Grid = raster

Slide 8 - Tekstslide

CSS: Grid

Slide 9 - Tekstslide

CSS: Grid
Alle children worden op de Grid uitgelijnd

Slide 10 - Tekstslide

CSS: Grid
Twee kolommen van 50%

Slide 11 - Tekstslide

CSS: Grid
50px ruimte tussen de grid items

Slide 12 - Tekstslide

CSS: Grid
Deze grid item overspant twee regels

Slide 13 - Tekstslide

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

Slide 14 - Tekstslide

Slide 15 - Tekstslide

1: uitleg
2: code schrijven
3: resultaat

Slide 16 - Tekstslide

3e verticale grens
1
2
3

Slide 17 - Tekstslide

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 - Tekstslide

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

Slide 19 - Quizvraag

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

Slide 20 - Quizvraag

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 - Quizvraag

CSS: Flexbox

Slide 22 - Tekstslide

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

Een volledig grid
maken is dan meer
werk dan nodig.

Slide 23 - Tekstslide

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

Slide 24 - Tekstslide