—CSS Series · Post 14: The CSS Capstone
The CSS Capstone
Build It From Scratch
Fourteen posts of CSS knowledge. One build to synthesize it all. No hand-holding — just a brief, a checklist, and everything you've already learned.
💬 "I Want to Know If I Actually Learned This"
There's a difference between following along with a tutorial and being able to build something on your own. The capstone tests the second one. No starter code. No color values provided. No layout given to you. Just a brief, a checklist of what to include, and your blank styles.css.
This is the build that proves it to yourself. Not to a portfolio reviewer, not to an interviewer — to you. The moment you open the result in a browser and it looks like something you designed is the moment the whole series clicks into place.
Build a personal brand landing page for a developer. It should have a navbar, a hero section, a card grid showcasing three "projects" or posts, and a footer. It must be fully responsive and look intentional on mobile and desktop. No frameworks. Pure HTML + CSS.
🧱 The Requirements
Foundation
Typography
Layout
Visual Polish
Responsive
🧱 How to Approach It
Don't open a blank file and start writing CSS. Start with a plan. The four phases below turn an intimidating blank canvas into a manageable sequence.
- Define all CSS variables
- Choose your color palette
- Set spacing scale
- Pick your fonts
- Write all HTML first
- Use semantic elements
- Add all classes — no IDs
- No CSS yet
- Reset + body first
- Layout containers next
- Components last
- Responsive at the end
- Add shadows and transitions
- Add hover states
- Add breakpoints
- Test in DevTools
🧱 The Starter Scaffold
Only the bare HTML structure — no class names filled in, no CSS written. Everything else is yours to build.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name — Developer</title>
<!-- Google Fonts link goes here -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<div>YourBrand</div>
<ul>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="hero">
<span>Frontend Developer</span>
<h1>Your Name Here</h1>
<p>A one-sentence description of what you build and who you build it for.</p>
<a href="#work">See My Work</a>
</section>
<section id="work">
<h2>Projects</h2>
<div> <!-- card grid -->
<article>
<span>CSS</span>
<h3>Project One</h3>
<p>What this project does and what you learned building it.</p>
<a href="#">View →</a>
</article>
<article>
<span>HTML + CSS</span>
<h3>Project Two</h3>
<p>What this project does and what you learned building it.</p>
<a href="#">View →</a>
</article>
<article>
<span>Responsive</span>
<h3>Project Three</h3>
<p>What this project does and what you learned building it.</p>
<a href="#">View →</a>
</article>
</div>
</section>
<footer>
<span>© 2025 Your Name</span>
<div>
<a href="#">GitHub</a>
<a href="#">LinkedIn</a>
</div>
</footer>
</body>
</html>Open styles.css and write this first, before anything else. It sets the foundation that every other rule builds on. Once your tokens and reset are in place, the rest flows naturally section by section.
/* ════════════════════════
1. TOKENS — fill these in
════════════════════════ */
:root {
--bg: /* your background color */;
--surface: /* card/component background */;
--text: /* primary text color */;
--muted: /* secondary/dimmed text */;
--accent: /* your brand color */;
--glow: /* rgba version of accent at ~12% */;
--font-body: /* your chosen Google Font */;
--radius: 12px;
--transition: 0.3s ease;
}
/* ════════════════════════
2. RESET
════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.75;
}
/* Continue building section by section... */🧱 Full Series Recap
Every tool you used on this build — trace it back to the post it came from. This is the point where everything stops being 14 separate concepts and becomes one unified skill set.
💛 You Did It. All of It.
Think about where you started. CSS felt like a guessing game — styling something and hoping for the best, fighting with spacing you didn't understand, centering things by accident, adding !important and hoping the bleeding stopped.
Now you have a system. You know what the cascade is and how to win it. You understand why spacing is weird and how to make it consistent. You can build a layout in Flexbox or Grid and choose correctly between them. You can make things move, fade, lift, and glow — all in CSS, no JavaScript.
You know how to debug. How to organize. How to name things so future you isn't terrified of the stylesheet. You know how to make it work on a 320px phone and a 2560px monitor simultaneously.
That's not decoration. That's engineering. That's the full presentation layer of the web — understood, controlled, and yours.
Build the capstone. Share it. It counts.
