Students adapt the homepage for smaller screens by changing how the multi-column layouts from Lesson 7 behave when space becomes limited. The lesson introduces responsive design, breakpoints, and responsive media while reinforcing that the same website should remain clear and usable across screen sizes.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 8 of 12
  • Suggested duration: 60 minutes
  • Primary concept: Responsive Design
  • Project milestone: Make the homepage layouts and content adapt to smaller screens

Learning Objectives

By the end of the lesson, students should be able to:

  • Explain why responsive design is necessary for modern websites.
  • Describe mobile-first design as a common responsive design approach.
  • Use a media query to change layout behavior when the available width becomes too small.
  • Make multi-column content return to a readable single-column layout on smaller screens.

Key Concepts and Vocabulary

  • Responsive design
  • Mobile-first
  • Breakpoint
  • Media query
  • Viewport
  • Responsive image
  • Stacking
  • Overflow

Materials and Resources

  • The student website from Lessons 1 through 7
  • A text editor and web browser
  • The three-column box layout from Lesson 7 and any optional image-and-text layout
  • The existing Base CSS breakpoint and responsive media rules
  • Several current websites selected by the instructor for comparison at wide and narrow widths
  • Responsive Design, Breakpoints, Responsive Images, and Overflow

Prior Knowledge

Students should understand basic CSS layout, parent and child relationships, and how the multi-column sections created in Lesson 7 are controlled with Flex or Grid.

Opening Activity

Open several current websites at a wide browser width and then narrow the browser window. Ask students what changes and what stays the same.

Connect the observations to Responsive Design. Good responsive design keeps the same content and overall experience usable across screen sizes while requiring as few special-case changes as possible.

Direct Instruction

Introduce responsive design as the practice of making one website work across different screen sizes rather than creating a separate page for each device.

  • Users may visit the same page on phones, tablets, laptops, and large monitors.
  • Mobile-first design starts with the simplest small-screen layout and adds complexity as more space becomes available. It is a common approach, although this course’s starter CSS uses a simple small-screen breakpoint for clarity.
  • A breakpoint is a width where the current design stops working well and a CSS change becomes useful.
  • A media query applies CSS only when its condition is met.
  • Responsive media should remain inside the width available to it rather than forcing the page wider than the viewport.

Point out that the Base CSS already contains a @media (max-width: 767px) rule that reduces wrapper padding and heading sizes. It also includes max-width: 100% and height: auto for images and other media. Students are not starting responsive design from nothing. They are extending an existing pattern to the layouts they created themselves.

Demonstrate the three-box layout from Lesson 7. Narrow the browser until the columns become cramped, then add the layout change inside the existing breakpoint or at another width justified by the design. For Grid, that may mean changing the column definition to one column. For Flex, it may mean changing the direction to a column. Emphasize that the breakpoint should solve a visible problem rather than simply use a memorized device width.

Recommended AI Coding Educator Lessons

The Code Sandbox is useful for experimenting with a breakpoint before editing the project. Students can resize the result, change the media query, and see exactly when the layout switches.

Applied Project

Students test the homepage at progressively narrower widths and make a focused responsive pass on the layouts created in Lesson 7.

  1. Open the homepage at a wide browser width and confirm the current multi-column layout works as expected.
  2. Narrow the browser until the three-box layout becomes crowded or difficult to read.
  3. Use the existing Base CSS breakpoint if it solves the problem at an appropriate width, or add another breakpoint only if the layout clearly needs one.
  4. Change the three-box layout to one column at the narrower width.
  5. If the image-and-text layout was created in Lesson 7, make it stack vertically when horizontal space becomes too limited.
  6. Confirm that images remain inside their containers and that the page does not scroll horizontally.
  7. Review the header, Home link, text sizes, and section spacing at narrow widths and correct only problems that interfere with readability or use.
  8. Test several widths between the widest and narrowest states to make sure the layout does not break between them.

The goal is not to create a different design for every device. Students should make the smallest number of responsive changes needed to keep the existing content and visual system usable as the available width changes.

Check for Understanding

Students should be able to identify a problem caused by reduced width, show the media query that fixes it, and explain why that responsive change improves the page.

Useful questions include:

  • What problem appears when this section gets narrower?
  • What condition causes this media query to apply?
  • Why does stacking these columns improve the narrow layout?
  • Which Base CSS rule already helps images remain responsive?
  • What would horizontal overflow look like in the browser?
  • Why should the page be tested at several widths rather than only two?

Differentiation and Extensions

Support: Use the existing @media (max-width: 767px) block and provide the layout selector students need to change. Have them focus on identifying the narrow-screen problem and choosing the correct layout property.

Extension: Have students identify another point where the design genuinely needs a change and add one additional responsive rule. They should be able to explain the visual problem that justifies the new breakpoint.

If a responsive rule does not seem to apply, the AI Tutor can help students inspect the media-query condition, selector, and competing CSS rules. Students should identify the cause, make the correction themselves, and verify it by resizing the browser.

Lesson Outcome

Students finish the lesson with the multi-column work from Lesson 7 adapted for smaller screens, images that remain within their containers, and a page that stays readable and usable across a range of viewport widths.

Closure

Review the idea that responsive design preserves the same site’s content and purpose while adapting the presentation to the space available. Preview that Lesson 9 will keep this responsive layout intact while adding visual feedback to links, buttons, and other interactive controls.

Teacher Reflection

  • Could students identify when a layout actually needed a responsive change?
  • Did students understand that the Base CSS already provided part of the responsive foundation?
  • Were students able to connect responsive changes to usability rather than treating breakpoints as arbitrary device numbers?
  • Is the homepage now stable enough across widths to begin adding interaction feedback in Lesson 9?