15. Responsive design and media queries

Lesson 15

Responsive design and media queries

Unlock this lesson

Create a free account, then buy the course to open every lesson.

What you will learn in this lesson

  • Why a page that looks good on a laptop can look bad on a phone.
  • Add the viewport tag that every page needs.
  • Write a media query that changes the layout at a chosen width.
  • Build your product grid mobile first.
  • Test any page at phone width with Chrome DevTools.

60 minutes Lesson 15 of 30

Everything in Web Foundations

  • 30 step-by-step lessons
  • 3 mini projects with solutions
  • A final project for your portfolio
  • Real commands and real output in every lesson
  • Practice task with a solution in each lesson
  • Progress saved to your account