Learn

Modules

A date-free path through the course.

Use modules when you need to know what to work on next. The course has more lessons than class meetings on purpose: core lessons guide class time, while support lessons help during studio work, debugging, and project polish.

How To Use This

Follow the core path first, then use support lessons when the project asks for them.

The 23 class meetings are paced around project progress. Reference, stretch, and studio-support lessons are still useful, but they do not all need to become full lectures.

Must Do

Complete the current module's core lessons and project checkpoint.

Should Do

Use studio-support lessons during work time to debug, revise, test, and polish.

Could Do

Use reference and stretch lessons when your project needs a deeper feature.

Module 01 / Classes 1-3

Setup, Process, Files, and HTML Foundations

Get the toolchain working, understand the project workflow, and build a first semantic HTML page that can be published.

Focus

  • GitHub, GitHub Desktop, VS Code, and GitHub Pages
  • Website process, project folders, and relative paths
  • HTML document structure and core content elements

Lessons

  1. Developer Environment Setup
  2. Website Process
  3. File Paths
  4. HTML Structure and Elements

Project Checkpoint

Project 1: Basic Webpage

  • Create the project folder and starter files.
  • Build a clear page topic with headings, paragraphs, lists, links, and an image.
  • Publish the page and confirm the live URL works.

In Class

  • Publish a small repository with GitHub Pages.
  • Break and fix one image path together.
  • Review the difference between local files, GitHub files, and the live site.

Before You Leave

  • GitHub Desktop shows no uncommitted setup changes.
  • The live site URL opens in the browser.
  • One HTML page links to CSS or an image with the correct relative path.

Common Fixes

Module 02 / Classes 4-5

CSS, Text, Fonts, and the Box Model

Move from raw HTML to intentional visual presentation with selectors, typography, spacing, and box-model reasoning.

Focus

  • External stylesheets and selector strategy
  • Text styling, font stacks, and font loading
  • Content, padding, border, margin, and box sizing

Lessons

  1. CSS Basics
  2. CSS Text Styling
  3. CSS Fonts
  4. Box Model and Layout

Project Checkpoint

Project 1: Basic Webpage

  • Add an external stylesheet.
  • Improve readability with typography, spacing, color, and layout constraints.
  • Check that styling supports the content instead of fighting it.

In Class

  • Use the selector playground to compare broad and reusable selectors.
  • Inspect one page section and identify content, padding, border, and margin.
  • Make one text system decision and apply it consistently.

Before You Leave

  • CSS is linked from the head and loads in the browser.
  • The page has readable line length and spacing.
  • The project uses classes for reusable styling.

Common Fixes

Module 03 / Classes 6-8

Layout, Flexbox, Grid, and Responsive Design

Build layouts that adapt across screen sizes using flexible containers, wrapping, grid tracks, media queries, and responsive testing.

Focus

  • Flexbox for one-dimensional alignment
  • Grid for page regions, card grids, and two-dimensional layout
  • Responsive testing, breakpoints, and image optimization

Lessons

  1. Flexbox
  2. CSS Grid
  3. Responsive Web Design
  4. Image Optimization

Project Checkpoint

Project 2: Responsive Landing Page

  • Define the landing page goal, audience, and call to action.
  • Build mobile, tablet, and desktop layout states.
  • Test for overflow, image scaling, and readable spacing.

In Class

  • Use the Flexbox playground to explain main axis and cross axis.
  • Build a small card grid and inspect it with DevTools.
  • Find the first viewport width where a layout breaks.

Before You Leave

  • The page has no sideways scrolling on mobile.
  • Images scale within their containers.
  • The layout changes intentionally across at least two breakpoints.

Common Fixes

Module 04 / Classes 9-10

Forms, Navigation, and Accessibility

Design interactive page structure that works for mouse, keyboard, and assistive technology users.

Focus

  • Accessible labels, input types, and form structure
  • Navigation patterns and current-page state
  • Keyboard testing, contrast, semantics, and POUR

Lessons

  1. HTML Forms
  2. Site Navigation
  3. Web Accessibility

Project Checkpoint

Project 2: Responsive Landing Page

  • Build the contact or signup form with connected labels.
  • Test navigation and form controls with the keyboard.
  • Check contrast, focus visibility, and field clarity.

In Class

  • Tab through a form before styling it.
  • Compare visual labels with programmatically connected labels.
  • Review current-page navigation state and visible focus.

Before You Leave

  • Every form field has a visible connected label.
  • Interactive elements can be reached with Tab.
  • Focus states are visible and contrast is checked.

Common Fixes

Module 05 / Classes 11-12

JavaScript, DevTools, and Debugging

Add behavior with JavaScript, then use browser tools and a repeatable debugging process to keep projects moving.

Focus

  • DOM selection, event listeners, and class toggles
  • Console, Elements, responsive mode, and Network panels
  • Describe, inspect, fix, and test as a debugging routine

Lessons

  1. JavaScript in the DOM
  2. DevTools for Designers
  3. Debugging Web Projects

Project Checkpoint

Project 3: Interactive Web Experience

  • Define the concept, mood, or interaction goal.
  • Prototype one click, hover, pointer, or keyboard interaction.
  • Use JavaScript to toggle state instead of hardcoding multiple page versions.

