Web Design: Layout with Flexbox
Arrange page elements with modern CSS layout instead of guesswork.
Materialien
6 Materialien1
Photo prompt
1
Starter slide
2
Slides
2
Anchor chart
3
Problem set
4
Plenary quiz
Unterrichtsverlauf
4 Phasen, 53 MinZiel
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
Klasse
Photo prompt
Starter slide
2
Direct instruction
Introduce the core ideas with a guided walkthrough and clear worked examples.
17 Min
Klasse
Slides
Anchor chart
3
Guided practice
Students apply the concept in pairs or small groups while the teacher circulates and confers.
22 Min
Paar
Problem set
4
Wrap-up & check
Consolidate the big idea and check understanding with a short exit ticket.
7 Min
einzeln
Plenary quiz
Interaktive Materialien öffnen sich vor dem Kauf in einer Nur-Lese-Vorschau.
Bewertungen & Kommentare
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.