Build the mental model
Begin with the lesson introduction and objectives. Read three connected explanations, then trace two complete examples before pressing Run.
All courses
100% freebeginner
JavaScript: From Values to Applications
A complete frontend-first JavaScript path with 32 lessons, six applied projects, runnable practice, debugging labs, a cumulative assessment, and a final capstone.
32 lessons 6 projects About 52 hours
Start course Learn JavaScriptRead · Edit · Practice
COURSE CONTENTS01 · LEARN 02 · PRACTICE 03 · APPLY 04 · PROVE
Build with understanding, not memorization.
HOW THIS COURSE WORKS
From your first value to a tested browser application
No JavaScript experience is required. You should already understand basic HTML elements, CSS selectors, files, and how to use a web browser.
Change and repair code
Predict a changed result, use the live runner, repair a realistic defect, and explain the first state that violated the program contract.
Complete an independent lab
Start from a small brief rather than a copied solution. Review the result against three criteria and answer two explained reasoning checks.
Ship the unit project
Each unit ends with an integrated project. The final assessment, applied challenges, and capstone then connect the whole learning path.
YOU WILL BE ABLE TO
Read, design, debug, and verify complete frontend behavior
- Validate values and express decisions with predictable control flow.
- Design focused functions, arrays, objects, and structured data models.
- Build accessible DOM interfaces with events, forms, state, and storage.
- Handle asynchronous requests, cancellation, stale data, and failure states.
- Organize application modules and test public behavior at useful boundaries.
- Present six unit projects and one final capstone as practical evidence.
Structured path: 32 focused lessons, 6 unit projects, one cumulative assessment, applied challenges, and a final capstone.
YOUR JAVASCRIPT PATH
0 of 38 course items completed
0% complete · Saved on this device
Next lesson
JavaScript Introduction Continue learningEach of the 38 workshops adds deeper concepts, an explained example, a broken-code repair, an independent lab, and reasoning questions with answers. Time estimates include reading and hands-on practice; learn at your own pace.
01
1. JavaScript Foundations
JavaScript IntroductionUnderstand where JavaScript runs and build a small program from input, transformation, and output.Runnable workshop · saved lab · 2 explained questions
48 min The Console and RuntimeRun JavaScript in browser tools, read errors, and distinguish the language from its host environment.Runnable workshop · saved lab · 2 explained questions
54 min Values, Variables, and TypesWork with primitive values, objects, const, let, and explicit conversions.Runnable workshop · saved lab · 2 explained questions
56 min Strings and TextCreate, combine, search, normalize, and safely display text without confusing strings with markup.Runnable workshop · saved lab · 2 explained questions
60 min Numbers, Math, and DatesConvert and validate numbers, avoid common floating-point mistakes, and perform reliable calculations.Runnable workshop · saved lab · 2 explained questions
62 min Operators, Equality, and CoercionCombine values deliberately and avoid surprising implicit conversions.Runnable workshop · saved lab · 2 explained questions
58 min Conditionals and DecisionsTranslate requirements into guarded, ordered branches with exact boolean reasoning.Runnable workshop · saved lab · 2 explained questions
60 min Loops and IterationChoose an iteration form by intent and prove that state advances toward termination.
02
2. Functions and Collections
Functions and ScopeDesign functions with clear contracts, return values, lexical scope, and focused responsibilities.Runnable workshop · saved lab · 2 explained questions
60 min Callbacks and Higher-Order FunctionsPass behavior as data, design callbacks with clear contracts, and avoid calling them too early.Runnable workshop · saved lab · 2 explained questions
64 min Array FundamentalsCreate, inspect, copy, and update ordered collections with explicit mutation choices.Runnable workshop · saved lab · 2 explained questions
62 min Array Methods and PipelinesSelect the collection method that states the question and compose readable transformation pipelines.Runnable workshop · saved lab · 2 explained questions
66 min Arrays, Objects, and Collection MethodsModel records and transform collections with map, filter, reduce, and stable immutable updates.Runnable workshop · saved lab · 2 explained questions
64 min Unit Project: Learning AnalyticsCombine functions and array methods to validate lesson records and produce a learning dashboard report.Runnable workshop · saved lab · 2 explained questions
165 min 03
3. Objects and Structured Data
Objects and Property AccessModel named records, inspect ownership, and update nested data without accidental sharing.Runnable workshop · saved lab · 2 explained questions
64 min Methods, this, and Function ContextPredict how a function receives this and avoid losing method context in callbacks.Runnable workshop · saved lab · 2 explained questions
66 min Destructuring, Rest, and SpreadExtract values, collect remaining input, and create shallow copies without hiding data ownership.Runnable workshop · saved lab · 2 explained questions
62 min Maps, Sets, and DatesChoose purpose-built collections for keyed data and uniqueness, then handle time as an explicit boundary.Runnable workshop · saved lab · 2 explained questions
68 min JSON and Data ValidationParse and serialize JSON at trust boundaries, then validate the resulting value before use.Runnable workshop · saved lab · 2 explained questions
66 min Unit Project: Library Data EngineBuild a tested catalog engine using objects, Map, Set, JSON, search, and immutable updates.Runnable workshop · saved lab · 2 explained questions
185 min 04
4. Browser Interfaces
DOM Queries and UpdatesConnect JavaScript to the document with focused queries, safe text updates, and explicit state.Runnable workshop · saved lab · 2 explained questions
62 min Browser EventsRespond to semantic browser events while preserving keyboard, pointer, and native control behavior.Runnable workshop · saved lab · 2 explained questions
64 min Propagation and DelegationTrace capture and bubble phases, delegate dynamic controls, and avoid unnecessary propagation blocking.Runnable workshop · saved lab · 2 explained questions
66 min Events and Accessible FormsHandle event flow, validate forms, and return useful feedback without breaking native behavior.Runnable workshop · saved lab · 2 explained questions
62 min Accessible and Secure InterfacesBuild DOM updates that preserve semantics, keyboard access, focus, safe text handling, and honest status feedback.Runnable workshop · saved lab · 2 explained questions
70 min State, JSON, and Local StorageModel interface state, serialize it safely, and restore device-local preferences.Runnable workshop · saved lab · 2 explained questions
64 min Unit Project: Accessible Task BoardBuild a keyboard-friendly task board with one state model, safe rendering, delegation, filtering, and persistence.Runnable workshop · saved lab · 2 explained questions
205 min 05
5. Async and Reliable Applications
The Event Loop and TimersPredict task and microtask ordering, schedule work without blocking, and treat timer delays as minimums.Runnable workshop · saved lab · 2 explained questions
68 min Promises and Async/AwaitModel pending work, sequence dependencies, run independent tasks together, and handle failure.Runnable workshop · saved lab · 2 explained questions
64 min Async Functions and AwaitWrite readable asynchronous flows, preserve concurrency, and handle rejection at a useful boundary.Runnable workshop · saved lab · 2 explained questions
68 min Fetch, Errors, and CancellationBuild robust network flows with status checks, timeouts, cancellation, and honest error states.Runnable workshop · saved lab · 2 explained questions
66 min Errors and RecoveryDefine failure contracts, throw useful error types, preserve causes, and recover only where the application can act.Runnable workshop · saved lab · 2 explained questions
66 min Debugging with DevToolsReproduce failures, inspect values and call stacks, and reduce bugs to a testable cause.Runnable workshop · saved lab · 2 explained questions
62 min Unit Project: Resilient API ClientBuild an accessible data client with cancellation, explicit loading states, validated responses, retries, and stale-result protection.Runnable workshop · saved lab · 2 explained questions
215 min 06
6. Application Engineering
Classes and PrototypesUnderstand prototype delegation, use classes as syntax over it, and choose composition when inheritance obscures ownership.Runnable workshop · saved lab · 2 explained questions
70 min Modules, Testing, and Application StructureSeparate responsibilities, export narrow interfaces, and test behavior at useful boundaries.Runnable workshop · saved lab · 2 explained questions
68 min Unit Project: Tested Modular AppDesign a modular browser application with domain rules, adapters, tests, persistence, accessibility, and release evidence.Runnable workshop · saved lab · 2 explained questions
235 min 
COURSE COMPANION
Take JavaScript beyond the lesson.
Move from core language ideas to practical browser applications through clear data flow, functions, DOM work, and dependable debugging.