Build a Responsive Mobile-First Website

TechIntermediateHome

90 minutes

5 steps

·Intermediate

After 90 min: A website that looks perfect on phones, tablets, and desktops

What you need

LaptopText editorMultiple browsers

The 90-Minute Plan

Understand Media Queries0–15 min

Learn CSS media queries to apply different styles based on screen size.

Design Mobile First15–35 min

Start with a mobile layout, then add styles for tablet and desktop screens.

Create Flexible Grids35–55 min

Use CSS Flexbox and Grid to build layouts that adapt to different widths.

Optimize Images55–75 min

Use responsive images with srcset and picture elements. Ensure fast loading.

Ship & next steps75–90 min

Test on real devices. Check mobile performance. Next: add PWA capabilities.

Pro Tip

Test on actual phones, not just browser emulators. Use DevTools device toolbar extensively.

90 min·5 steps

TechBeginner

After 90 min: A live webpage about your interests visible in a browser

11,205

see the plan

90 min·5 steps

TechAdvanced

After 90 min: A scalable microservices architecture for a distributed application

7,234

see the plan

90 min·5 steps

TechIntermediate

After 90 min: A webpage with buttons, forms, and interactive elements that respond to user actions

8,901

see the plan

90 min·5 steps

TechIntermediate

After 90 min: Automated data summaries and insights from large datasets without writing formulas

6,789

see the plan