A course exploring all aspects of responsive design. Learn how to make sites
that look great and work well for everyone.

This course takes you on a journey through the many facets of modern responsive web design.
The first few modules will ease you in with a history of where responsive design came from and a look at the fundamentals of responsive layouts.
From there, you'll learn about responsive images, typography, accessibility and more.

Along the way you'll find out how to make websites responsive to user preferences and device capabilities.
By the end, you'll also have an understanding of what the future might hold for responsive design.

Each module has demos and self-assessments for you to test your knowledge.

This course is created for beginner and intermediate designers and developers.
A basic understanding of HTML and CSS should be enough.
You don't need to know any JavaScript.
If you're completely new to making websites, there's an
[introduction to HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML)
and another course to help you [learn CSS](https://web.dev/learn/css).

Here's what you'll learn:

### [Introduction](https://web.dev/learn/design/intro)

Find out where responsive design came from.

### [Media queries](https://web.dev/learn/design/media-queries)

Adapt your designs to different screen sizes using CSS media queries.

### [Internationalization](https://web.dev/learn/design/internationalization)

Prepare your designs for different languages and writing modes.

### [Macro layouts](https://web.dev/learn/design/macro-layouts)

Design page layouts using a choice of CSS techniques.

### [Micro layouts](https://web.dev/learn/design/micro-layouts)

Build flexible components that can be placed anywhere.

### [Typography](https://web.dev/learn/design/typography)

Make your text legible and beautiful, no matter where it appears.

### [Responsive images](https://web.dev/learn/design/responsive-images)

Give your visitors the most appropriate images for their devices and screens.

### [The picture element](https://web.dev/learn/design/picture-element)

Exercise more creative control over your images.

### [Icons](https://web.dev/learn/design/icons)

Use SVG for scalable responsive iconography.

### [Theming](https://web.dev/learn/design/theming)

Adapt your designs to match user preferences such as a dark mode.

### [Accessibility](https://web.dev/learn/design/accessibility)

Ensure that your website is available to everyone.

### [Interaction](https://web.dev/learn/design/interaction)

Prepare your pages for different input mechanisms; mouse, keyboard, and touch.

### [User interface patterns](https://web.dev/learn/design/ui-patterns)

Consider some common UI elements that adapt to different screen sizes.

### [Media features](https://web.dev/learn/design/media-features)

A round-up of all the ways that media features let you respond to devices and preferences.

### [Screen configurations](https://web.dev/learn/design/screen-configurations)

Prepare your content for devices with multiple screens.

### [Conclusion and next steps](https://web.dev/learn/design/conclusion)

Further resources to help you take your next steps.

So, are you ready to learn responsive design?

> [!NOTE]
> **Note:** This course was written by [Jeremy Keith](https://twitter.com/adactio), with input and review from [Rachel Andrew](https://twitter.com/rachelandrew), [Una Kravets](https://twitter.com/Una), [Adam Argyle](https://twitter.com/argyleink), and [Camden Bickel](https://twitter.com/camdenbickel).