Web Design: Layout with Flexbox
Arrange page elements with modern CSS layout instead of guesswork.
Materiali
6 materiali1
Photo prompt
1
Starter slide
2
Slides
2
Anchor chart
3
Problem set
4
Plenary quiz
Piano di lezione
4 fasi, 53 minObiettivo
Students can build a responsive layout with flexbox and explain main-axis and cross-axis behaviour.
1
Hook & warm-up
Spark curiosity with a quick prompt that connects web design: layout with flexbox to what students already know.
7 min
classe
Photo prompt
Starter slide
2
Direct instruction
Introduce the core ideas with a guided walkthrough and clear worked examples.
17 min
classe
Slides
Anchor chart
3
Guided practice
Students apply the concept in pairs or small groups while the teacher circulates and confers.
22 min
coppia
Problem set
4
Wrap-up & check
Consolidate the big idea and check understanding with a short exit ticket.
7 min
singolo
Plenary quiz
I materiali interattivi si aprono in anteprima di sola lettura prima dell'acquisto.
Valutazioni e commenti
Ran it twice this term with very different groups and it held up both times. That is rare.
The extension is optional in the plan, but I mark it for the students who choose it.
Really well structured. I adapted the warm-up slightly for my group and it worked beautifully. Saved me hours of prep.
Clear, classroom-ready, and the materials list is accurate. My only tweak was adding a few more minutes to the practice phase.
Setup was about ten minutes for me once the materials were out on the bench.
Good to know the hook travels — I will try that.