13. CSS Lay-out: Grid en Flexbox

WDV-IV

Week 14

1 / 28

Slide 1: Slide

Applicatie- en mediaontwikkelaarMBOStudiejaar 1

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

Items in this lesson

13. 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

CSS Grid ontdekken

Opdracht 13.3.

Bekijk het voorbeeld en beantwoord de vragen in het moduleboekje.

Slide 14 - Slide

Grid oefenen met een spelletje

https://cssgridgarden.com/

Slide 15 - Slide

Slide 16 - Slide

1: uitleg

2: code schrijven

3: resultaat

Slide 17 - Slide

3e verticale grens

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

Slide 20 - Slide

Met welke CSS code geef je aan
dat een HTML element een
CSS grid is?

Slide 21 - Quiz

Op welke manier maak je daadwerkelijk een
CSS grid?

Slide 22 - 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 23 - Quiz

CSS: Flexbox

Slide 24 - Slide

Waarom Flexbox?

Soms wil je items
alleen horizontaal of
verticaal positioneren.

Een volledig grid
maken is dan meer
werk dan nodig.

Slide 25 - Slide

Flexbox oefenen met een spelletje

https://flexboxdefense.com

Slide 26 - Slide

13.8 Opdracht: gallery

Download uit Itslearning gallery.zip. Gebruik je kennis van flexbox en grid om de afbeeldingen na te maken. Kijk in je moduleboekje voor concretere instructies.

Slide 27 - Slide

Aan de slag

Opdracht gallery (Itslearning - lesmateriaal wdv-II - gallery.zip). Maak de voorbeelden na uit het moduleboekje (pag. 39)
Ga aan de slag met weekcheck H1 Dierenwinkel (pag. 40)
Klaar met beide bovenstaande opdrachten?: http://www.flexboxdefense.com/

Slide 28 - Slide

13. CSS Lay-out: Grid en Flexbox

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

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

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Slide

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

Slide 20 - Slide

Slide 21 - Quiz

Slide 22 - Quiz

Slide 23 - Quiz

Slide 24 - Slide

Slide 25 - Slide

Slide 26 - Slide

Slide 27 - Slide

Slide 28 - Slide

More lessons like this

CSS Grid

13. CSS Lay-out: Grid en Flexbox

CSS Grid

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

H1. CSS Lay-out: Grid en Flexbox

H1. CSS Lay-out: Grid en Flexbox

Meester van CSS Grid: Een diepgaande verkenning

5. CSS Display