Why responsive design exists

One page, wildly different screens

A visitor might open your page on a phone in one hand, a laptop on a desk or a monitor twice as wide. Every CSS course so far assumed a reasonable amount of room: flexbox rows, positioned badges, centered cards. None asked the question responsive design exists for. What should happen when the room is much smaller, or larger, than expected?

The old answer: two separate websites

Years ago, the usual answer was a separate mobile site, often on its own subdomain like m.example.com, with its own HTML and CSS and sometimes its own codebase. Two websites meant double the work for every change and a constant risk of drift. It got phones a layout that fit, at a real ongoing cost.

The modern answer: one page that adapts

Responsive design replaces that with one HTML document and one stylesheet that adapt to whatever screen they're rendered on. CSS rules apply conditionally, based on what the browser reports at render time. This course is about that mechanism: media queries, CSS's own conditional logic.

The foundational piece almost everyone forgets first

Before any media query can work, one tag needs to be in every responsive page's <head>. Skip it and everything that follows quietly breaks:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this tag, mobile browsers don't use the phone's real width. To keep desktop-only pages from breaking on early smartphones, they render inside a wider virtual viewport, often about 980px, and zoom the result out to fit. Your CSS never sees the narrow width, so media queries written for phone widths never trigger. width=device-width tells the browser to use the device's real width, and initial-scale=1 starts at 100% zoom. Everything else in this course depends on this line.

Adapting the layout

"Responsive" means more than "gets smaller". A phone needs different decisions, not scaled-down desktop ones. A three-column layout that works at 1200px is unreadable at 375px. A navbar with six links needs to become something else on a narrow screen. A sidebar next to an article may need to move below it. Good responsive design rethinks the layout at each size, using flexbox and positioning conditionally.

What this course covers

• Lesson 1, Why responsive design exists: the viewport meta tag, and adapting layout rather than just shrinking it (you are here)
• Lesson 2, @media syntax and min-width/max-width: writing conditional CSS rules
• Lesson 3, Mobile-first vs desktop-first: two philosophies for structuring breakpoints
• Lesson 4, Choosing breakpoints: picking values based on your content, not specific devices
• Lesson 5, Responsive flexbox and positioning: combining media queries with the layout tools from the last two courses
• Lesson 6, Beyond width: orientation, dark mode, and reduced-motion preferences
• Lesson 7, Putting it together: a responsive navbar and card grid, mobile-first from the ground up

By the end, you'll be able to adapt any layout from the last several courses to whatever screen shows up.