JavaScript Roadmap
Follow the path top to bottom. Tick off each topic as you finish — your progress saves locally.
Your progress0 / 32 · 0%
Level 1 · Basics
Start here. Master the syntax, variables, control flow and data structures.
- What is JavaScript?The programming language of the web — runs in browsers and on servers.
- Variables: var, let, constStore values with let and const. Avoid var in modern code.
- Data TypesPrimitives (string, number, boolean, null, undefined, bigint, symbol) and Objects.
- OperatorsArithmetic, comparison, logical, assignment and ternary operators.
- Conditions: if / else / switchControl which code runs based on a condition.
- Loops: for, while, do-whileRepeat a block of code while a condition is true.
- FunctionsReusable blocks of code that take inputs and return a value.
- ArraysOrdered lists with powerful built-in methods.
- ObjectsKey-value collections — the building block of JS.
- StringsText values with rich built-in methods and template literals.
Level 2 · DOM
Make pages come alive — read & modify elements, react to clicks and form input.
- What is the DOM?The Document Object Model — the browser's tree representation of your HTML.
- Selecting ElementsgetElementById, querySelector, querySelectorAll.
- Events & Button ClickRespond to user actions with addEventListener.
- Form ValidationValidate user input before submitting a form.
- Change HTML and CSS with JSUpdate text, attributes, classes and styles dynamically.
Level 3 · Advanced JavaScript
Scope, closures, asynchronous code, Promises, async/await, ES6+ and error handling.
- ScopeWhere variables are visible: global, function, block.
- HoistingDeclarations are moved to the top of their scope before execution.
- ClosuresInner functions remember the variables of their outer scope.
- Callback FunctionsA function passed into another function to be called later.
- PromisesAn object representing the future result of an async operation.
- Async / AwaitWrite asynchronous code that reads like synchronous code.
- Fetch APIMake HTTP requests from the browser without any library.
- ES6+ FeaturesModern JS: let/const, arrow fns, template literals, destructuring, spread, modules.
- Error Handlingtry / catch / finally and custom Error classes.
Level 4 · Projects
Build real apps end-to-end. The fastest way to internalise everything you've learned.