Skip to main content

Phase 8 Exercises: Capstone Projects 🏆

Mentor's Note: This is where everything comes together. These capstone projects are designed to be portfolio-ready — you'll build real websites that demonstrate your mastery of semantic HTML, accessibility, SEO, forms, and multimedia. Take your time and make them perfect!

📍 Prerequisites​

Before attempting these exercises, complete these lessons:

🎯 Exercise Flow​

🔰 Starter Challenge: Personal Portfolio Homepage​

Title​

Plan and Build a Personal Portfolio Homepage

Description​

Design and build a personal portfolio homepage using semantic HTML. Plan the page structure first (wireframe or outline), then implement it with proper HTML5 semantic elements. Include a hero section with your name and tagline, a skills section, a projects showcase section with placeholder cards, and a contact section with a simple form. This is your professional web presence — make it count!

Learning Objectives​

  • Plan a page layout before writing any code (wireframing)
  • Use semantic HTML5 elements: <header>, <nav>, <main>, <section>, <footer>
  • Create a hero section with heading, subtitle, and call-to-action
  • Build a project cards section with images and descriptions
  • Implement a basic contact form with name, email, and message fields
  • Add smooth navigation with anchor links

Expected Output​

A browser page showing:

  • A <header> with your name/logo and navigation links
  • A hero <section> with a main heading, tagline, and CTA button placeholder
  • A skills <section> listing your technical skills with icons or badges
  • A projects <section> with at least 3 project cards (image, title, description)
  • A contact <section> with a form (name, email, message fields)
  • A <footer> with copyright and social links
  • Smooth scrolling between sections via anchor links
  • Clean, indented, and well-commented HTML

⭐ Medium Challenge: Multi-Page Business Website​

Title​

Create a Multi-Page Business Website

Description​

Build a complete multi-page website for a small business (real or fictional). Create at least 4 pages: Home, About, Services, and Contact. Use consistent navigation across all pages, a contact form on the Contact page, a services table on the Services page, and company information on the About page. Link all pages together with a shared navigation bar.

Learning Objectives​

  • Plan and structure a multi-page website project
  • Create a consistent navigation header used across all pages
  • Build a Home page with hero section, value props, and testimonials
  • Build an About page with company history, team section, and mission
  • Build a Services page with a pricing or services table
  • Build a Contact page with a functional form (action="#" for now)
  • Ensure consistent footer with copyright and links across all pages

Expected Output​

A multi-page website with:

  • Home page: Hero banner, 3 value proposition sections, testimonial block
  • About page: Company story, team member profiles (images + names + roles)
  • Services page: Description of services, a pricing/services table with proper structure
  • Contact page: Contact form (name, email, subject, message), address, phone number
  • Each page has the same navigation header and footer
  • Navigation links correctly connect all 4 pages
  • Semantic HTML throughout (no <div> soups)
  • A sitemap.html or simple text sitemap showing the site structure

🏆 Hard Challenge: Full Production-Ready Website​

Title​

Build a Full Website with Semantic HTML, OG, JSON-LD, Accessible Forms, Responsive Images, and Lighthouse > 90

Description​

Create a complete, production-ready website that combines everything you've learned. Build a multi-page site (Home, Blog, Services, Contact) with: semantic HTML5 structure, Open Graph and Twitter Card meta tags, JSON-LD structured data (Organization + Article schema), accessible forms with ARIA attributes, responsive images using srcset and <picture>, performance optimizations (lazy loading, preconnect), and a target of 90+ on all Lighthouse categories.

Learning Objectives​

  • Combine all Phase 6 and Phase 7 skills into a single project
  • Implement responsive images with srcset, sizes, and <picture> element
  • Add JSON-LD for Organization (homepage) and Article (blog) schemas
  • Implement accessible forms with ARIA attributes and validation
  • Use loading="lazy" and fetchpriority for image optimization
  • Achieve 90+ on Lighthouse Performance, Accessibility, Best Practices, and SEO
  • Create a professional project README and portfolio presentation

Expected Output​

A complete website with:

  • 4+ pages: Home, Blog (with at least 2 article pages), Services, Contact
  • Semantic HTML5: Correct use of header, nav, main, article, section, aside, footer
  • SEO meta tags: Title, description, OG tags, Twitter Cards on every page
  • JSON-LD: Organization schema on homepage, Article schema on blog pages
  • Accessibility: ARIA landmarks, labels, roles; proper heading hierarchy; alt text on all images
  • Responsive images: srcset + sizes on hero images, <picture> for art direction if needed
  • Performance: Lazy loading, preconnect fonts/CDN, optimized image sizes
  • Forms: Accessible contact form with labels, ARIA, validation attributes
  • Lighthouse scores: 90+ in Performance, Accessibility, Best Practices, and SEO
  • A clean project folder structure (pages in subdirectories, shared components)

💡 Tips for Success​

  • Start with a wireframe or site map before writing any code
  • Use a consistent naming convention for your files (e.g., index.html, about/index.html)
  • Validate every page with the W3C Validator before calling it done
  • Test navigation on all pages to ensure no broken links
  • For Lighthouse: run audits in Incognito mode to avoid extension interference
  • Keep a portfolio folder with screenshots of your Lighthouse scores

← Back to HTML Exercises