Topics

Course content organized by topic. Each topic links to its content slides and the sessions where it is taught.

Foundations

Tools

Deployment: GitHub Pages

2 sessions · GitHub Pages activation, deploy troubleshooting (file paths, casing, missing index.html), GitHub Actions deploy status…

Version Control and GitHub

1 session · version control concepts, Git basics, GitHub Desktop workflow (commit, push, pull)…

How the Web Works

1 session · client/server model, DNS, HTTP request/response…

HTML & CSS

HTML Essentials

2 sessions · document structure, common tags, semantic HTML…

CSS Essentials

1 session · selectors (element/class/ID/pseudo), the cascade, specificity at a working level…

CSS Layout (Flexbox + Grid)

2 sessions · box model, display values, Flexbox (justify/align/direction/gap)…

HTML Forms

1 session · form element and action, input types and labels, GET vs POST…

Responsive Design

1 session · viewport meta, mobile-first media queries, fluid layouts…

Advanced CSS

0 sessions · transitions and keyframe animations, CSS variables, frameworks (Tailwind intro)…

JavaScript

JS Intro: DOM + Events

1 session · document.querySelector, addEventListener, modifying text/style…

JS Essentials

2 sessions · const/let (no var), primitive types, string vs number…

JS Arrays + Loops

1 session · array literals, for loop, for...of…

JS Async + Fetch

1 session · fetch, await, JSON…

JS Image Processing

1 session · pixels and RGBA, canvas + getImageData / putImageData, per-pixel for loop…

Code Organization

1 session · separation of concerns / why split files, export / import (ES modules) + script type=module, comments and TODOs…

JS Browser APIs

1 session · localStorage (save data between visits), setTimeout / setInterval (timers), Geolocation API…

AI Track

Markdown + Prompt Basics

1 session · Markdown syntax (headings, lists, code fences, links), writing prompts that get useful output, ask modes: explain vs generate vs refactor

Reading AI-Generated Code

2 sessions · read HTML/CSS/JS that AI produced, identify unfamiliar pieces, ask AI to explain specific pieces (not the whole thing)

AI Tool Comparison

2 sessions · Copilot: inline + chat + edits, Cursor, Claude Code…

API Keys, .gitignore, Security

1 session · .gitignore, config.js pattern, why API keys must not be in client-side code…

Tech Stack & Deploy Workflow

1 session · GitHub Pages vs Vercel (when you need a server), Vercel + serverless functions for hidden API keys, custom domains via Cloudflare…

AI Code Review + Refactoring

1 session · when AI output is overcomplicated, when it uses a library you haven't learned, asking for a refactor without losing the working version…

AI-Assisted Debugging + DevTools

0 sessions · console errors and what they say, Network tab for fetch failures, Elements tab for CSS overrides…

Intro to Claude Code / Agentic Workflows

0 sessions · terminal-based AI coding, multi-step workflows, when to let the agent run vs review each step…

Projects

MP1: Website for Someone Else (launch) MP1 Progress Demo (mid) MP1 Final Showcase MP2 Final Showcase MP3: API-Powered App (launch) MP3 Final Showcase Final Demo Day Final Project Introduction MP2: Interactive Web Tool (launch)