Learn what JavaScript is and why it's the most popular language for building websites.
A must-read before anything else.
Learn JavaScript Step by Step (Without Feeling Lost)
Not sure what to learn next? This roadmap shows you exactly what to learn, from basics to advanced, one step at a time.
15 Beginner Topics
20 Intermediate Topics
17 Advanced Topics
→ Start from the Beginner section. Complete one topic at a time. Don't skip ahead.
Beginner Level
Start here to build strong basics.
Understand how JavaScript was born and how it evolved into the language it is today.
Good context before going deeper.
Get your coding environment ready before you write your first line of JavaScript.
A necessary first step for every developer.
4
Comments
Add notes to your code that JavaScript ignores. Essential for readable, maintainable code.
Good habit from day one.
Display messages in the browser using console, alert, and other output methods. Your first step to seeing JavaScript in action.
Used constantly during development.
Learn how to store information in your code, like names, numbers, and more.
Very commonly asked in interviews.
Understand the different kinds of values JavaScript can work with, such as text, numbers, true/false, and more.
Essential for understanding all other JS concepts.
Learn the symbols used to do math, compare values, and make quick decisions in code.
Used in every single JavaScript program.
Make your code smart. Run different code depending on a condition.
Important for interviews.
10
Loops
Run the same block of code over and over without repeating yourself.
You'll use loops in almost every project.
11
Functions
Group code you want to use again and again. One of the most important things in JavaScript.
Very commonly asked in interviews.
12
Arrays
Store lists of items and learn the powerful tools to work with them.
Used in real-world projects all the time.
13
Objects
Group related data together. That is the way most real-world data is organized in JavaScript.
Used in real-world projects.
Change what users see on the page. Update text, colours, and content with JavaScript.
This is how JavaScript makes pages interactive.
15
Events
React to clicks, keypresses, and other user actions on your webpage.
Important for building interactive pages.
Intermediate Level
Now level up your JavaScript skills.
Learn the modern shortcuts that make JavaScript cleaner and easier to write.
Modern JS, used in every professional codebase.
A shorter way to write functions. You'll see this everywhere in real code.
Very commonly asked in interviews.
Pull out values from objects and arrays in one line. A modern shortcut you'll use daily.
Saves time and makes code cleaner.
Copy arrays, merge objects, and pass multiple arguments using just three dots.
Commonly used in real-world projects.
20
JSON
Learn the standard format for sending and receiving data. Used in almost every web application.
Essential for working with APIs.
21
Set & Map
Two ES6 data structures for storing unique values and key-value pairs more efficiently than arrays or plain objects.
Useful in performance-focused code.
Organize your code around objects and classes. A cleaner, scalable way to structure larger programs.
Important for modern application development.
23
Closures
Learn how a function can "remember" variables from where it was created. A tricky but important concept.
Very commonly asked in interviews.
24
Scope
Learn where your variables are available and why some work in one place but not another.
Important for interviews.
25
Hoisting
Understand why some variables and functions can be used before they appear in the code.
Very commonly asked in interviews.
26
Debugging
Find and fix mistakes in your code using browser dev tools and debugging techniques.
A critical everyday skill for all developers.
27
Callbacks
Pass a function as an argument to be called later. The foundation of async JavaScript before Promises.
Important to understand before Promises.
28
Promises
Handle tasks that take time, like loading data, without freezing your page.
Foundation of modern async JavaScript.
A cleaner way to write code that waits for something, like an API call, to finish.
Used in almost every real-world project.
Catch and handle things that go wrong in your code without crashing the whole app.
Important for writing reliable code.
31
Modules
Split your code into separate files and import what you need. Keeps things clean and organized.
Used in every modern JS project.
32
AJAX
Load data from a server in the background without refreshing the page. The classic technique behind dynamic websites.
Widely used and commonly asked about.
33
Fetch API
Load data from a server without reloading the page. The modern, clean way.
Commonly used in real-world apps.
34
Working with APIs
Connect to real data sources on the internet and build things that actually do something.
Used in real-world projects.
Interact with the browser window itself and save data locally so it persists across sessions.
Used in real-world apps.
Advanced Level
Master advanced concepts step by step.
36
Event Loop
Learn how JavaScript runs tasks step by step behind the scenes, even when things overlap.
Very commonly asked in interviews.
37
Call Stack
See how JavaScript keeps track of which function is running and what happens when they nest.
Important for interviews.
Understand how objects in JavaScript can share features. It is the foundation of JavaScript's object system.
Very commonly asked in interviews.
Learn what happens behind the scenes every time a piece of your code runs.
Important for interviews.
Learn how JavaScript frees up memory automatically and how to avoid slowing your app down.
Important for performance-focused roles.
Learn the tried-and-tested ways professionals organize and structure their JavaScript code.
Used in real-world projects.
42
Functional Programming Concepts
Learn a different way to write JavaScript that is cleaner, more predictable, and easier to test.
Important for advanced roles.
Make your JavaScript faster. Reduce lag, avoid unnecessary work, and improve user experience.
Used in real-world projects.
44
JavaScript in Browser vs Node
Learn what changes when JavaScript runs in a browser versus on a server.
Good to know for full-stack roles.
45
Web APIs
Tap into powerful browser features like real-time connections, location, and background tasks.
Used in real-world projects.
46
Web Workers
Run heavy JavaScript tasks in the background without blocking the main thread or freezing the UI.
Important for performance-heavy applications.
Learn how to keep your JavaScript apps safe from common attacks and security mistakes.
Important for professional development.
Learn how to check that your code works correctly, automatically, every time you make changes.
Expected in professional environments.
Get familiar with the ecosystem - bundlers, linters, package managers, and build tools used in real projects.
Essential for professional JavaScript development.
Search, match, and replace text patterns with powerful regex syntax.
Useful for text processing and validation.
Create custom iterable sequences and control function execution with yield.
Advanced JavaScript execution control.
Intercept and customize fundamental object operations like property access and assignment.
Powerful metaprogramming capabilities.
Now Stop Reading. Start Learning.
Pick the first topic and begin. Every expert started exactly where you are right now.