Phase 7 · PortfolioModule 30

Capstone Projects

Build a portfolio with six progressively larger, real-world HTML & CSS projects.

What you'll build

This is where it all comes together. Knowledge fades unless you use it — so the capstone is six projects of increasing ambition that turn everything you've learned into a portfolio you can show employers. Build them, deploy them (Module 27), and you're no longer "learning web development" — you're a front-end developer.

How to approach these

Build in the order you learned: semantic HTML first, then base styles, then layout, then responsive polish. Get a rough version working, then improve. Use Git from the first commit, test with the keyboard and a contrast checker, and aim for finished over perfect. A completed, modest project beats an abandoned ambitious one every time.

Project 1 — Personal Profile Card

Beginner

Build a single, polished profile card — avatar, name, bio, and links. It consolidates the fundamentals from Phases 1–3 into your first complete, good-looking component.

Skills you'll apply

Semantic HTMLBox modelColoursTypographyBorders & shadows

Requirements

  • Semantic markup with a heading, image, and links
  • A centred card with padding, a border-radius, and a soft shadow
  • A considered colour palette and readable typography
  • A hover effect on the links or the card
  • Meaningful alt text and sufficient colour contrast

Project 2 — Multi-Section Landing Page

Intermediate

Build a landing page for a product or app — header, hero, features, and footer. This is where semantic structure and Flexbox layout shine.

Skills you'll apply

LandmarksFlexboxButtonsSectionsTransitions

Requirements

  • A semantic layout: header, nav, main sections, and footer
  • A sticky or flex-based navigation bar
  • A hero section with a clear call-to-action button
  • A features row laid out with Flexbox
  • Smooth hover transitions on interactive elements

Project 3 — Responsive Photo Gallery

Intermediate

Create an image gallery that reflows beautifully from one column on mobile to several on desktop — the perfect showcase for CSS Grid and responsive images.

Skills you'll apply

CSS Gridauto-fit / minmaxResponsive imagesaspect-ratiogap

Requirements

  • A grid using repeat(auto-fit, minmax(...)) that reflows on its own
  • Consistent tiles with aspect-ratio and object-fit: cover
  • Responsive images with proper alt text
  • A hover effect (zoom or overlay) on each item
  • Looks great from 320px to widescreen

Project 4 — Accessible Contact Form

Advanced

Build a contact form that's a pleasure to use and works for everyone — the true test of forms, validation, and accessibility.

Skills you'll apply

FormsInput typesValidationLabelsARIAFocus styles

Requirements

  • Correct input types with a visible label for every field
  • Built-in validation (required, type, pattern) with helpful messages
  • A logical tab order and clearly visible focus states
  • Sufficient contrast and errors not signalled by colour alone
  • A polished, responsive layout

Project 5 — Themeable Dashboard UI

Advanced

Design a dashboard layout — sidebar, top bar, and a grid of stat cards — with a light and dark theme driven entirely by custom properties.

Skills you'll apply

CSS GridCustom propertiesDark modeLayoutModern CSS

Requirements

  • A full-page Grid layout: sidebar, header, and main content area
  • A responsive grid of cards or widgets
  • A complete colour system built from custom properties
  • A working light/dark theme via a data-theme attribute
  • Modern touches: clamp() type, aspect-ratio, and transitions

Project 6 — Complete Multi-Page Portfolio Site

Expert

The grand finale: a real, multi-page portfolio site — home, projects, and contact — that ties every phase together and genuinely belongs online with your name on it.

Skills you'll apply

EverythingMulti-pageResponsiveAccessibilityPerformanceDeployment

Requirements

  • Multiple linked pages sharing a consistent header and footer
  • Fully responsive, mobile-first layouts throughout
  • Semantic, accessible markup that passes a Lighthouse audit
  • Optimised images and fast load performance
  • Featured projects (your first five capstones!) with descriptions
  • Deployed live on GitHub Pages, Netlify, or Vercel

🎓 Graduation

If you've made it here — and built even a couple of these projects — take a moment. You started not knowing what a tag was, and now you can structure semantic pages, style them with confidence, build responsive layouts with Flexbox and Grid, animate, theme, and make it all accessible and fast. You can put real websites on the internet. That is a genuinely valuable skill, and you earned it.

Key takeaways

  • You've covered all 30 modules across 7 phases — from how the web works to deploying a real site.
  • Put every capstone project online — a live, linkable portfolio is worth more than any certificate.
  • Keep building. Real, finished projects are how skills stick and how you land the job.
  • Learn JavaScript next to add interactivity — you now understand the foundation it builds on.

Where to go from here

Your next step is JavaScript, the third pillar of the web — it turns your beautiful static pages into interactive applications. After that, a framework like React builds directly on everything you now know. You've built the foundation; everything else stands on it.

Thank you for learning with MasterCoding. This is the beginning, not the end — now go build something you're proud of and put it online. 🚀

← PreviousModule 29Building a Complete Responsive Website