In Class

  • Write one button that toggles a class on a visible element.
  • Use console.log to confirm an event listener fires.
  • Debug a selector mismatch together.

Before You Leave

  • The script file loads without console errors.
  • The interaction has a clear user trigger.
  • The JavaScript selector matches the HTML element.

Common Fixes

Module 06 / Classes 13-15

Position, Transforms, Motion, Animation, and GSAP

Use positioning and motion as design tools with transforms, transitions, keyframes, and optional sequenced animation.

Focus

  • Positioning and layered interface elements
  • Transform and opacity-based motion
  • Transitions, keyframes, reduced motion, and GSAP timelines

Lessons

  1. Hero Sections
  2. CSS Positioning
  3. CSS Transforms and Filters
  4. CSS Transitions
  5. CSS Animation
  6. GSAP Web Animation

Project Checkpoint

Project 3: Interactive Web Experience

  • Make motion central to the concept.
  • Include at least two meaningful interactive behaviors.
  • Add reduced-motion handling for animation-heavy work.

In Class

  • Compare transition timing choices on the same element.
  • Build one keyframe animation and explain each animation setting.
  • Sequence a small group of elements with a timeline.

Before You Leave

  • Motion supports the concept instead of feeling random.
  • Animations use transform and opacity where possible.
  • Reduced-motion users are considered.

Common Fixes

Module 07 / Classes 16-18

Page Types, Listings, Details, and Carousels

Organize content into reusable page types, listing/detail patterns, and interactive portfolio components.

Focus

  • Page types and template consistency
  • Item listing and detail page patterns
  • Carousel behavior, controls, status, and accessibility

Lessons

  1. Page Types and Templates
  2. Item Listing and Details
  3. Carousels

Project Checkpoint

Project 4: Interactive Portfolio

  • Plan the portfolio site map and reusable page structure.
  • Create project listing and detail patterns.
  • Choose one interaction that helps visitors explore the work.

In Class

  • Map portfolio pages before writing final markup.
  • Compare a project card with a project detail page.
  • Use the carousel lab to inspect controls, dots, status, keyboard, and autoplay.

Before You Leave

  • The portfolio is multi-page, not a single long page.
  • Project cards explain what each project is.
  • Any carousel or interaction has visible controls and keyboard support.

Common Fixes

Module 08 / Classes 19-20

Project Planning, Design Systems, SEO, and Reusable Patterns

Turn a portfolio idea into a manageable system with content strategy, reusable components, consistent styles, and basic metadata.

Focus

  • Audience, goals, sitemap, and content inventory
  • Reusable color, spacing, type, button, card, and form patterns
  • Page titles, descriptions, Open Graph, and findability basics

Lessons

  1. Project Planning
  2. Design Systems
  3. SEO and Metadata

Project Checkpoint

Project 4: Interactive Portfolio

  • Write the portfolio goal, audience, and page list.
  • Create a small style system before polishing every page.
  • Add titles and descriptions that make each page understandable.

In Class

  • Review a project sitemap before students continue building.
  • Turn repeated one-off button and card styles into reusable classes.
  • Write one stronger page title and meta description together.

Before You Leave

  • The portfolio has a clear page plan.
  • Repeated UI pieces share reusable styles.
  • Important pages have useful titles and descriptions.

Common Fixes

Module 09 / Classes 21-22

Launch QA, Performance, and UI Feedback

Run final checks against the live site, improve performance, and make interactive states clear before submission.

Focus

  • Live URL testing and launch QA
  • Performance checks for images, fonts, scripts, and layout stability
  • Hover, focus, loading, empty, error, success, and disabled states

Lessons

  1. Deployment and Launch QA
  2. Web Performance Basics
  3. UI States and Feedback

Project Checkpoint

Project 4: Interactive Portfolio

  • Review every page on mobile and desktop.
  • Check links, images, forms, keyboard access, and loading behavior.
  • Fix the most visible issues before adding anything new.

In Class

  • Open the live URL and test it separately from the local version.
  • Sort assets by size in DevTools Network.
  • Audit one button, input, or card for missing states.

Before You Leave

  • The live URL matches the local version.
  • No major mobile overflow or broken navigation remains.
  • Interactive elements communicate state clearly.

Common Fixes

Module 10 / Class 23

Portfolio Polish and Presentation

Finish the portfolio with critique, final polish, working links, and a clear explanation of the project decisions.

Focus

  • Portfolio clarity, hierarchy, consistency, and presentation
  • Final accessibility, responsiveness, and performance checks
  • Explaining the project goal, audience, process, and result

Lessons

  1. Portfolio Polish and Presentation

Project Checkpoint

Project 4: Interactive Portfolio

  • Submit the repository link and public site URL.
  • Prepare a short explanation of the portfolio and strongest project.
  • Use critique notes for final revisions.

In Class

  • Run a final peer review with one content check, one responsive check, and one accessibility check.
  • Make the smallest high-value fixes first.
  • Practice explaining project decisions clearly.

Before You Leave

  • The repository and public site URL are ready to submit.
  • The strongest work is easy to find.
  • The student can explain what changed and why.

Common Fixes