Web Design: Layout with Flexbox
Arrange page elements with modern CSS layout instead of guesswork.
Materiały
6 materiałów1
Photo prompt
1
Starter slide
2
Slides
2
Anchor chart
3
Problem set
4
Plenary quiz
Scenariusz lekcji
4 faz, 53 minCel
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
klasa
Photo prompt
Starter slide
2
Direct instruction
Introduce the core ideas with a guided walkthrough and clear worked examples.
17 min
klasa
Slides
Anchor chart
3
Guided practice
Students apply the concept in pairs or small groups while the teacher circulates and confers.
22 min
para
Problem set
4
Wrap-up & check
Consolidate the big idea and check understanding with a short exit ticket.
7 min
pojedynczo
Plenary quiz
Materiały interaktywne otwierają się przed zakupem w podglądzie tylko do czytania.
Oceny i komentarze
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.