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

H1. CSS Lay-out: Grid en Flexbox

WDV-IV

Week 14

1 / 24

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

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?

Slide 19 - Quiz

Op welke manier maak je daadwerkelijk een
CSS grid?

Slide 20 - Quiz

Wat doet de volgende CSS Grid code?

Plaats alle items van rechts naar links, of beneden naar boven op de grid.

Zorg ervoor dat de items niet buiten de CSS grid geplaatst kunnen worden.

Geef aan dat het eind van de grid bereikt is.

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