3 Hours advanced
17. Final Project: Portfolio
Capstone
🏆 Final Project — Build Your Portfolio
You now have the complete frontend engineering toolkit. It's time to prove it. You're going to build a real, deployable portfolio website from scratch — the kind that gets you hired.
🎯 Requirements Checklist
- ✅ Semantic HTML structure (
header,main,section,footer) - ✅ Navigation bar using Flexbox with links
- ✅ Hero section with centered text using Flexbox (
height: 100vh) - ✅ Projects section using CSS Grid (3 columns)
- ✅ Card hover animations using CSS Transitions
- ✅ Responsive breakpoint — grid collapses to 1 column on mobile
- ✅ Google Font loaded in the head
- ✅ CSS Variables used for colors and spacing
🚀 Complete Starter Template
<!-- Paste this into index.html and start customizing -->
<style>
:root {
--primary: #00A3FF;
--dark: #0a0a1a;
--text: #ccc;
--card-bg: #1a1a2e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--dark); color: var(--text); font-family: sans-serif; }
/* NAVBAR */
nav { display:flex; justify-content:space-between; align-items:center; padding:0 40px; height:60px; border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; background:var(--dark); z-index:100; }
.logo { color: var(--primary); font-weight:900; font-size:20px; }
.nav-links { display:flex; gap:24px; list-style:none; }
.nav-links a { color:#aaa; text-decoration:none; font-size:14px; transition:color 0.2s; }
.nav-links a:hover { color:white; }
/* HERO */
.hero { height:300px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:40px; }
.hero h1 { font-size:clamp(28px,5vw,56px); font-weight:900; color:white; }
.hero p { color:#888; margin:12px 0 24px; font-size:16px; }
.cta { background:var(--primary); color:white; border:none; padding:12px 28px; border-radius:8px; font-size:16px; font-weight:bold; cursor:pointer; transition:all 0.3s; }
.cta:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,163,255,0.3); }
/* PROJECTS GRID */
.projects { padding:60px 40px; }
.projects h2 { color:white; font-size:28px; margin-bottom:24px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:var(--card-bg); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:24px; transition:all 0.25s; cursor:pointer; }
.card:hover { transform:translateY(-6px); border-color:var(--primary); box-shadow:0 20px 40px rgba(0,0,0,0.3); }
.card h3 { color:white; margin-bottom:8px; }
.card p { color:#777; font-size:14px; line-height:1.6; }
.tag { display:inline-block; background:rgba(0,163,255,0.15); color:var(--primary); border-radius:20px; padding:3px 10px; font-size:11px; font-weight:bold; margin-top:12px; }
/* RESPONSIVE */
@media (max-width:768px) {
.grid { grid-template-columns:1fr; }
nav { padding:0 20px; }
}
</style>
<nav>
<div class="logo">⚡ YourName</div>
<ul class="nav-links">
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section class="hero">
<h1>Hi, I'm <span style="color:var(--primary)">Alex</span> 👋</h1>
<p>Frontend Developer · I build fast, beautiful web interfaces.</p>
<button class="cta">View My Work ↓</button>
</section>
<section class="projects" id="projects">
<h2>Projects</h2>
<div class="grid">
<div class="card"><h3>E-Commerce UI</h3><p>A full product listing page with cart functionality.</p><span class="tag">HTML · CSS</span></div>
<div class="card"><h3>Portfolio Site</h3><p>This exact portfolio you're looking at right now.</p><span class="tag">CSS Grid</span></div>
<div class="card"><h3>Dashboard UI</h3><p>Analytics dashboard with charts and responsive layout.</p><span class="tag">Flexbox</span></div>
</div>
</section>
Go live in 30 seconds: Create a free account at Netlify.com, drag your project folder into their dashboard, and your portfolio will be live on a real URL instantly — for free.
Knowledge Check
Ready to test your understanding of 17. Final Project: Portfolio?