Lesson 40 of 55 · HTML
Final Project – Build an Accessible Portfolio Site
Duration: 15 min
Project Overview
Your capstone ties together everything you’ve learned. Goal: Create a personal portfolio that showcases projects, uses semantic HTML, is fully responsive, SEO‑friendly, and meets WCAG AA accessibility standards.
Core requirements
- Home page – Hero section, navigation (
<nav>), brief intro. - Projects page – Grid of
<article>cards; each card opens a modal dialog (ARIArole='dialog') with project details. - Contact page – Form with validation, custom file upload, and a hidden honeypot field for spam protection.
- Responsive layout – Flexbox for the header/footer, CSS Grid for the projects grid; mobile‑first breakpoints.
- Performance – Lazy‑load images, preload critical CSS, implement CSP, and use
loading='lazy'on videos/iframes. - SEO – Unique
<title>, meta description, Open Graph tags, canonical URL, JSON‑LD breadcrumb markup. - Accessibility –
langattribute, ARIA landmarks, live region for form‑submission status, keyboard‑only navigation, focus management for modals.
Suggested folder structure
portfolio/
├─ index.html
├─ projects.html
├─ contact.html
├─ assets/
│ ├─ images/
│ ├─ css/
│ │ └─ styles.css
│ └─ js/
│ └─ main.js
└─ README.md
Milestones
| Milestone | Deliverable | Approx. time |
|---|---|---|
| 1 | Skeleton markup with semantic elements (<header>, <main>, <footer>). | 2 h |
| 2 | Responsive layout (Flexbox/Grid) with breakpoints. | 3 h |
| 3 | Form with native validation, custom error messages, and a honeypot field. | 4 h |
| 4 | Performance enhancements (lazy loading, CSP, preload). | 2 h |
| 5 | SEO & accessibility audit using Lighthouse and axe. | 2 h |
| 6 | Final polish, deploy to GitHub Pages or Netlify, write documentation. | 2 h |
Evaluation checklist
- ✅ Semantic HTML (
<header>,<nav>,<main>,<section>,<article>,<footer>) - ✅ Responsive design (mobile‑first, no horizontal scroll)
- ✅ All images have meaningful
alttext - ✅ Form validation works natively and with custom JavaScript
- ✅ CSP header present and does not block required resources
- ✅ SEO meta tags (
title,description, Open Graph, JSON‑LD) - ✅ Accessibility:
langattribute set- ARIA landmarks (
role='navigation',role='main') - Live region for form submission status
- Keyboard‑only navigation works (Tab order, focus outlines)
- Modal dialog traps focus and restores it on close
- ✅ Performance thresholds met (LCP < 2.5 s, CLS < 0.1) on a simulated 3G connection.
Tip: Deploy early to a GitHub Pages preview branch; run Lighthouse on each commit to catch regressions.