Responsive and Mobile-First Web Design

Build fluid, mobile-first layouts with media queries, Flexbox, Grid and container queries. For front-end developers who want sites that work on every screen.

Start course →

What you'll learn

  • Set up the viewport meta tag and write mobile-first CSS with media queries.
  • Build fluid layouts with relative units, clamp(), Flexbox and Grid.
  • Serve responsive images and touch-friendly navigation and forms.
  • Use container queries and user-preference media features.
  • Test, debug and optimize responsive pages for performance and accessibility.

Syllabus

Module 1: Getting Started

  1. What is responsive design?

Module 2: Foundation

  1. Viewport & meta tags
  2. CSS media queries
  3. Breakpoints strategy

Module 3: Core Techniques

  1. Flexible layouts
  2. Fluid typography
  3. Images & pictures element
  4. Touch interactions
  5. Navigation patterns

Module 4: Layout Systems

  1. CSS Grid responsive
  2. Flexbox responsive
  3. Container queries

Module 5: Design Patterns

  1. Forms for mobile
  2. Orientation changes
  3. Device capabilities
  4. User preference media queries

Module 6: Testing & Tools

  1. Testing responsiveness
  2. Debugging mobile
  3. Performance on mobile

Module 7: Best Practices

  1. Accessibility for mobile
  2. Best practices checklist

Module 8: Tools & Resources

  1. Modern CSS features
  2. Cheatsheet & Interview Q&A

Module 9: Performance Optimization

  1. Image optimization for mobile
  2. CSS & JS optimization

Module 10: Revision & Summary

  1. Responsive design recap