Back to CSS for JavaScript Developers: Make It Pretty (and Fast)

Responsive Design: Media Queries to the Rescue

There was a time when I proudly launched a site, only to check it on my phone and see… chaos. Overlapping text, buttons the size of pepper flakes, and layouts that looked like a ransom note. That was my wake-up call: just hoping something looks good on mobile isn’t a strategy. It’s a gamble. In this lesson, we’ll dive into responsive design—the real deal, not just squishy layouts. We’ll talk about mobile-first CSS, breakpoints that make sense, and how to make sure your Projects page (and every page after it) works beautifully on screens of all sizes.

Mobile-First: The Modern Way to Design

Here’s the truth: most users are not visiting your site on a 27-inch iMac. They’re on phones, tablets, and tiny laptops. So designing your site to start small and scale up just makes sense.

Mobile-first design means writing base styles that look good on the smallest screens, then layering on styles for larger screens using media queries.

css
1
2
3
4
          .project-card {
  padding: 1rem;
  font-size: 1rem;
}

Then when the screen gets wider:

css
1
2
3
4
5
6
7
          @media (min-width: 768px) {
  .project-card {
    display: flex;
    padding: 2rem;
    font-size: 1.2rem;
  }
}

Notice how the @media query adds to the base. This keeps your styles clean and scalable.

Why This Matters

I used to do desktop-first CSS. Then I’d bolt on media queries like duct tape. But it was always messy. Mobile-first forces you to get lean, tight, and focused up front—and that discipline pays off.

Breakpoints & Media Queries: The Secret Sauce

Let’s talk breakpoints. These are screen widths where your layout needs to adjust. They’re not magic numbers—they depend on your design. But here are some solid, common ones to start with:

css
1
2
3
4
5
6
7
8
9
10
11
          /* Small phones */
@media (max-width: 480px) {}

/* Phones to tablets */
@media (min-width: 481px) and (max-width: 768px) {}

/* Tablets to small laptops */
@media (min-width: 769px) and (max-width: 1024px) {}

/* Desktops */
@media (min-width: 1025px) {}

Use min-width for mobile-first design. You're saying: "Once the screen is at least this wide, do this."

Also, keep media queries close to the components they affect. Some developers still separate them into different files, which is fine in theory, but in practice? You’ll go mad trying to trace styles across 12 files. Keep related code together unless there’s a very good reason not to.

For a deeper dive into real-world media query strategy, check this external guide on CSS breakpoints.

Let's Make It Responsive: Your Projects Page on Any Device

Let’s bring our Projects page into the 2020s. It currently stacks all projects in a column. Cool on mobile. Sad on desktop. Let’s fix that with Grid + media queries.

HTML

html
1
2
3
4
5
6
7
8
          <section class="projects">
  <h2>Projects</h2>
  <div class="projects-grid">
    <article class="project-card">JS Calculator</article>
    <article class="project-card">DOM Game</article>
    <article class="project-card">API Explorer</article>
  </div>
</section>

CSS

Start mobile-first:

css
1
2
3
4
5
          .projects-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

Then make it a multi-column grid at wider sizes:

css
1
2
3
4
5
6
7
8
9
10
11
          @media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

This is the real magic: the layout adapts. You don’t have to rewrite your HTML. You don’t have to fight it. The grid grows with the screen.

Also worth noting: test at every step. Don’t assume your layout works on someone else’s screen just because it works on yours. Resize your browser, test on real devices, and yes—check that weird vertical iPad mode too.

What’s Next?

You’ve got the layout working across screen sizes. But now it’s time to focus on readability—the thing that actually makes users want to stay on your site. Up next: we’re talking fonts, spacing, and line-height in Typography and Spacing That Doesn’t Drive Users Crazy.