HTML Capstone Project — Build a Personal Tech Website

What You're Building

A complete personal website for a fictional web developer. The site has a header, navigation, hero section, about section, skills list, projects section, a contact form, and a footer. You will write every line in the Playground's HTML tab, apply all SEO and accessibility best practices, and verify your work in the HTML Checker until you score 100/100.

This project touches every chapter of the course. Each step below maps to the chapters it practises.

Document Structure Head & Meta SEO Tags Text Tags Links & Media Lists & Tables Forms Semantic Layout Schema & OG Accessibility Best Practices

📖 Project Scenario

Your Brief

You are building a personal website for a web developer named Obed Angel — a fictional full-stack developer based in Koforidua. Obed wants a professional online presence to showcase his skills and projects, and to let potential clients and employers contact him easily.

The website must work without any CSS or JavaScript — it should read as a clear, logical document in plain HTML. Search engines must be able to understand it, and screen reader users must be able to navigate it. When CSS is eventually added, the structure will hold perfectly.

Requirements — What the site must contain

Page Structure

Skip navigation link (first element)
Site <header> with logo and nav
<main> containing all content sections
Site <footer> with copyright

Content Sections

Hero <section> — name, title, tagline
About <section> — bio paragraphs
Skills <section> — list of skills
Projects <section> — 3 project cards
Contact <section> — form

SEO & Social

Complete <head> with all meta tags
Canonical URL
All 5 Open Graph tags
4 Twitter Card tags
Person JSON-LD schema

Accessibility

Skip link at top of body
aria-label on <nav>
aria-current on active nav link
All images with alt text
All form inputs with labels

Media & Links

Profile photo with figure+figcaption
3 project images (lazy-loaded)
External links with noopener
Email and GitHub links
A downloadable CV link

Contact Form

Name, email, subject, message
All inputs labelled
Required fields marked
method="POST"
Submit button with clear text

Which chapters this project uses

CH 01

Document Structure

CH 02

Head & Meta Tags

CH 03

SEO Tags

CH 04

Text Tags

CH 05

Links & Media

CH 06

Lists & Tables

CH 07

Forms

CH 08

Semantic Layout

CH 09

Multimedia

CH 10

Schema & OG

CH 11

Accessibility

CH 12

Best Practices

🎯 Target — your finished page structure

ObedAngel.dev

↑ Annotated wireframe showing the full page layout. Every label shows the HTML element responsible for that section. Build it step by step — each step below maps to a section.

Step-by-Step Instructions

Step 01 of 07 CH 01CH 02CH 03CH 10

Write the Complete <head> Section

Open the Playground → HTML tab and start from scratch. The head section is the foundation — get every tag right before writing a single line of visible content. Tag order matters.

<!DOCTYPE html> — absolute first line
<html lang="en"> — required for SEO and accessibility
Inside <head>: charset first → viewport → title → description → robots → canonical → author
Title: "Obed Angel — Full-Stack Web Developer | Koforidua" (under 60 chars)
Meta description: 150–160 characters describing Obed and his skills
After basic tags: all 5 Open Graph tags (og:type="website", title, description, image, url)
Twitter Card: twitter:card="summary_large_image", title, description, image
Person Schema: <script type="application/ld+json"> with @type: "Person", name, url, jobTitle, sameAs array
Finally: preconnect to Google Fonts, stylesheet link, script with defer

<!-- Person JSON-LD Schema -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Obed Angel",
  "url": "https://ObedAngel.dev",
  "jobTitle": "Full-Stack Web Developer",
  "worksFor": { "@type": "Organization", "name": "Freelance" },
  "sameAs": [
    "https://github.com/Obed",
    "https://linkedin.com/in/Obed"
  ]
}
</script>

✓ HTML Checker → DOCTYPE ✓ · charset ✓ · viewport ✓ · html[lang] ✓ · title length ✓ · meta description ✓ · canonical ✓ · OG tags ✓ · Twitter tags ✓ · Schema ✓

Step 02 of 07 CH 08CH 11

Build the Semantic Page Skeleton

Write the full <body> structure using semantic HTML5 landmarks. No content yet — just the correct container elements in the right order.

