StretchLearn Course

Design One Layout That Works on Every Screen

The working responsive method - mobile-first, content breakpoints, fluid grids, and component reflow - taught through one complete multi-breakpoint screen.

Preview Curriculum Back to Catalog

Beginner9 hrSelf PacedRegistered

Course Overview

What this course is designed to develop

Responsive design is the discipline of making one design serve every screen, from a 320-pixel phone held in one hand to a 27-inch monitor, without shipping a separate site for each. This course teaches the working responsive method that product and web designers actually use: designing mobile-first so the smallest screen sets the priority, choosing breakpoints where the content breaks rather than at arbitrary device sizes, building fluid grids with percentages and the 12-column model, sizing type and space in relative units (rem, em, ch, and viewport units) so everything scales together, and reflowing real components - navigation, cards, tables, forms, and images - as the available width changes. By the end you will have one complete multi-breakpoint layout - a landing or dashboard screen - specified at mobile, tablet, and desktop with a documented breakpoint map, a fluid type scale, and component reflow rules a developer can build directly.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Design mobile-first, defining the smallest-screen layout first and progressively enhancing it for larger viewports

Set breakpoints from where the content visibly breaks rather than from named device widths, and document a breakpoint map

Build fluid grids using percentage widths, the 12-column model, and CSS Grid and Flexbox reflow behaviour

Size typography and spacing in relative units - rem, em, ch, and viewport units - so a layout scales proportionally across screens

Make real components reflow correctly - navigation, cards, data tables, forms, and responsive images with art direction

Specify one layout across mobile, tablet, and desktop breakpoints and hand off responsive rules a developer can implement

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: The Responsive Mindset and Mobile-First

Start by replacing the fixed-page habit with the responsive one. Learn why one flexible design beats many fixed pages, and why the smallest screen comes first.

3 lessons

Why Responsive Design ExistsContent · 45 min

Preview Enabled

Mobile-First, Not Desktop-FirstContent · 45 min

LMS Access

Setting Up the Responsive CanvasContent · 45 min

LMS Access

Module 2

Module 2: Breakpoints and the Fluid Grid

Build the skeleton of responsive layout - where the design changes (breakpoints) and how it flexes between those points (the fluid grid).

3 lessons

Breakpoints From Content, Not DevicesContent · 45 min

LMS Access

Fluid Grids and Relative WidthContent · 45 min

LMS Access

Designing the Breakpoint MapContent · 45 min

LMS Access

Module 3

Module 3: Responsive Typography, Spacing, and Images

Make the content itself responsive - type and space that scale in relative units, and images that adapt in size, crop, and resolution.

3 lessons

Relative Units and Fluid TypeContent · 45 min

LMS Access

Responsive Spacing and Touch TargetsContent · 45 min

LMS Access

Responsive and Adaptive ImagesContent · 45 min

LMS Access

Module 4

Module 4: Component Reflow and Handoff

Bring it together by reflowing real interface components across breakpoints, then package the whole responsive system into a clean developer handoff.

3 lessons

Reflowing Navigation, Cards, and Layout PatternsContent · 45 min

LMS Access

Responsive Tables and FormsContent · 45 min

LMS Access

Testing and the Responsive HandoffContent · 45 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

responsive designmobile-firstbreakpointsfluid gridsrelative unitsresponsive typographycomponent reflowresponsive images