Web Design: Layout with Flexbox
Arrange page elements with modern CSS layout instead of guesswork.
Supports
6 supports1
Photo prompt
1
Starter slide
2
Slides
2
Anchor chart
3
Problem set
4
Plenary quiz
Déroulé de séance
4 phases, 53 minObjectif
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
binôme
Problem set
4
Wrap-up & check
Consolidate the big idea and check understanding with a short exit ticket.
7 min
seul
Plenary quiz
Les supports interactifs s'ouvrent en aperçu lecture seule avant l'achat.
Notes et commentaires
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.