Technologies · Year 9

Active learning ideas

Responsive Design Principles

Active learning works for responsive design because students must see code changes instantly and test them across devices to truly grasp how layout, images, and typography adapt. Direct experimentation in pairs and groups makes abstract concepts like breakpoints and fluid grids concrete through immediate feedback loops.

• ACARA Content Descriptions
• AC9DT10P06

• 25–50 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Project-Based Learning
• 35 min · Pairs

Pairs: Mobile-First Card Layout

Pairs start with a mobile card component using flexbox, then add media queries for tablet and desktop views. They resize the browser window to test fluidity and adjust spacing. End by combining pairs' work into a gallery page.

Explain the importance of responsive design in today's multi-device world.

Facilitation Tip

During Mobile-First Card Layout, circulate and ask pairs to verbalize how their CSS changes the order or spacing of elements as the viewport shrinks.

What to look for

Present students with three screenshots of the same website displayed on a desktop, tablet, and mobile phone. Ask them to identify two specific elements that changed between the views and explain why these changes improve the user experience for each device.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 02

• Project-Based Learning
• 50 min · Small Groups

Small Groups: Breakpoint Challenge

Groups modify a provided fixed layout for three screen sizes: mobile under 600px, tablet 600-1024px, desktop over 1024px. Use CodePen for live previews. Groups demo their solutions and explain choices to the class.

Differentiate between 'mobile-first' and 'desktop-first' design approaches.

Facilitation Tip

In Breakpoint Challenge, limit each group to one device type at a time to force careful, deliberate decisions about where breakpoints should occur.

What to look for

Provide students with a simple HTML structure for a webpage. Ask them to write one CSS media query that would change the background color of the page when the screen width is less than 768 pixels. They should also state the design approach (mobile-first or desktop-first) this change supports.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 03

• Project-Based Learning
• 40 min · Individual

Individual: Emulator Testing Sprint

Students build a personal portfolio page responsively, then use Chrome DevTools device emulation for phones, tablets, and laptops. Note issues in a log and iterate twice. Share one fix with a partner.

Construct a responsive layout for a simple webpage.

Facilitation Tip

For Emulator Testing Sprint, provide a checklist of three specific issues to look for to focus observations during speedy testing cycles.

What to look for

Students share a link to a simple responsive page they have built. Partners review the page on at least two different screen sizes (e.g., browser resizing or developer tools). They provide feedback on two specific aspects: one element that adapted well and one element that could be improved for a better user experience.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 04

• Project-Based Learning
• 25 min · Whole Class

Whole Class: Design Critique Relay

Display student work projected; class suggests responsive improvements in turns. Code changes live. Students vote on most effective fixes before applying to their projects.

Explain the importance of responsive design in today's multi-device world.

Facilitation Tip

During Design Critique Relay, model how to give feedback using the sentence stem 'I noticed... because...' to move beyond vague comments.

What to look for

Present students with three screenshots of the same website displayed on a desktop, tablet, and mobile phone. Ask them to identify two specific elements that changed between the views and explain why these changes improve the user experience for each device.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

A few notes on teaching this unit

Teach this topic by starting with the smallest screen and building up, so students experience the constraints that shape mobile-first decisions. Avoid showing finished examples first; instead, let students wrestle with incomplete layouts to understand why responsiveness matters. Research shows that teaching breakpoints through real device testing—not just emulator views—builds stronger spatial reasoning about screen sizes.

Successful learning looks like students confidently explaining why a layout changes at different screen sizes and identifying which CSS properties enable responsiveness. They should critique design choices using technical language and apply media queries without prompting.

---

Watch Out for These Misconceptions

• During Mobile-First Card Layout, watch for students who only reduce image file sizes instead of reorganizing or hiding non-essential elements.

  After students set their initial mobile layout, ask them to circle every element and explain why it must stay or could be removed, focusing on content hierarchy rather than visual shrinking.

• During Breakpoint Challenge, watch for groups that assume the first breakpoint they test should be the only one used.

  Have each group present their chosen breakpoint range and justify why that specific width triggered their layout change, comparing notes with other groups to see multiple valid approaches.

• During Emulator Testing Sprint, watch for students who assume the emulator accurately reflects real device behavior.

  Ask students to test their page on at least one physical device or tablet and note any differences, then adjust their CSS accordingly before sharing their findings.

---

Methods used in this brief

• Project-Based Learning