General Assembly logo

Capstone Project: Multi-Page Front-End Portfolio

What Is the Capstone?

This capstone asks you to build a simple but professional multi-page portfolio website using HTML and CSS only.

The goal is not to build something large or complex, but to demonstrate that you can:

  • Structure content correctly using semantic HTML
  • Create consistent layouts across multiple pages
  • Apply modular, maintainable CSS
  • Build responsive layouts
  • Follow basic accessibility best practices

This project mirrors a real-world task: creating a small site that could realistically be shared with employers or clients.

Learning Objectives

By completing this capstone, you will demonstrate your ability to:

  • Create multi-page navigation using semantic HTML
  • Apply consistent layout and styling across pages
  • Use Flexbox and/or Grid effectively
  • Implement responsive design with media queries
  • Organize CSS for clarity and reuse
  • Use CSS variables for shared design values
  • Apply basic accessibility best practices

Project Requirements

Site Structure (Required)

Your portfolio must include at least three HTML pages:

  1. Home

    • Introduction / hero section
    • Brief overview of who you are

  2. Projects

    • At least 2 project cards or sections
    • Title, description, and placeholder links

  3. About or Contact

    • About you or a contact form (non-functional is fine)
    • Proper labels if using a form

All pages must share:

  • A consistent header/navigation
  • A consistent footer

Technical Requirements

HTML

  • Use semantic elements (header, nav, main, section, article, footer)
  • Logical heading hierarchy
  • Accessible images (alt text)

CSS

  • External stylesheet (styles.css)

  • Reusable component classes (buttons, cards, layout sections)

  • CSS variables for:

    • Colors
    • Spacing
    • Fonts or font sizes

  • Flexbox and/or Grid for layout

Responsiveness

  • Layout adapts to:

    • Mobile
    • Desktop

  • No horizontal scrolling

  • Navigation remains usable at all sizes

Accessibility (Basic)

  • Sufficient color contrast
  • Visible focus states
  • Labels for form inputs
  • Readable font sizes

File Structure

portfolio/
├── index.html
├── projects.html
├── about.html
├── styles.css
└── assets/
    └── images/

Evaluation Rubric: Multi-Page Portfolio

1. Semantic HTML & Structure

Level Description
Advanced Clear semantic structure across all pages; excellent heading hierarchy
Proficient Mostly semantic with minor structural issues
Developing Some semantic elements used inconsistently
Beginning Little semantic structure

2. Layout & Responsiveness

Level Description
Advanced Layout adapts cleanly across screen sizes
Proficient Responsive with minor layout issues
Developing Partial responsiveness
Beginning Fixed or broken layout

3. CSS Organization & Reuse

Level Description
Advanced Well-organized, modular, reusable CSS
Proficient Mostly organized with some repetition
Developing Limited reuse and organization
Beginning Disorganized or repetitive CSS

4. CSS Variables Usage

Level Description
Advanced Variables used consistently for design values
Proficient Variables used for major values
Developing Minimal or inconsistent usage
Beginning No meaningful variable usage

5. Navigation & Multi-Page Consistency

Level Description
Advanced Navigation works seamlessly across all pages
Proficient Navigation works with minor inconsistencies
Developing Navigation partially implemented
Beginning Pages disconnected or broken links

6. Accessibility & UX

Level Description
Advanced Clear focus states, readable, accessible layout
Proficient Accessibility mostly addressed
Developing Some accessibility considerations
Beginning Accessibility largely ignored

7. Visual Clarity & Polish

Level Description
Advanced Clean, professional, visually consistent
Proficient Clear design with minor issues
Developing Inconsistent spacing or hierarchy
Beginning Cluttered or unclear design

Submission Guidelines

Submit a single folder or GitHub repository containing:

  • All HTML files
  • styles.css
  • Assets folder (if used)

No presentation required.

Final Notes for Students

  • Focus on clarity over complexity
  • Consistency matters more than creativity
  • Pretend another developer will maintain your code
  • If something feels easy to read and change—you did it right