Projects Section & Cards

The Projects Section

This is the most important section. It's what employers actually look at. Each project card should answer: what is it, what did you build, and where can I see it?

Project card anatomy

<div class="project-card">
  <img src="screenshot.png" alt="Project name">
  <div class="card-body">
    <div class="tags">
      <span>React</span><span>Node.js</span>
    </div>
    <h3>Task Manager App</h3>
    <p>A full-stack todo app with real-time sync.</p>
    <div class="links">
      <a href="https://demo.com">Live Demo</a>
      <a href="https://github.com/...">GitHub</a>
    </div>
  </div>
</div>

How many projects?

3-5 is the sweet spot
Quality over quantity, one great project beats five mediocre ones
Pin your best on top

Getting projects

Build them from this very course!
Clone+extend open source projects
Create tools you personally need

Tasks

Hero Section: First Impressions Projects Section

<!DOCTYPE html>
<html>
<head>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:sans-serif;background:#0d1b2a;color:#e2e8f0;padding:40px 24px;min-height:100vh}
.section{max-width:900px;margin:0 auto}
h2{font-size:1.5rem;font-weight:800;margin-bottom:8px}.sub{color:#64748b;font-size:.88rem;margin-bottom:36px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.card{background:#1e293b;border-radius:14px;overflow:hidden;transition:.2s;border:1px solid #334155}
.card:hover{transform:translateY(-4px);border-color:#00bcd4}
.card-thumb{background:linear-gradient(135deg,#1e293b,#334155);height:160px;display:flex;align-items:center;justify-content:center;font-size:3rem}
.card-body{padding:18px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tag{font-size:.68rem;padding:3px 8px;background:#0f172a;border:1px solid #334155;border-radius:4px;color:#94a3b8;font-weight:600}
h3{font-size:.95rem;font-weight:700;margin-bottom:6px}
p{font-size:.8rem;color:#94a3b8;line-height:1.5;margin-bottom:14px}
.links{display:flex;gap:10px}
.links a{font-size:.78rem;font-weight:700;padding:6px 14px;border-radius:6px;text-decoration:none}
.demo{background:#00bcd4;color:#0d1b2a}
.gh{border:1px solid #334155;color:#94a3b8}
</style>
</head>
<body>
<div class="section">
  <h2>My Projects</h2>
  <p class="sub">Things I've built and shipped</p>
  <div class="grid">
    <div class="card"><div class="card-thumb">✅</div><div class="card-body"><div class="tags"><span class="tag">HTML</span><span class="tag">CSS</span><span class="tag">JavaScript</span></div><h3>Task Manager App</h3><p>Full CRUD task manager with localStorage persistence, filters, and dark mode.</p><div class="links"><a class="demo" href="#">Live Demo</a><a class="gh" href="#">GitHub</a></div></div></div>
    <div class="card"><div class="card-thumb">🛒</div><div class="card-body"><div class="tags"><span class="tag">PHP</span><span class="tag">MySQL</span><span class="tag">CSS</span></div><h3>E-Commerce Store</h3><p>Full-stack shop with cart, checkout, and admin panel. PHP + MySQL backend.</p><div class="links"><a class="demo" href="#">Live Demo</a><a class="gh" href="#">GitHub</a></div></div></div>
    <div class="card"><div class="card-thumb">🌤️</div><div class="card-body"><div class="tags"><span class="tag">JavaScript</span><span class="tag">API</span></div><h3>Weather Dashboard</h3><p>Real-time weather with 5-day forecast using OpenWeather API and geolocation.</p><div class="links"><a class="demo" href="#">Live Demo</a><a class="gh" href="#">GitHub</a></div></div></div>
  </div>
</div>
</body></html>

Preview