Topics

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

Foundations

How the Web Works

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

HTML Essentials

1 session · document structure, common tags, semantic HTML…

CSS Essentials: Selectors, Properties, Cascade

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

Box Model + Layout (Flexbox-First)

1 session · box model, display values, Flexbox (justify/align/direction/gap)…

Responsive Design + Forms

1 session · viewport meta, mobile-first media queries, basic form elements…

JS Intro: DOM + Events

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

JS Fundamentals: Variables, Functions, Conditionals

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 Browser APIs

0 sessions · 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

Deployment: GitHub Pages

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

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-Assisted Debugging + DevTools

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

API Keys, .gitignore, Security

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

AI Code Review + Refactoring

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

Intro to Claude Code / Agentic Workflows

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

AI Tool Comparison

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

Projects

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