Web Design: Layout with Flexbox
Arrange page elements with modern CSS layout instead of guesswork.
Materiales
6 materiales1
Photo prompt
1
Starter slide
2
Slides
2
Anchor chart
3
Problem set
4
Plenary quiz
Programación de clase
4 fases, 53 minObjetivo
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
clase
Photo prompt
Starter slide
2
Direct instruction
Introduce the core ideas with a guided walkthrough and clear worked examples.
17 min
clase
Slides
Anchor chart
3
Guided practice
Students apply the concept in pairs or small groups while the teacher circulates and confers.
22 min
pareja
Problem set
4
Wrap-up & check
Consolidate the big idea and check understanding with a short exit ticket.
7 min
solo
Plenary quiz
Los materiales interactivos se abren en vista previa de solo lectura antes de la compra.
Valoraciones y comentarios
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.