Lesson 16 of 18

🌟 Portfolio — Part 1

🎯 Grades 9–12 ⏱ ~45 minutes 🔴 Project

What You'll Build

A hero section with your name, title, and a CTA button
A skills section showing your tech stack as badges
A projects section with cards linking to your work

🌟 Portfolio Builder — Start Here

This is your portfolio starter. Replace the placeholder text with your real info. Edit the colors, skills, and projects. Click Run to preview. Save this file to your computer when you're happy!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Your Name — Portfolio</title>
  <style>
    *{box-sizing:border-box;margin:0;padding:0}
    :root{--primary:#3b82f6;--dark:#0f172a;--text:#1e293b;--gray:#64748b}
    body{font-family:"Segoe UI",sans-serif;color:var(--text)}
    nav{background:var(--dark);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}
    .logo{color:#4ade80;font-weight:800;font-size:1.1rem}
    .hero{background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#fff;text-align:center;padding:5rem 2rem}
    .hero h1{font-size:2.8rem;font-weight:800;margin-bottom:.5rem}
    .hero p{font-size:1.1rem;color:#94a3b8;margin-bottom:1.5rem}
    .btn{background:var(--primary);color:#fff;padding:.7rem 1.8rem;border-radius:8px;text-decoration:none;font-weight:700;display:inline-block}
    section{padding:3rem 2rem;max-width:900px;margin:0 auto}
    h2{font-size:1.6rem;font-weight:800;margin-bottom:1.5rem;color:var(--dark)}
    .skills{display:flex;flex-wrap:wrap;gap:.6rem}
    .skill{background:#dbeafe;color:#1d4ed8;padding:.3rem .9rem;border-radius:20px;font-size:.85rem;font-weight:700}
    .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
    .card{border:1px solid #e2e8f0;border-radius:10px;padding:1.2rem;background:#f8fafc}
    .card h3{margin-bottom:.4rem;color:var(--dark)}
    .card p{color:var(--gray);font-size:.88rem;margin-bottom:.75rem}
    .card a{color:var(--primary);font-size:.85rem;font-weight:700;text-decoration:none}
  </style>
</head>
<body>
  <nav><div class="logo">YourName</div></nav>
  <section class="hero">
    <h1>Hi, I'm <span style="color:#4ade80">Your Name</span> 👋</h1>
    <p>Front-End Developer & Computer Science Student</p>
    <a href="#projects" class="btn">View My Work</a>
  </section>
  <section id="skills">
    <h2>Skills</h2>
    <div class="skills">
      <span class="skill">HTML</span><span class="skill">CSS</span>
      <span class="skill">JavaScript</span><span class="skill">CSS Grid</span>
      <span class="skill">Flexbox</span><span class="skill">Responsive Design</span>
    </div>
  </section>
  <section id="projects">
    <h2>Projects</h2>
    <div class="cards">
      <div class="card">
        <h3>Weather App</h3>
        <p>Fetches real weather data using OpenWeatherMap API.</p>
        <a href="#">View Project →</a>
      </div>
      <div class="card">
        <h3>Quiz Game</h3>
        <p>Interactive multiple-choice quiz with score tracking.</p>
        <a href="#">View Project →</a>
      </div>
      <div class="card">
        <h3>Task Manager</h3>
        <p>Add, complete, and delete tasks. Saves to localStorage.</p>
        <a href="#">View Project →</a>
      </div>
    </div>
  </section>
</body></html>

Quick Check

1. What is the primary purpose of a developer portfolio?

ATo learn HTML and CSS from scratch

BTo showcase your projects and skills to employers and colleges

CTo practice form elements

2. Which CSS feature lets you define colors once and reuse them everywhere?

ACSS classes

BCSS custom properties (variables) with :root

CCSS Grid

3. How many portfolio projects should you aim for?

AAs many as possible, even if unfinished

B3–5 polished, complete projects

COnly one large project

4. What does a hero section typically contain?

AYour full resume

BYour name, title, and a call-to-action button

CA contact form

🌟 Portfolio — Part 1

What You'll Build

What Goes in a Developer Portfolio?

Part 1 Checklist

Project Ideas