Your portfolio (HTML only)
Artifact: A static one-page portfolio in raw HTML
1. Principle
Chapter 1 is done. The artifact is a complete, semantic, accessible portfolio page in raw HTML — with no CSS yet.
It will look bad. That is intentional and important.
The HTML must hold up before CSS arrives. Strip the styles from any well-built website and the page should still be readable — content first, presentation later. Building HTML-first is how you avoid sites that look great but are inaccessible, can't be searched, and break when CSS fails to load.
This unit is the assembly. Everything you have written in 1.0 through 1.9 comes together into one file.
2. Do (you try)
Your index.html should now have all the pieces. If you've been following along, you have most of it. This is the canonical version — diff yours against it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Name — Portfolio</title>
<meta name="description" content="Portfolio of Your Name. Developer building things on the web.">
<meta property="og:type" content="website">
<meta property="og:title" content="Your Name — Portfolio">
<meta property="og:description" content="Portfolio of Your Name. Developer building things on the web.">
<meta name="twitter:card" content="summary">
</head>
<body>
<header>
<h1>Your Name</h1>
<nav>
<a href="#about">About</a> ·
<a href="#projects">Projects</a> ·
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About</h2>
<img src="profile.jpg" alt="Photo of Your Name" width="200" height="200">
<p>
One or two sentences about you. What you do, what you're learning, what you're building.
Find me on
<a href="https://github.com/your-username" target="_blank" rel="noopener noreferrer">GitHub</a>.
</p>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
<li>
<strong>Project one</strong> —
What it does in one sentence.
<a href="https://github.com/you/project-one" target="_blank" rel="noopener noreferrer">repo</a>
</li>
<li>
<strong>Project two</strong> —
What it does in one sentence.
<a href="https://github.com/you/project-two" target="_blank" rel="noopener noreferrer">repo</a>
</li>
<li>
<strong>Project three</strong> —
What it does in one sentence.
<a href="https://github.com/you/project-three" target="_blank" rel="noopener noreferrer">repo</a>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email me at <a href="mailto:you@example.com">you@example.com</a>, or use the form.</p>
<form>
<p>
<label for="name">Your name</label><br>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Your email</label><br>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="message">Message</label><br>
<textarea id="message" name="message" rows="4" required></textarea>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
</section>
</main>
<footer>
<p>© Your Name 2026</p>
</footer>
</body>
</html>Compare to your file. Fix any drift. Save and refresh.
3. Verify (how you know)
Run the Chapter 1 self-rubric against your file. Be honest — partial credit doesn't help anyone.
Chapter 1 finish-line checklist
If you score 10/10, you have a real portfolio in HTML. Chapter 2 makes it look good.
If you score less, the items you missed are the lessons that didn't stick. Re-do the relevant unit before moving on. There is no benefit to faking the count — every rubric item maps directly to a habit that will trip you up later if skipped.
4. Reference
Locked. Try it yourself first.