PNL Learn

Web Design Capstone Projects

Design, build and publish a portfolio of real sites.

Build four portfolio-ready web design projects from realistic briefs: a multi-page portfolio, an accessible local business site, a standards-led redesign and a client-ready case study. Every staged solution is checked in Chromium for semantic structure, responsive geometry, contrast, user preferences and axe accessibility, while every starter fails its own tests.

IntermediateHTML and CSS4 lessons40 exercisesAbout 8 h
Create a free account

What you will learn

  • Portfolio design
  • Small business sites
  • WCAG 2.2 AA
  • Responsive systems
  • Design critique
  • Case studies
  • GitHub Pages

Lessons

  1. 1

    Project: Personal Portfolio Site

    Build a multi-page portfolio from a client brief, then make its hierarchy, case-study links, responsive layout, color themes and motion preferences hold together as one system.

    10 exercises

  2. 2

    Project: Small Business Website

    Turn a local cafe brief into a trustworthy site with a readable menu table, published hours, an accessible location embed and a contact form that explains what happens next.

    10 exercises

  3. 3

    Project: Accessibility Redesign

    Redesign a dated community-service page by repairing its semantics, building a modern modular type scale, proving reflow and zoom resilience, and auditing WCAG 2.2 AA across user preferences.

    10 exercises

  4. 4

    Project: Case Study and Client Presentation

    Critique a finished design against its goals, prioritize revisions, write an evidence-backed case study, present the work to a client, and prepare a static project for GitHub Pages.

    10 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

  • Code exercise: 16
  • Predict the output: 4
  • Fill in the blank: 4
  • Multiple choice: 4
  • Type the answer: 4
  • Select all that apply: 4
  • Fix the bug: 4

Aligned to

CS2023ACM / IEEE-CS / AAAISource
  • Specialized Platform Development
    • SPD-WebWeb Platforms
  • Human-Computer Interaction
    • HCI-DesignSystem Design
MDN Curriculum (core)MozillaSource
  • Semantic HTML
    • 2.1Basic HTML syntax
    • 2.2Structuring documents
    • 2.3Lists
    • 2.4Advanced text techniques
    • 2.6Media
  • CSS fundamentals
    • 3.1Basic CSS syntax
    • 3.2Selectors
    • 3.5Values and units
    • 3.8Overflow
    • 3.9Styling form elements
    • 3.10Debugging CSS
  • CSS layout
    • 5.1Introduction to CSS layout
    • 5.2Floats
    • 5.3Positioning
    • 5.4Modern layout
    • 5.5Responsive design
  • Accessibility
    • 7.1Accessibility basics
    • 7.2Accessible styling
    • 7.4Assistive technology and testing
    • 7.5WAI-ARIA basics
  • Design for developers
    • 8.1Basic design theory
    • 8.2User-centered design
    • 8.3Understanding design briefs
WCAG 2.2 Level A and AAW3CSource
  • Perceivable
    • 1.1.1Non-text Content
    • 1.3.1Info and Relationships
    • 1.3.2Meaningful Sequence
    • 1.3.5Identify Input Purpose
    • 1.4.1Use of Color
    • 1.4.3Contrast (Minimum)
    • 1.4.4Resize Text
    • 1.4.10Reflow
    • 1.4.11Non-text Contrast
    • 1.4.12Text Spacing
  • Operable
    • 2.1.1Keyboard
    • 2.4.1Bypass Blocks
    • 2.4.2Page Titled
    • 2.4.3Focus Order
    • 2.4.4Link Purpose (In Context)
    • 2.4.5Multiple Ways
    • 2.4.6Headings and Labels
    • 2.4.7Focus Visible
    • 2.4.11Focus Not Obscured (Minimum)
    • 2.5.3Label in Name
    • 2.5.8Target Size (Minimum)
  • Understandable
    • 3.1.1Language of Page
    • 3.2.3Consistent Navigation
    • 3.2.4Consistent Identification
    • 3.2.6Consistent Help
    • 3.3.1Error Identification
    • 3.3.2Labels or Instructions
    • 3.3.3Error Suggestion
  • Robust
    • 4.1.2Name, Role, Value

Proto Node Labs is not affiliated with or endorsed by ACM / IEEE-CS / AAAI, Mozilla and W3C. Exam names are trademarks of their owners.