Lesson 2 of 3 · 9 min

Responsive design

Media queries adapt styles to screen size: @media (max-width: 600px) { ... }.

Design mobile-first, then add enhancements for larger screens.

Practice

Make a card stack vertically on phones and sit side-by-side on desktops.

Optional resources

No purchase or partner signup is required to complete this course or earn quiz points.

These are official product links, not active affiliate links. Learnly does not currently earn a commission from them.

Reference grid, media queries and transitions as you build.

Free documentation.

Prototype layouts and hover effects in the browser.

Free plan available; Pro features optional.