Web Development Project
Personal Portfolio Website
A portfolio site is the highest-leverage beginner web project because every other project links to it and every employer opens it. It is also small enough to get genuinely right — semantic markup, a responsive layout, real accessibility and a fast load are all achievable, and all visible.
The brief
Build a site that presents who you are and what you have built. It must work on a phone, be usable with a keyboard and a screen reader, load fast on a slow connection, and live at a URL you can put on a CV.
What it demonstrates
Attention to craft. This is the one project reviewers judge on quality rather than complexity, because they experience it directly.
What "done" looks like
Build all of these and the project is finished. Anything past that is in the stretch goals.
- A one-line statement of who you are, above the fold
- Three or four projects, each saying what it demonstrates
- Working links to live demos and source
- A responsive layout that works from 320px upward
- Keyboard navigable, with correct heading order and contrast
- Deployed at a URL you can put on a CV
How to build it
- 1
Write the content first
Decide what it says before how it looks. A beautiful site with nothing to say is the most common failure here.
- 2
Mark it up semantically
header, nav, main, section, footer, and headings in order. This is what screen readers and crawlers both read.
- 3
Lay it out
Flexbox and grid, mobile-first. Add breakpoints where the design breaks, not at arbitrary device widths.
- 4
Make it accessible
Tab through it with the mouse untouched. Check contrast ratios. Give every image a real alt or an empty one.
- 5
Optimise the loading
Compress images, serve modern formats, self-host fonts. This is the page a reviewer will run Lighthouse on.
- 6
Add metadata
Title, description, favicon and an Open Graph image, so the link looks right when someone shares it.
- 7
Deploy it
A free host and, ideally, your own domain. Then check it on a real phone rather than a resized browser window.
Once it works
Only after the definition of done is met. Half-finished ambition reads worse than a small finished thing.
- Add a blog powered by your own static site generator
- Add a dark mode that respects the system preference
- Rebuild it in Next.js once the plain version is solid
Frequently Asked Questions
Should I use a framework?
Not for the first version. Plain HTML and CSS force you to learn layout and semantics rather than letting a template hide them, and a static site is faster than anything a framework will give you here. Rebuild it in Next.js later if you want the practice.
What actually belongs on it?
Who you are in one sentence, three or four projects with what each demonstrates, a way to contact you, and a link to your code. Skip the skill-percentage bars — nobody believes "JavaScript 85%", and they signal inexperience.
Does accessibility matter on a personal site?
More than anywhere, because it is the one site a reviewer will inspect. Keyboard navigation, real contrast ratios and correct heading order take an afternoon and are immediately visible to anyone who knows to check.