First element in body: <a href="#main-content" class="skip-link">Skip to main content</a>
<header> — contains logo link and main navigation
<nav aria-label="Main navigation"> — inside header, contains a <ul> with 5 links: Home, About, Skills, Projects, Contact
Add aria-current="page" to the "Home" link
<main id="main-content"> — all the page sections go inside here
5 empty sections inside main: hero, about, skills, projects, contact — each with an id
<footer> — below <main>, outside it

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <header>
    <a href="/"><strong>Obed.dev</strong></a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="#hero" aria-current="page">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main id="main-content">
    <section id="hero"></section>
    <section id="about"></section>
    <section id="skills"></section>
    <section id="projects"></section>
    <section id="contact"></section>
  </main>
  <footer></footer>
</body>

✓ HTML Checker → Skip link ✓ · Landmark Regions: header · nav · main · footer all detected · aria-label on nav ✓ · aria-current ✓

Step 03 of 07 CH 04CH 05CH 12

Build the Hero and About Sections

Fill in the hero and about sections with real content. Use semantic text tags correctly — not for styling, but for meaning.

Hero section: Inside <section id="hero">, add <h1>Obed Angel</h1> — one H1 per page
A <p> with role/title: use <strong> for "Full-Stack Web Developer"
A profile image: use <figure><img src="..." alt="Obed Angel, web developer, smiling" width="300" height="300"><figcaption>
The profile image is above the fold — do NOT add loading="lazy"
CTA buttons: <a href="#contact">Hire Me</a> · <a href="cv.pdf" download="Obed-Angel-cv.pdf">Download CV</a>
About section: <h2>About Me</h2> then 2–3 paragraphs
Use <strong> for important skills mentioned in the bio, <em> for emphasis, <abbr> for HTML/CSS/PHP/SQL
Include <time datetime="2019-01-01">since 2019</time> for when Obed started coding

✓ HTML Checker → H1 count: exactly 1 ✓ · Alt text on all images ✓ · Headings: H1 → H2 with no skipped levels ✓

Step 04 of 07 CH 06

Build the Skills and Projects Sections

Skills are a list. Projects are a structured collection — each one is a self-contained article. Use the correct HTML elements for each.

Skills section: <h2>Skills</h2> then a <ul> with at least 8 skills as <li> items
Group skills into two sub-lists using nested lists: "Frontend" and "Backend" as <h3> headings — each with its own <ul>
Projects section: <h2>Projects</h2> then 3 <article> cards — one per project
Each project <article> must have: <h3> project name, project image (lazy-loaded, figure+figcaption), a <p> description, and a <ul> of technologies used
Each project must have a link: <a href="https://github.com/..." target="_blank" rel="noopener noreferrer">View on GitHub</a>
Add a skills summary <table> with <caption>, <thead scope="col">, <tbody> — columns: Skill, Level, Years

✓ HTML Checker → Images with alt ✓ · Tables use scope ✓ · Tables have caption ✓ · Heading hierarchy: H1 → H2 → H3 ✓

Step 05 of 07 CH 07CH 11

Build the Contact Form

Inside <section id="contact">, add a contact form. Every input must have a label. No orphaned fields — the HTML Checker will flag them.

<h2>Contact Me</h2> · a short description paragraph
<form method="POST" action="/contact">
Name: <label for="name"> + <input type="text" id="name" name="name" required autocomplete="name">
Email: <label for="email"> + <input type="email" id="email" required autocomplete="email">
Subject: <label for="subject"> + <select id="subject"> with 4 options (Work Enquiry, Collaboration, General, Other)
Message: <label for="message"> + <textarea id="message" name="message" rows="6" minlength="20" required>
Submit: <button type="submit">Send Message</button> — not "Submit"
Below the form: an email link and a GitHub link (external, noopener)

✓ HTML Checker → Form inputs have labels ✓ · Buttons have accessible text ✓

Step 06 of 07 CH 05CH 08CH 09

Complete the Footer & Add Media

Fill in the footer and optionally add multimedia content. The footer must contain useful information — not just a copyright line.

