Responsive design: pages that fit every screen
With a mobile-first approach you build flexible type, images and layouts, choose breakpoints from the content and adapt components independently with container queries.
Level 201 · 16 lessons · 15 practice labs
Lessons
Foundations
- The viewport setting and device pixels
- Fluid layouts: percentages, max-width and clamp
- A fluid type scale
- Choosing breakpoints from the content
- Media features: hover, pointer, prefers-*
- Short task: convert a desktop page to mobile-first
At component level
- Container queries: @container
- Responsive images in CSS: object-fit and aspect-ratio
- A responsive navigation menu
- Tables on narrow screens
- Touch targets and finger-friendly interfaces
- Short task: a card that adapts to where it sits
Testing
- Device modes and testing on a real device
- Print styles
- Zoom and reflow at 400 per cent
- Capstone: make a restaurant site fit every screen
Practice labs
- Turn fixed widths fluid: Make a page built at a fixed 960 px fluid with max-width and percentages.
- Build a fluid type scale with clamp: Scale heading and body sizes smoothly with the viewport using clamp.
- Choose breakpoints from the content: Find where a page built for preset device widths breaks and reset breakpoints by its content.
- Fix a hover menu on touch screens: Make a hover menu that won't open on phones touch-friendly with hover and pointer queries.
- Convert to mobile-first: Convert a stylesheet written with max-width queries to a min-width based mobile-first structure.
- Build a page that respects user preferences: Prepare a campaign page that follows colour scheme, motion and contrast preferences.
- Adapt a card with a container query: Write a product card that looks narrow in the sidebar and wide in the main area using @container.
- Test a component in three places: Put a news card in a sidebar, a grid and a full-width area and prove it looks right in each.
- Migrate media queries to container queries: Convert component-level media queries to container queries, keep page-level ones and explain why.
- Crop an image without distortion: Show product photos of different ratios in the same frame with aspect-ratio and object-fit.
- Build a hamburger menu: Write a navigation menu that collapses on narrow screens, sits horizontally on wide ones and works with a keyboard.
- Make an interface finger-friendly: Measure small, cramped touch targets, enlarge them to at least 44 px, space them out and fix the table view.
- Add print styles: Add print styles to an invoice page that hide menus and ads and print link addresses.
- Fix overflow at 400 per cent zoom: Find sections that need horizontal scrolling when zoomed and make them flow in one column.
- Make a restaurant site fit every screen: Test Kekik Eatery's site on phone, tablet, desktop and print and fix the problems you find.
About this course
With a mobile-first approach you build flexible type, images and layouts, choose breakpoints from the content and adapt components independently with container queries.
What you will learn
- Foundations
- At component level
- Testing
Prerequisites
Finishing the level 101 courses of the same path, or knowing those topics, is enough.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 201; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.