HTML & CSS LayoutLesson 25Free preview

Responsive Design

This lesson is part of Intro to HTML & CSS · All levels

Summary

Responsive design makes pages look good on mobile phones, tablets, and desktops. This material discusses meta viewports, media queries, and the mobile-first approach. With this technique, a single page can serve all screen sizes without creating a separate version.

Key points

Meta viewport makes the width of the content follow the width of the device
Media query applies the style only to certain conditions, for example screen width
Mobile-first: start with simple display and then add complexity to the big screen

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.