Checkpoint 1.2 · CSS Styling

Style & Responsiveness

What I Built

Transformed the bare HTML skeleton into a styled, responsive site. Introduced a full dark theme using CSS custom properties, built page layouts with flexbox, and made everything work on mobile using a mobile-first media query approach.

What I Learned

CSS custom properties (variables) are a game-changer — change one value, everything updates.
Mobile-first means writing base styles for small screens, then using min-width media queries to enhance for larger ones. I had it backwards at first.
Flexbox makes centering things actually make sense. align-items: center and justify-content: center became my best friends.
CSS Grid is better than flexbox when you have two dimensions to manage — rows and columns together.

Code highlight — CSS custom properties and mobile-first media query

:root {
  --bg-deep:      #0f0f1a;
  --accent-purple:#8b84ff;
  --text-primary: #e0e0ff;
}

/* Base: mobile */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Tablet and up */
@media (min-width: 48rem) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Challenge & Fix

Problem: My nav looked fine on desktop but broke completely on mobile — links overflowed horizontally and were unclickable.

Fix: Rewrote the nav using flexbox with flex-wrap: wrap for the interim, then later upgraded to a proper hamburger menu with a JavaScript toggle. Learned that responsive design is a process, not a one-time decision.

Skills Gained

CSS custom properties Flexbox CSS Grid Mobile-first design Media queries Dark theme