Learn Responsive Design
A free course on web.dev covering every part of responsive design, from media queries and layouts to typography, images, theming, accessibility and interface patterns. It bridges visual design and CSS, which makes it ideal for developers who design.
Course
Web Development
web.dev (Google)
Beginner
Free
What it is
Learn Responsive Design is a free, self-paced course on web.dev, Google's site for web developers. It explores how to make sites that look great and work well for everyone, on any screen.
What it covers
As of 2026-09 the course has these modules:
- Introduction and media queries
- Internationalisation (different languages and writing modes)
- Macro layouts (page level) and micro layouts (flexible components)
- Typography
- Responsive images and the picture element
- Icons
- Theming
- Accessibility
- Interaction
- User interface patterns
- Media features and screen configurations
Each module is a readable article with code examples and a short self-check.
Who it is for
Developers who know basic HTML and CSS and want to build layouts that adapt properly, and designers who want to understand what is easy and hard to build on the web. It is especially useful on the developer path of the UI/UX roadmap because it connects design ideas (type, theming, patterns) to CSS.
Time needed
A few hours per module if you try the code, or roughly a week or two at a steady pace for the whole course.
Prerequisites
Basic HTML and CSS. Familiarity with flexbox and grid helps; web.dev's Learn CSS course covers them.
Is it worth it?
Yes. It is free, current, written by people who work on the web platform, and focused on modern techniques such as container queries and logical properties rather than old hacks. It will not teach you visual design in depth; pair it with visual design resources.
How to use it
Build as you read. Take a page from one of your own projects and apply each module: fix the macro layout, make one component respond to its container, set a type scale, add a dark theme, and check accessibility.
What you can do after
Build pages and components that adapt to any screen size, language direction and user preference, using modern CSS instead of fixed widths.
Common questions
Is it different from Learn CSS? Yes. Learn CSS teaches the language; Learn Responsive Design teaches how to use it to adapt interfaces to people and devices.
Do I need a Google account? No, the course is open to read.
Ready to start?
Opens on web.dev (Google) in a new tab.
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
Follow along
New writing, resources and project ideas land here first.