Project goal
The capstone is a complete portfolio website showing your ability to structure content, design a responsive interface, add useful interaction, and prepare a project for launch. It should feel like a real project for a defined audience rather than a collection of unrelated effects.
Required experience
Include a hero, about section, skills section, project cards, contact form, responsive navigation, accessible interactions, and footer. Use real project summaries, clear calls to action, and a visual system that stays consistent across narrow and wide layouts.
Planning
Define your audience, main call to action, projects, content hierarchy, and visual direction before coding. Write a short brief: who should use the portfolio, what should they learn about you, and what should they do next? That brief should guide which content belongs on the page.
Build in milestones
Start with semantic HTML. Add global CSS variables and reusable components. Build responsive rules. Add JavaScript only where it improves the experience. Run an accessibility review, inspect performance, and publish the site. Commit after each meaningful milestone so your project history records how the work developed.
Evidence of quality
A strong capstone includes more than a live page. Add a README describing the purpose, features, technical choices, accessibility work, setup steps, and deployment URL. Keep a short testing checklist and record one improvement you made after testing the deployed version.
Publishing
Deploy the site and verify the live URL. A deployed project is more valuable than a folder of files because other people can view it. Check every navigation link, interaction, form message, image, and asset path after deployment.
Example code
const projects = [
{ title: "Bakery Landing Page", category: "HTML CSS", featured: true },
{ title: "Task Tracker", category: "JavaScript", featured: true },
{ title: "Responsive Portfolio", category: "Capstone", featured: false }
];
const featured = projects.filter((project) => project.featured);
console.table(featured);Applied example: capstone release checklist
A concise checklist makes quality visible and prevents the final review from becoming guesswork.
Content
[ ] Real project summaries replace placeholder text
[ ] Main call to action is clear
Responsive layout
[ ] Tested at narrow, medium, and wide widths
[ ] No horizontal scrolling
Accessibility
[ ] Keyboard navigation works
[ ] Labels, alt text, focus, and status messages reviewed
Release
[ ] Console is clean
[ ] Live URL and asset paths tested
[ ] README includes the deployed linkGuided example: how to approach this lesson
Use these steps as a practical build process. The goal is not just to read the concept, but to know exactly how to apply it in your own page.
Step 1: Define the goal
Decide who the portfolio is for and what action visitors should take, such as viewing projects or contacting you.
Step 2: Build the structure
Create the HTML for all sections before spending time on detailed styling.
Step 3: Add polish carefully
Use responsive layout, accessible controls, optimised images, and useful JavaScript interactions.
Step 4: Review and deploy
Check every page, fix errors, deploy the site, and test the live URL.
More examples
Compare these examples carefully. The improved version shows the kind of code pattern you should aim for when building your own project.
Capstone section plan
1. Header and navigation
2. Hero introduction
3. About section
4. Skills section
5. Project cards
6. Contact form
7. FooterThis gives the build a clear order.
Project card data
const projects = [
{
title: "Bakery Landing Page",
tools: ["HTML", "CSS"],
summary: "A responsive landing page for a local business."
}
];Planning project data makes it easier to render consistent cards with JavaScript.
Before moving on
Use this checklist to make sure you understand the lesson well enough to apply it without copying blindly.
- Does the portfolio use real content instead of placeholders?
- Does it work on mobile and desktop?
- Can users contact you easily?
- Is the final version deployed and tested?
Common mistakes to avoid
- Starting with colours before content.
- Adding effects that do not help users.
- Using placeholder text in a final portfolio.
- Forgetting to test the deployed version.
Practice task
Build and deploy a complete portfolio that demonstrates the full course pathway.
Required outcome
- Create a short audience brief and a section plan before coding.
- Build semantic HTML, reusable CSS components, responsive layouts, three real project cards, and a validated contact form.
- Add at least one useful JavaScript interaction, such as responsive navigation, project filtering, or an FAQ accordion.
- Review keyboard access, focus states, labels, alt text, form feedback, console output, asset sizes, and deployed routes.
- Use Git commits throughout the build and publish a README with your deployment URL and key decisions.
Stretch goal: Ask another person to use the deployed site without instructions, record one point of friction, and improve it.