Footer: 3 sections inside <footer> — About blurb, Quick Links nav (aria-label="Footer navigation"), and Contact column
Social links: GitHub + LinkedIn — both external, target="_blank", rel="noopener noreferrer"
Optional multimedia: add a <video> showreel in the hero section OR an <audio> intro in the about section — use <figure><figcaption>, multiple <source> tags, and a <track> if video
Picture element: replace one project image with a <picture> element offering WebP first, then JPEG fallback

✓ HTML Checker → Landmarks: footer ✓ · Multiple navs have aria-labels ✓ · External links: noopener ✓

Step 07 of 07 CH 12

Apply All Best Practices & Run the Final Check

This is the polish step. Go through your entire page and apply every performance and code quality best practice from Chapter 12.

Verify: charset is first inside <head>
Verify: hero image has NO loading="lazy", all below-fold images do
Verify: all images have width and height attributes to prevent layout shift
Verify: script tag has the defer attribute
Add preconnect hints for any external fonts or CDNs
Check every link text — no "click here", "here", or "read more"
Check heading hierarchy — H1 → H2 → H3, zero skipped levels
Add meaningful HTML comments explaining key decisions (why defer, why no lazy on hero, etc.)
Run the HTML Checker — fix everything that is not green until you reach 100/100

✓ HTML Checker → Overall score: 100/100 · Every check is green

✅ You're Done When the HTML Checker Shows All of These

Overall score 100 / 100 — every check is green
DOCTYPE ✓ · charset ✓ · viewport ✓ · html[lang="en"] ✓ · robots ✓ · canonical ✓
Title under 60 chars ✓ · Meta description 150–160 chars ✓
All 5 Open Graph tags ✓ · 4 Twitter Card tags ✓
Person JSON-LD schema present, valid JSON syntax ✓
Heading Map: H1 → H2 → H3 — zero red gap warnings anywhere ✓
Landmark Regions: header · nav · main · footer all detected ✓
Skip navigation link ✓ · aria-current on active nav link ✓ · aria-label on nav ✓
All form inputs labelled ✓ · All buttons have accessible text ✓
All images have alt attributes ✓ · All images have width and height ✓
Tables use scope ✓ · Tables have caption ✓
External links have rel="noopener noreferrer" ✓
Multiple nav elements have distinct aria-labels ✓
The page reads as a clear, logical personal website without any CSS

+ Challenge Extensions — go further

Add a Testimonials Section

Add 3 client testimonials using <blockquote cite="..."> and <cite> for each person's name. Include a <time> element for the date of each review.

Embed a Video Showreel

Add a hero video in <figure><figcaption> with 2 source formats, a poster image, preload="metadata", and a <track> for subtitles. Add a muted autoplay background version too.

Add a Blog Section

Add a "Recent Articles" section. Each article preview is an <article> with H3 heading, excerpt paragraph, <time datetime> publish date, and a "Read More" link with descriptive text.

Add a FAQ Section

Add 5 frequently asked questions using a <dl> description list. Then add a FAQPage JSON-LD schema in the head so Google can show them as accordion results in search.

Advanced Contact Form

Extend the contact form with: radio buttons for project type (fieldset+legend), a budget range dropdown, a file upload for briefs (type="file" accept=".pdf"), and aria-describedby hints on all fields.

Picture Element Gallery

Replace all project images with <picture> elements offering WebP first and JPEG fallback. Add srcset with multiple sizes for responsive images. Add fetchpriority="high" to the hero image.

🚀 Submitting Your Project

When your HTML Checker score reaches 100/100 and you are happy with the result, submit your project for review. Your instructor will check both the code quality and the HTML Checker score.

Save your code — use the Playground's Save button (Pro) or copy it to your computer
Create a GitHub repository called "html-capstone-project"
Upload your file — name it index.html
Enable GitHub Pages — Settings → Pages → Source: main branch → so the page goes live
Submit both links — the GitHub repository URL and the GitHub Pages live URL — in the submission form below

Your project will be reviewed within 2 business days. You will receive feedback directly on your submission.

Open the Playground — Start Building

Write your HTML in the editor, then switch to the HTML Checker tab after each step to verify your progress. Build one step at a time.

⚡ Open Playground → HTML Tab