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 Essentials

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

JS Intro: DOM + Events

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

JS Arrays + Loops

3 sessions · array literals, for loop, for...of…

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…

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

Not yet scheduled · localStorage (save data between visits), setTimeout / setInterval (timers), Geolocation API…

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

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

API Keys, .gitignore, Security

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

Calling an LLM API

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

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…

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…

1 session · the agent loop: an LLM API call, a tool the model asks for, the result sent back, repeated, the context window: what the model reads on every request (instructions file, files read, the conversation), why a long chat gets slower and costlier, and a new chat per task…

AI Tool Comparison

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