Project: A Portfolio Page
Time to put everything together. In this project you'll build a complete, accessible, responsive one-page portfolio: a header with navigation, an introduction, a projects grid, a skills table, a contact form and a footer. It uses most of what this course has covered, with a small amount of CSS to make it presentable.
The finished page
Read through the code, explore the result, then make it your own — change the name, the projects and the colours.
What this page demonstrates
| Feature | Where | Lesson |
|---|---|---|
| Complete document structure and meta tags | <head> | 03, 34, 35 |
| Skip link and landmarks | Top of <body>, header/nav/main/footer | 24, 44 |
| Heading outline | One <h1>, section <h2>s, card <h3>s | 06 |
| Navigation as a list of links | <nav> | 10, 18 |
| Images with alt text, dimensions and lazy loading | Intro and project cards | 12, 45 |
| Articles inside a list | Projects grid | 18, 24 |
| Accessible table with caption, scopes and meters | Skills | 19, 30 |
| Labelled form with autocomplete and validation | Contact | 26–32 |
| Responsive layout with Grid and a media query | <style> | 25, 43 |
| Visible focus styles | CSS | 44 |
Details worth noticing
- The project images use
alt=""because the heading and description next to them already say what each project is; describing the screenshot would just repeat it. - Each "View case study" link has visually hidden extra text, so a screen-reader user listing links hears "View case study for Café Lisboa" instead of three identical links.
- The skills caption is visually hidden but still announced, giving the table a name.
- Sections use
aria-labelledbyto take their heading as their accessible name, making them navigable regions.
Challenges
- Make it yours — your name, a real photo with good alt text, and your own projects.
- Dark mode — add a
@media (prefers-color-scheme: dark)block that swaps the CSS variables (lesson 43). - Project details — wrap each project's longer description in
<details>(lesson 39). - Responsive images — add
srcsetandsizesto the project images (lesson 13). - Social card — add Open Graph tags so the page previews nicely when shared (lesson 35).
- Publish it — save the page as
index.html, then deploy it free with GitHub Pages, Netlify or Cloudflare Pages (lesson 02). - Audit it — run it through the W3C validator and Lighthouse, and fix anything they report (lesson 46).
What next?
- Test yourself with the exercises and the quiz.
- Learn to style pages properly in the CSS course.
- Add interactivity with the JavaScript course.