The Web: HTML & CSS
📱 Responsive design
Design interfaces that work on any screen: mobile-first, media queries and fluid units with clamp().
What you'll learn
- Enable responsiveness with the
viewporttag and apply the mobile-first approach - Adapt the layout to different widths with
@media (min-width)media queries and breakpoints - Create fluid elements with
%,rem,vwand images that scale withmax-width - Scale typography fluidly with
clamp()
Lessons
The problem and the mobile-first approachScreens of all sizes, the viewport tag and why to start with mobile. Media queries and breakpointsThe @media (min-width) syntax, typical breakpoints and how they fit with mobile-first. Fluid units and elementsPercentages, rem and vw; fluid images; fluid typography with clamp().Practice this module in the app
DevPath is a hands-on course: you read the theory here; in the app you put it into practice with exercises that really run, offline.
Start free in the app →