CSS Grid and Flexbox to responsive websites by Scrimba

About this course

Create layouts that feel effortless on every screen size. This free online course is built for anyone who wants to design responsive websites with confidence using CSS Grid and Flexbox—the two core layout systems behind modern front-end development. Instead of relying on rigid templates or heavy frameworks, you’ll learn how to think responsively from the start, making decisions that scale from mobile to desktop without constant rewrites.

You’ll develop a practical understanding of responsive units and sizing, so typography, spacing, and components behave predictably across devices. Along the way, you’ll tackle common problems that quietly break real layouts—images that overflow, containers that stretch too wide, nested elements that cause runaway font sizes, or sidebars that shrink when they shouldn’t. The goal is to help you choose the right tool and the right unit at the right time, turning responsive design into a repeatable workflow rather than guesswork.

With Flexbox, you’ll learn to build navigation and page sections that align cleanly, distribute space intelligently, and reflow smoothly when breakpoints kick in. You’ll also understand what changes when directions switch, how alignment works across axes, and how ordering can improve mobile experiences without changing your HTML. Then, with CSS Grid, you’ll move into structured page layouts—main/aside patterns, article listings, and image grids—using powerful features like template areas, implicit rows, and auto-fit/auto-fill behavior for layouts that adapt naturally to available space.

Exercises reinforce each concept so you can apply it immediately in real interface patterns, not just isolated snippets. By the end, you’ll be able to design and refine responsive pages with clean, maintainable CSS, communicate layout decisions like a web professional, and build portfolio-ready structures that translate directly to real-world web development work.