CSS Responsive Design

CSS Responsive Design
CSS Responsive Design
CSS Responsive Designplay
CSS Responsive Design
CSS Responsive Design
CSS Responsive Design
CSS Responsive Design
CSS Responsive Design
CSS Responsive Design
CSS Responsive Design
Common Core Standards
Product Rating
File Type

Compressed Zip File

Be sure that you have an application to open this file type before downloading and/or purchasing.

39 MB|40 pages
Also included in:
  1. Web For Business - Bundle 3 CSSThe Web For Business Course - Students learn programming skills while developing their own resumé website.This bundle includes learning/assessment activities teaching students how to style their web pages using CSS (Cascading Style Sheets).The bundle includes:Five inte
    Save $3.48
Product Description

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.


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:

  • The full source code solution as well as multiple screenshots showing the student each stage as new code is introduced.
  • Five videos showing students how page layout changes using the different techniques.
  • 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:

    Total Pages
    40 pages
    Answer Key
    Teaching Duration
    1 hour
    Report this Resource
    Digital Download
    More products from Web Explorations
    Product Thumbnail
    Product Thumbnail
    Product Thumbnail
    Product Thumbnail
    Product Thumbnail
    Teachers Pay Teachers

    Teachers Pay Teachers is an online marketplace where teachers buy and sell original educational materials.

    Learn More

    Keep in Touch!

    Sign Up