Tutorial: CSS Responsive Design is an interactive lab showing students how to make pages automatically adjust to any device.

This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity.

PREVIEW THE INTERACTIVE DEMO

Lesson Objectives:

• Design responsive web pages that will automatically adapt to different screen sizes including mobile devices.
• Include the viewport meta tag on all pages.
• Design responsive web pages using @media queries.
• Utilize flexible units in your web page design.
• Incorporate @media queries specifically for print output.
• Use max-height to control image display sizes.
• Demonstrate use of the Google Dev tools to verify that a page is responsive.

Tutorial: CSS Responsive Design includes several interactive learning activities:

1. The full source code solution as well as multiple screenshots showing the student each stage as new code is introduced.
   
2. Five videos showing students how page layout changes using the different techniques.
   
3. A lab with START and FINAL code for your classroom activities.
   

SUGGESTED ACTIVITY FOR THE LAB using the tutorial as a guide:

1) Add a viewport meta tag telling the browser how to handle the page.

2) Change px measurements to % or rem testing the page in a browser.

3) Add max-width to image CSS

4) Write an @media-query to format the page specifically for printing

5) Write an @media-query for smart phone screen widths

6) Write an @media-query for desktop and tablet displays

7) Use Google Chrome Dev tools to verify the page.

*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***

This product includes:

• A standard PDF handout for your students
• An interactive version made with Articulate Storyline
  (Here is a video showing how this is done using Moodle and Canvas.)
• Start and final source code with a sample image
• 5 videos you can upload to your LMS.