Skip to content

Instantly share code, notes, and snippets.

@Shurlow

Shurlow/responsive.md

Last active September 22, 2022 11:52
Show Gist options
  • Save Shurlow/d91adab5b75c0ed9eb50602d261510be to your computer and use it in GitHub Desktop.
Save Shurlow/d91adab5b75c0ed9eb50602d261510be to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Design Lesson Notes
Raw
responsive.md

Responsive Design

Objectives

  • Explain what responsive design is
  • Use media queries
  • Use CSS Grid
  • Build responsive webpages with CSS

Guiding Questions

  • What is responsive design?

    Your answer...

  • What does this common html meta tag do:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Your answer...

  • What does a media query do in CSS? How are they used to build responsive websites? What css properties (media features) can you target?

    Your answer...

  • What is CSS Grid property? How is it used? When might you choose CSS Grid over Flexbox?

    Your answer...

Challenge

Media Queries:

Fork the following JSFiddle Add media query breakpoints to achieve the following:

  • yellow box is filled when width is bellow 200px
  • green box is filled when width is above 200px
  • red box is colored when width is between 200px and 300px
  • blue box is colored when width is bellow 200px or above 350px

https://jsfiddle.net/scotthurlow/c39rms7v/

CSS Grid:

Use the resources bellow to complete the following challege using CSS Grid: https://github.com/gSchool/css-grid-example

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment