![[web.dev]](https://www.gstatic.com/devrel-devsite/prod/v0f3a5b8b76e4a120372a69044e02756e703b6140f9f1812c6e4a0407b19864b7/web/images/lockup.svg){kind=link}
Learn Responsive Design
A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.
Go back
Welcome to Learn Responsive Design!
A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.
Introduction
Find out where responsive design came from.
Media queries
Adapt your designs to different screen sizes using CSS media queries.
Internationalization
Prepare your designs for different languages and writing modes.
Macro layouts
Design page layouts using a choice of CSS techniques.
Micro layouts
Build flexible components that can be placed anywhere.
Typography
Make your text legible and beautiful, no matter where it appears.
Responsive images
Give your visitors the most appropriate images for their devices and screens.
The picture element
Exercise more creative control over your images.
Icons
Use SVG for scalable responsive iconography.
Theming
Adapt your designs to match user preferences such as a dark mode.
Accessibility
Ensure that your website is available to everyone.
Interaction
Prepare your pages for different input mechanisms; mouse, keyboard, and touch.
User interface patterns
Consider some common UI elements that adapt to different screen sizes.
Media features
A round-up of all the ways that media features let you respond to devices and preferences.
Screen configurations
Prepare your content for devices with multiple screens.
Conclusion and next steps
Further resources to help you take your next steps.