Learn

Modules

A date-free path through the course.

Use modules when you need to know what to work on next. Each module groups lessons, project progress, in-class focus, and a before-you-leave checklist without tying the course to semester dates.

Module 01

Setup, Files, and HTML Foundations

Get the development environment working, understand site folders, and build the first semantic HTML page.

Focus

  • GitHub, GitHub Desktop, VS Code, and GitHub Pages
  • Project folders and relative file paths
  • HTML document structure and core elements

Lessons

  1. Developer Environment Setup
  2. File Paths and Site Structure
  3. Basic 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

  • Create a small repository and publish it 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

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. Intro to CSS
  2. Styling Text with CSS
  3. CSS - Working with 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

Layout, Flexbox, and Responsive Design

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

Focus

  • Flex containers and flex items
  • Main axis, cross axis, wrapping, and gap
  • Responsive testing and layout breakpoints

Lessons

  1. Flexbox
  2. Responsive Web Design
  3. 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.
  • Find the first viewport width where a layout breaks.
  • Refactor one fixed-width layout into a flexible layout.

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

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. Building Effective 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

JavaScript and DOM Interaction

Add behavior with JavaScript by selecting elements, listening for events, and changing classes, content, or attributes.

Focus

  • DOM selection and event listeners
  • classList, attributes, and dynamic content
  • Debugging JavaScript with the Console

Lessons

  1. JavaScript in the DOM
  2. Page Types, Templates, and Navigation

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

Motion, Transitions, Animation, and GSAP

Use motion as a design tool with transitions, keyframes, transforms, and sequenced animation.

Focus

  • Transitions and transform-based motion
  • Keyframes, animation settings, and reduced motion
  • GSAP timelines for sequenced motion

Lessons

  1. CSS Transitions
  2. CSS Animation
  3. GSAP Web Animation
  4. CSS Transforms

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

Listings, Details, Carousels, and Portfolio Structure

Organize project 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, Templates, and Navigation
  2. Item Listing and Details
  3. Mastering 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

Final Portfolio Polish, Testing, and Submission

Refine the final portfolio experience, test accessibility and responsiveness, debug deployment, and prepare submission links.

Focus

  • Responsive polish and visual consistency
  • Manual accessibility testing
  • GitHub Pages verification and final submission quality

Lessons

  1. Web Accessibility
  2. Image Optimization
  3. Developer Environment Setup

Project Checkpoint

Project 4: Interactive Portfolio

  • Review every page on mobile and desktop.
  • Test links, forms, images, keyboard access, and live deployment.
  • Commit, push, and confirm the public site URL shows the final work.

In Class

  • Run a peer review with one content check, one responsive check, and one accessibility check.
  • Use the common fixes page to debug final blockers.
  • Open the live URL, not only the local file.

Before You Leave

  • The final live URL matches the local version.
  • No major mobile overflow or broken navigation remains.
  • The repository and public site URL are ready to submit.

Common Fixes