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

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

This lesson contains 24 slides, with interactive quizzes and text slides.

Items in this lesson

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

Slide 1 - Slide

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

Slide 2 - Slide

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

Maar dat blijft niet zo...

Slide 3 - Slide

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

Maar dat blijft niet zo...

Slide 4 - Slide

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

Maar dat blijft niet zo...

Slide 5 - Slide

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

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

4. Hokjes kunnen
verschillende grootes
hebben

Slide 7 - Slide

CSS: Grid
Grid = raster

Slide 8 - Slide

CSS: Grid

Slide 9 - Slide

CSS: Grid
Alle children worden op de Grid uitgelijnd

Slide 10 - Slide

CSS: Grid
Twee kolommen van 50%

Slide 11 - Slide

CSS: Grid
50px ruimte tussen de grid items

Slide 12 - Slide

CSS: Grid
Deze grid item overspant twee regels

Slide 13 - Slide

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

Slide 14 - Slide

Slide 15 - Slide

1: uitleg
2: code schrijven
3: resultaat

Slide 16 - Slide

3e verticale grens
1
2
3

Slide 17 - Slide

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

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

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

Een volledig grid
maken is dan meer
werk dan nodig.

Slide 23 - Slide

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

Slide 24 - Slide