Step 1: Plan and write the HTML

In this project you will build a complete, responsive personal portfolio page with a project grid, a dark mode switch and a validated contact form. Everything runs in the result panel, and each step shows the whole page so far, so you can see exactly what changed.

Start with structure, not looks. A good page begins as meaningful HTML: a header with the name and navigation, a main with one section per topic, and a footer. Use the right elements (nav, article, section) so screen readers and search engines understand the page, and give each section an id so the navigation links can jump to it.

Examplehtml

<style>
:root { --bg: #ffffff; --fg: #1f2330; --accent: #0b6b4a; --card: #f1f3f5; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; background: var(--bg); color: var(--fg); }
header { background: var(--accent); color: #fff; padding: 28px 20px; text-align: center; }
header h1 { margin: 0; font-size: 2rem; }
nav { margin-top: 12px; }
nav a { color: #fff; margin: 0 10px; font-weight: 600; }
main { max-width: 860px; margin: 0 auto; padding: 20px; }
h2 { border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: 2px; }
footer { text-align: center; padding: 20px; color: #5b6270; }
</style>
<header>
  <h1>Ada Lovelace</h1>
  <p>Front-end developer in London</p>
  <nav aria-label="Main">
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <section id="about">
    <h2>About me</h2>
    <p>I build fast, friendly websites and I love teaching others how the web works.</p>
  </section>
  <section id="projects">
    <h2>Projects</h2>
    <article><h3>Weather app</h3><p>A small app that shows the forecast.</p></article>
    <article><h3>Recipe finder</h3><p>Search recipes by ingredient.</p></article>
    <article><h3>Quiz game</h3><p>Test your web knowledge.</p></article>
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <p>Say hello: ada@example.com</p>
  </section>
</main>
<footer><small>&copy; 2026 Ada Lovelace</small></footer>

Open in editor »

Run it: it is plain, but it already works and the links jump to each section. Change the name and the three projects to your own.

Quick check

Why use elements like nav, main and article instead of only div?

They give the page meaning for screen readers and search enginesThey load fasterThey are required by browsers

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.