Skip to content
Chapter 05 of 07 · 2 lessons · ~19 min

Responsive and Reusable CSS

Make your pages look right on every screen with media queries, and keep your CSS easy to change with variables.

YOUR PROGRESS0%
/ Lessons in this chapter
13
Responsive Design With Media Queries How to make one website look great on phones, tablets and desktops with media queries. Coming soon
14
CSS Variables (Custom Properties) How to store colors, fonts and spacing in CSS variables, so you can redesign a whole site by changing a few lines. Coming soon

Chapter practice task

Task: Make your portfolio fully responsive with a theme you can recolor in seconds

  1. Write your base styles for phones first.
  2. Add a media query at 768px that switches your services to two columns, and one at 1024px for three.
  3. Move all your colors, fonts and spacing into CSS variables on :root.
  4. Change the brand color variable and check that the whole site updates.
  5. Add a dark mode with prefers-color-scheme.

By the end of this chapter

  • You can write mobile-first media queries and choose sensible breakpoints
  • You can store your design decisions in CSS variables
  • You can add a dark mode with a few lines of CSS

Quick answers for this chapter

What’s mobile-first?

Writing styles for small screens first, then adding media queries for bigger ones.

Are CSS variables the same as Sass variables?

No. CSS variables work in the browser and can change live; Sass variables are replaced when the file is compiled.

How many breakpoints do I need?

Usually two or three. Add one wherever your design starts to look wrong.