Web Design: Layout with Flexbox
Arrange page elements with modern CSS layout instead of guesswork.
Materials
6 materials1
Photo prompt
1
Starter slide
2
Slides
2
Anchor chart
3
Problem set
4
Plenary quiz
Lesson plan
4 phases, 53 minGoal
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
class
Photo prompt
Starter slide
2
Direct instruction
Introduce the core ideas with a guided walkthrough and clear worked examples.
17 min
class
Slides
Anchor chart
3
Guided practice
Students apply the concept in pairs or small groups while the teacher circulates and confers.
22 min
pair
Problem set
4
Wrap-up & check
Consolidate the big idea and check understanding with a short exit ticket.
7 min
single
Plenary quiz
Interactive materials open in a read-only preview before purchase.
Ratings & comments
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.