GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Resources
  • HTML
  • CSS
  • JavaScript
  • Performance
  • Accessibility
  • Identity
  • Learn HTML
  • Learn CSS
  • Learn JavaScript
  • Learn AI
  • Learn Performance
  • Learn Accessibility
  • AI and the web

This view

  • Original page
  • New address

GeezerVison is showing web.dev — Learn Responsive Design | web.dev

Modern Web Guidance is now stable! Upgrade your coding agents with expert-vetted web development best practices. Read the announcement.
Stay organized with collections Save and categorize content based on your preferences.

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

 
check_circle

Welcome to Learn Responsive Design!

subject Article

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

Read article
check_circle

Introduction

subject Article

Find out where responsive design came from.

Read article
check_circle

Media queries

subject Article

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

Read article
check_circle

Internationalization

subject Article

Prepare your designs for different languages and writing modes.

Read article
check_circle

Macro layouts

subject Article

Design page layouts using a choice of CSS techniques.

Read article
check_circle

Micro layouts

subject Article

Build flexible components that can be placed anywhere.

Read article
check_circle

Typography

subject Article

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

Read article
check_circle

Responsive images

subject Article

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

Read article
check_circle

The picture element

subject Article

Exercise more creative control over your images.

Read article
check_circle

Icons

subject Article

Use SVG for scalable responsive iconography.

Read article
check_circle

Theming

subject Article

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

Read article
check_circle

Accessibility

subject Article

Ensure that your website is available to everyone.

Read article
check_circle

Interaction

subject Article

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

Read article
check_circle

User interface patterns

subject Article

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

Read article
check_circle

Media features

subject Article

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

Read article
check_circle

Screen configurations

subject Article

Prepare your content for devices with multiple screens.

Read article
check_circle

Conclusion and next steps

subject Article

Further resources to help you take your next steps.

Read article

Quiz

Confirm you've completed the Learn Responsive Design course to claim your badge.

Take the quiz
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.