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 and another course to help you learn CSS.
Here's what you'll learn:
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.
So, are you ready to learn responsive design?