CSS Grid

H1. CSS Grid

WDV-IV

Week 14

1 / 12

Slide 1: Slide

Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 12 slides, with interactive quiz and text slides.

Items in this lesson

H1. CSS Grid

WDV-IV

Week 14

Slide 1 - Slide

Planning

Terugblik op flexbox
Waarom CSS Grid?
Hoe gebruik je CSS Grid?
Oefenen met CSS Grid!

Slide 2 - Slide

Slide 3 - Drag question

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

Waarom CSS Grid?

Onze websites
hebben tot nu
toe redelijk simpele
layouts gehad.

Maar dat blijft niet zo...

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

Hoe gebruik je CSS Grid

3. Items kunnen
meerdere 'hokjes'
hebben.

4. Hokjes kunnen
verschillende grootes
hebben

Slide 8 - Slide

Hoe gebruik je CSS grid

1. Maak een container
waarin je grid komt te
staan.

2. Geef aan hoe groot
elk 'hokje' wordt d.m.v.
rijen en kolommen.

Slide 9 - Slide

Hoe gebruik je CSS grid

3. Geef elk item een
plaats op de grid.

Slide 10 - Slide

Oefenen met CSS grid!

Maak alle oefeningen
op:

CssGridGarden.com

timer

40:00

Slide 11 - Slide

De tweede tool: Flexbox

3. Geef elk item een
plaats op de grid.

Slide 12 - Slide

CSS Grid

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Drag question

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

More lessons like this

H1. CSS Lay-out: Grid en Flexbox

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

13. CSS Lay-out: Grid en Flexbox

GRID

5. CSS Display

Quiz WDV Blok B

HTML + CSS les 4: selectors + margins + ontwerp + flexbox

HTML + CSS les 5: ontwerp website + Trello + devtools + PO