bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/CSS/Modern Layout
CSS•Modern Layout

Responsive Web Design

Introduction to Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.

Best Experience For All Users

Web pages can be viewed with many different devices: desktops, tablets, and mobile phones.

Your web page should look good, and be easy to use, regardless of the device.

Responsive web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices.

Key components in responsive web design are:

  • Viewport <meta> tag
  • Flexible layout (grid and flex)
  • Mediaqueries

Previous

CSS Grid Layout

Next

CSS Flex Container

This chapter

Overview
24

Lessons

64m

Read time

1. CSS Flexbox2. CSS Grid Layout3. Responsive Web Design4. CSS Flex Container5. CSS Grid Container6. Responsive Web Design - The Viewport7. CSS Flexbox justify-content8. CSS Grid Tracks9. Responsive Web Design - Building a Grid View10. CSS Flexbox Align11. CSS Grid Gap12. Responsive Web Design - Media Queries13. CSS Flex Items14. CSS Grid Container - Align Grid Content15. Responsive Web Design - Images16. CSS Responsive Flexbox17. CSS Grid Items18. Responsive Web Design - Frameworks19. CSS Naming Grid Items20. Responsive Web Design - Templates21. CSS Grid Items - Alignment22. CSS Grid Items - Order23. CSS 12-Column Grid Layout24. CSS @supports Rule

On this page

Introduction to Responsive Web DesignBest Experience For All Users