JavaScript Workbook

Work through the phases in order. Expand a phase to see its lessons, or jump with the phase links below.

15 phases · expand a phase for every lesson

Foundations

Phase 1 — Fundamentals 5 lessons

Script tags, variables, functions, DOM updates, and first events.

  1. Greeting Maker
  2. Score Counter
  3. Profile Status
  4. Calculator
  5. NBA Scoreboard
Phase 2 — Collections and Logic 6 lessons

Arrays, objects, booleans, comparisons, loops, Math, and return values.

  1. Array Queue
  2. Player Object
  3. Eligibility Checker
  4. Score Loop
  5. Random Math
  6. Basketball Shootout
Phase 3 — DOM, JSON, and Storage 8 lessons

Form values, selectors, create/remove, objects in arrays, JSON, and localStorage.

  1. Selector Lab
  2. Dynamic List
  3. Team Roster
  4. JSON Roundtrip
  5. Saved Notes
  6. Court Memory Match
  7. Team Roster + Lineup Saver
  8. Practice Planner

DOM, style, and events

Phase 4 — Styling and Attributes 6 lessons

Inline style, classList, get/setAttribute, and dataset.

  1. Style Lab
  2. Class List Drill
  3. Attribute Bench
  4. Dataset Roster
  5. Hot Spot Shootout
  6. Jersey Card Studio
Phase 5 — Events 5 lessons

addEventListener, event.target, preventDefault, and closest for nested clicks.

  1. Event Listener Lab
  2. Event Target Lab
  3. Prevent Default Lab
  4. Steal the Ball
  5. Team Signup Desk
  6. Delegation Closest Lab
Phase 6 — DOM Traversal 4 lessons

parentElement, children, closest, and nextElementSibling.

  1. Parent Element Lab
  2. Children Lab
  3. Closest Lab
  4. Next Sibling Lab

Forms, libraries, and tables

Phase 7 — Forms in Action 9 lessons

Live output, validation, files, drag and drop, wizards, and settings.

  1. Live Range Output
  2. Constraint Validation Lab
  3. Field Chrome Toggles
  4. Input Group Counter
  5. Star Rating Desk
  6. File List Preview
  7. Dropzone Drag Lab
  8. Signup Wizard
  9. Settings Panel Capstone
Phase 8 — Form UI Libraries 22 lessons

Pinned CDN widgets (Choices, Flatpickr, TinyMCE, Dropzone, Picmo). Vue/React names are in rules.md.

  1. CDN Init and Destroy
  2. Choices — Single Select
  3. Choices — Multiple Select
  4. Choices — Groups and Disabled
  5. Choices — Events
  6. Flatpickr — Date
  7. Flatpickr — Time and Datetime
  8. Flatpickr — Range and Multiple
  9. Flatpickr — Constraints and Inline
  10. TinyMCE — Basic
  11. TinyMCE — Toolbar and Plugins
  12. TinyMCE — Get, Set, Readonly
  13. TinyMCE — Form Sync
  14. Dropzone — Basic
  15. Dropzone — Accept and Limits
  16. Dropzone — Previews and Remove
  17. Dropzone — Events
  18. Picmo — Inline Picker
  19. Picmo — Popup Picker
  20. Picmo — Insert into Field
  21. Widget Form Desk
  22. Upload Desk Capstone
Phase 9 — Interactive Tables 6 lessons

List.js search, sort, and pagination, plus vanilla bulk select.

  1. List.js CDN Init
  2. List.js Sort
  3. List.js Search
  4. List.js Pagination
  5. Bulk Select
  6. Products Desk Capstone

Runtime and language

Phase 10 — Runtime and Language 15 lessons

Timers, the event loop, hoisting, destructuring, Date/Error, modules, BigInt, increment, and scope.

  1. setTimeout and setInterval
  2. Event Loop Lab
  3. Hoisting Lab
  4. Object Destructuring
  5. Date and Error
  6. Ternary Operator
  7. Array.filter
  8. Function Parameters
  9. Import and Export
  10. BigInt and Numeric Separators
  11. Pre-increment
  12. Scope
  13. Language Desk Capstone
  14. Kitchen Timer Rush
  15. Habit Streak Desk

Callbacks, arrays, and objects

Phase 11 — Callbacks and Array Methods 10 lessons

Function expressions, arrows, defaults/rest revisit, then forEach, map, filter, reduce, and a pipeline desk.

  1. Function Expressions
  2. Arrow Functions
  3. Default and Rest Parameters
  4. Array.forEach
  5. Array.map
  6. Array.filter (again)
  7. Array.reduce
  8. Array Pipeline Desk
  9. Word Pipeline Sprint
  10. Expense Trip Summarizer
Phase 12 — Array Queries, Copies, and Objects 10 lessons

find/some/every/includes, slice vs mutating sort/splice, Object.keys/entries/fromEntries, object spread, and flatMap.

  1. find and findIndex
  2. some, every, and includes
  3. slice and Spread Copies
  4. sort and splice
  5. Object.keys, values, entries
  6. fromEntries and Object Spread
  7. Array.flatMap
  8. Data Tools Desk
  9. Gallery Curator Challenge
  10. Inventory Ops Console

Async foundations

Phase 13 — Promises and Async/Await 10 lessons

Promise states, then/catch/finally, new Promise, Promise.all for parallel work, async/await with try/catch/finally, and microtasks — offline before fetch.

  1. Promise States
  2. then and catch
  3. Promise Chaining
  4. Promise finally
  5. new Promise
  6. Promise.all
  7. async and await
  8. async try / catch / finally
  9. Microtask Lab
  10. Scout Report Desk
Phase 14 — HTTP and Fetch 10 lessons

Client/server, fetch GET, response.json, HTTP vs network errors, query strings, headers, POST/PUT/DELETE, error UI, and a JSONPlaceholder CRUD desk.

  1. Client and Server
  2. fetch GET
  3. response.json
  4. HTTP vs Network Errors
  5. Query GET
  6. Request Headers
  7. fetch POST
  8. PUT and DELETE
  9. Error UI
  10. Roster API Desk
Phase 15 — Fetch Polish 7 lessons

URLSearchParams, AbortController, Bearer auth header demo, parallel fetch, loading/empty/error states, one retry, and an API console desk.

  1. URLSearchParams
  2. AbortController
  3. Auth Header Demo
  4. Parallel Fetch
  5. Loading / Empty / Error
  6. Retry Once
  7. API Console Desk