Responsive Layouts
Turn fixed-width pages into layouts that work from a 320px phone to a wide desktop.
What you'll learn
- Plan a layout mobile first and add breakpoints only where the content needs them
- Use rem, %, vw and clamp() to size type and spacing
- Write media queries and container queries
- Build responsive navigation that collapses on small screens
- Test layouts in DevTools device mode and fix overflow bugs
About this course
You take a desktop-only page and rebuild it mobile first. You work with fluid units, media queries and container queries, and you test on real device sizes in DevTools. The course ends with a three-breakpoint layout you can reuse on client work.
Course curriculum
4 modules and 12 lessons over 4 weeks. Plan for about 12 learning hours.
01Mobile-first thinkingWeek 1 · 3 lessons
- Why the smallest screen comes first
- The viewport meta tag
- Content-driven breakpoints
02Fluid sizingWeek 2 · 3 lessons
- Relative units compared
- clamp() for type and spacing
- Max-width containers
03QueriesWeek 3 · 3 lessons
- Media queries by width and preference
- Container queries for components
- prefers-reduced-motion and prefers-color-scheme
04Rebuild projectWeek 4 · 3 lessons
- Auditing a desktop-only page
- Rebuilding it at three breakpoints
- Fixing horizontal scroll and overflow
Project
Responsive rebuild. You convert a supplied desktop-only landing page into a layout that works at 320px, 768px and 1280px.
Who this course is for
Learners who write basic HTML and CSS and want their pages to hold up on phones.
Prerequisites
You can write a page with HTML and style it with CSS selectors, colors and the box model.
What's included
- 180-day course access
- Project brief
- Starter repository
- Coding labs
- Reference solutions
- One written project review
- A digital completion certificate
Learning format
Project-based online course, part of our guided project courses. One written project review.
Access and delivery
- Course access is delivered within 15 minutes after payment.
- Written project review is returned within 2 business days of submission.
- Completion materials are issued within 2 business days after the project is approved.
Certificate
You receive a digital completion certificate. Completion materials are issued within 2 business days after the project is approved.
Frequently asked questions
When does access start?
Course access is delivered within 15 minutes after payment.
Is payment taken on this website?
No. After you submit your enrollment request, we reply by email with payment details and enrollment confirmation.
Does this course guarantee a job or income?
No. It is an education and training service and does not include employment, income or placement guarantees.
Can I cancel?
Our Refund and Cancellation Policy lists the terms for project-based programs.
