JavaScript Curriculum
"The coffee shop site looks great. Now customers want to interact with it — filter the menu, add to cart, submit orders without page reloads. Every feature needs DOM manipulation. Time to make the page think."
The DOM is the live, programmable map of your webpage. Learn to select, traverse, modify, and react to every element — then unlock the full browser API toolkit: storage, fetch, observers, and more.
What you'll ship
A fully interactive coffee shop menu page — live search, cart management, order form with validation, persistent localStorage cart, and a fetch-powered specials board.
Lessons
What is the DOM
document tree, nodes, elements, DevTools
Selecting Elements
getElementById, querySelector, querySelectorAll, HTMLCollection vs NodeList
Traversing the DOM
parentElement, children, siblings, closest, nextElementSibling
Reading & Writing Content
textContent, innerHTML, innerText, XSS safety
Attributes & Dataset
getAttribute, setAttribute, data-* attributes, dataset, classList
Creating & Removing Elements
createElement, append, prepend, remove, cloneNode, DocumentFragment
Styling via JavaScript
element.style, classList, getComputedStyle
Events — Fundamentals
addEventListener, event object, removeEventListener, once option
Event Types
click, keydown, input, mousemove, focus/blur, submit, DOMContentLoaded
Bubbling & Delegation
event bubbling, stopPropagation, preventDefault, event delegation
Forms with JavaScript
form events, FormData, live validation, submit handling
BOM — Window & Location
window object, location, history API, navigator, URLSearchParams
Timers & Animation Loop
setTimeout, setInterval, clearInterval, requestAnimationFrame
Web Storage
localStorage, sessionStorage, JSON.stringify/parse, storage limits
Fetch API
fetch, Promises, async/await, JSON responses, status codes
Error Handling
try/catch/finally, error types, throw, fetch error handling, instanceof
Intersection Observer
IntersectionObserver, threshold, rootMargin, lazy loading, scroll animations
MutationObserver & ResizeObserver
MutationObserver, ResizeObserver, DOM watching, component-level responsive design
Clipboard, Geolocation & Other APIs
Clipboard API, Geolocation API, matchMedia, Page Visibility, Web Share, navigator.onLine
Capstone — Todo App
DOM + Events + LocalStorage + Fetch + Error Handling — all combined