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

1 session · 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…

Running a Real Project

1 session · user + content first, sketching screens / wireframes, breaking a page into components…

HTML & CSS

HTML Essentials

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

CSS Essentials

2 sessions · 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)…

Responsive Design

2 sessions · viewport meta, mobile-first media queries, fluid layouts…

HTML Forms

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

Advanced CSS

Not yet scheduled · 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…

Browser Extensions

1 session · an extension is a folder + manifest.json (no build, no server, no deploy), content scripts = your DOM code on someone else's page, matches / host permissions as a judgment call…

JS Browser APIs

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

Code Organization

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

Frontend, a Backend Perspective

Not yet scheduled · entity-driven vs component-driven, controllers → event handlers, the JSON you return → DOM updates…

JS Image Processing

Not yet scheduled · pixels and RGBA, canvas + getImageData / putImageData, per-pixel for loop…

AI Track

Markdown + Prompt Basics

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

Reading AI-Generated Code

3 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…

Calling an LLM API

1 session · POST with fetch (body + headers), OpenAI Responses API (model, input, instructions), reading the reply JSON (output array)…

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 · the gap between what you want, what you ask for, and what gets built, why an agent guesses, and which guesses to let it make, when AI output is overcomplicated…

AI Tool Comparison

Not yet scheduled · Copilot: inline + chat + edits, Cursor, Claude Code…

Intro to Claude Code / Agentic Workflows

Not yet scheduled · terminal-based AI coding, multi-step workflows, the harness that steers an agent (the instructions file, PRD.md)…

Projects

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