Learn Responsive Design

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

Find out where responsive design came from.

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

Prepare your designs for different languages and writing modes.

Design page layouts using a choice of CSS techniques.

Build flexible components that can be placed anywhere.

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

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

Exercise more creative control over your images.

Use SVG for scalable responsive iconography.

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

Ensure that your website is available to everyone.

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

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

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

Prepare your content for devices with multiple screens.

Further resources to help you take your next steps.