An 81-lesson self-study course with editable code examples, guided challenges, phase projects, review questions, and a worked capstone.
- Read the lesson and predict what its code will do.
- Open example.html in a browser, then inspect example.js and the Console.
- Change the example, complete the guided challenge in your own practice folder, and test normal, boundary, and failure cases.
- Finish the phase project before moving to the next phase.
For lessons 36, 38–42, and 59, serve this folder over localhost because Fetch, modules, storage, history, or workers may not work as intended under file URLs. From this directory, run:
python3 -m http.server 8000Then open http://localhost:8000/ and navigate to the lesson folder.
- How JavaScript runs — Understand the language, browser host APIs, and when scripts execute.
- Console and developer tools — Use the console and debugger to observe program state.
- Variables and declarations — Store values with const and let.
- Values and types — Recognize JavaScript primitive values and objects.
- Coercion and equality — Compare values without surprising type conversion.
- Operators and expressions — Compose calculations and logical conditions.
- Strings and templates — Create and transform text safely.
- Numbers and Math — Handle numeric input, rounding, and special values.
- Conditions and branches — Choose behavior with if, else, and ternary expressions.
- Switch and decision tables — Represent several discrete cases clearly.
- Loops and iteration — Repeat work while controlling termination.
- Function declarations and expressions — Package behavior into reusable units.
- Parameters return and scope — Understand local names and data flow.
- Arrow functions and closures — Use concise functions and captured state.
- Errors and exceptions — Handle failure at useful boundaries.
- Calculator mini project — Combine inputs, functions, branching, and error handling.
- Arrays and indexing — Store ordered collections and access their elements.
- Array transformations — Use map, filter, find, and reduce for clear data flow.
- Objects and properties — Model named data and access it safely.
- Destructuring spread and rest — Extract and combine values without repetitive code.
- Maps and Sets — Choose keyed and unique collections appropriately.
- Dates and internationalization — Format dates, numbers, and text for users.
- Regular expressions — Match and validate structured text with restraint.
- Data transformation project — Turn raw records into useful output.
- Selecting DOM elements — Find and inspect live page elements.
- Creating and changing nodes — Build content without string concatenation.
- Attributes classes and styles — Change state through meaningful attributes and classes.
- Events and listeners — Respond to user input with event listeners.
- Forms and validation — Read controls and show useful feedback.
- Event delegation — Handle many related elements with one listener.
- Timers and browser scheduling — Schedule UI updates without blocking the page.
- DOM mini project — Build a complete interactive task list.
- Event loop and tasks — Explain why asynchronous callbacks run later.
- Promises — Represent eventual success or failure.
- Async functions and await — Write readable asynchronous control flow.
- Fetch and HTTP — Request data and interpret responses.
- Cancellation and recovery — Abort stale work and show useful errors.
- Web storage — Persist small client-side preferences responsibly.
- URLs and history — Use URLs as application state where appropriate.
- Async API mini project — Build a small data explorer with robust states.
- ES modules — Split browser code into explicit dependencies.
- Import export design — Create clear module boundaries.
- Closures and encapsulation — Hide implementation details behind a small API.
- Classes and prototypes — Understand shared behavior and object construction.
- Functional and immutable patterns — Transform data without hidden mutation.
- State and rendering architecture — Separate data transitions from DOM updates.
- Packages and tooling — Understand package files and local scripts.
- Architecture mini project — Turn lessons into a maintainable small app.
- Debugging strategies — Trace symptoms to causes with evidence.
- Testing JavaScript — Verify behavior with focused tests.
- Accessibility in scripted UI — Keep dynamic behavior understandable to everyone.
- DOM security and XSS — Treat external text as data rather than markup.
- Performance and memory — Measure long tasks, rendering cost, and retained resources.
- Compatibility and feature detection — Make behavior robust across target browsers.
- Git review and documentation — Make code changes reviewable and understandable.
- Deployment and diagnostics project — Publish and observe an interactive app.
- Iterators and generators — Create lazy sequences when they simplify data flow.
- Typed arrays and binary data — Work with bytes and numeric buffers.
- Workers and concurrency — Move CPU-heavy work away from the main thread.
- Memory and lifecycle — Prevent retained objects and repeated side effects.
- Network resilience and offline thinking — Design states for unreliable connections.
- Interface architecture and design systems — Coordinate state, components, and user experience.
- Capstone application — Deliver a complete data-driven browser application.
- Senior review and iteration — Explain and improve a system with evidence.
- Dynamic this and binding — Understand how a function call determines this.
- Prototypes and property descriptors — Inspect inheritance and property behavior below class syntax.
- Symbols and reflection — Use unique property keys and inspect object structure.
- Proxy and Reflect — Intercept object operations for validation or observation.
- Weak collections and object lifetime — Associate metadata with objects without retaining them through a normal key list.
- Async iterators and generators — Process asynchronous sequences one value at a time.
- Readable streams and backpressure — Consume data in chunks instead of waiting for the whole resource.
- Custom elements and shadow DOM — Encapsulate reusable browser components with native platform APIs.
- IndexedDB and transactions — Persist larger structured data in the browser.
- Service workers and offline behavior — Cache selected resources and understand worker lifecycle.
- WebSockets and realtime events — Exchange messages over a persistent two-way connection.
- Advanced internationalization — Format messages and segment text for different languages.
- Browser security policies — Use safe DOM construction and understand CSP boundaries.
- Performance profiling and long tasks — Measure main-thread work and fix the observed bottleneck.
- Cross-tab communication — Synchronize same-origin pages with browser messaging APIs.
- Global errors and production diagnostics — Report unexpected failures without hiding them from users.
- Senior architecture review — Evaluate a browser system by behavior, ownership, and evidence.
Build the ten milestone projects. Use the field reference, phase quizzes, and assessment rubric to check progress.
Working through the lessons is the start. Senior-level evidence comes from building, debugging, testing, reviewing, and explaining complete applications.