Your first step. Learn what programming is, what HTML/CSS/JavaScript do, and how they work together to build websites.
Structured Learning Path
Learn JavaScript Step by Step (Without Feeling Lost)
Not sure what to learn next? This syllabus shows you exactly what to learn - step by step, from basics to advanced. No guessing, no confusion.
Beginner
Intermediate
Advanced
This is not just a list of topics. It's a clear path to learn JavaScript - without confusion.
Start from the basics. Move step by step. Don't try to learn everything at once.
?? Just pick one topic, learn it, and move to the next. That's it.
Want a timeline with milestones? Check our JavaScript Roadmap.
?? Don't try to learn everything in one go. Focus on one section at a time.
?? Start from Basics if you're a beginner. Don't skip ahead.
A quick story of how JavaScript was born, how it grew over the years, and what runs it inside your browser today.
- JavaScript history
- ECMAScript
- JScript
- ActionScript
- JavaScript
- ECMA-262 and ISO/IEC 16262
- Versions of JavaScript & History
- Backward & Forward compatible
- JavaScript Engines
- V8
- SpiderMonkey
- JavaScriptCore
Install the code editor you'll use for everything. Set up VS Code with the right extensions and settings.
- What is an IDE?
- Downloading & Installing Visual Studio Code
- Difference - File vs Folder vs Workspace
- VSCode shortcuts
- Installing extensions
- Applying Settings & Default Formatter Setting
Create your first project - set up folders, link your files, and keep HTML, CSS, and JavaScript organized.
- Separation of concern
- Setting up starter files
- Folder structure for JavaScript projects
JavaScript Core
What makes JavaScript special? A quick look at the key features that set it apart from other languages.
- High Level Language
- Garbage Collected
- Interpreted Language (JIT)
- Parsing
- Interpretation
- Profiling
- Compilation
- Execution
- Multi Paradigm
- Prototype based functions
- First Class Function
- Dynamically Typed
- Single Threaded
- Non-Blocking Event Loop
- Platform Independent
See results on screen! Learn how to display output using the console, alerts, and more.
Understand the different types of data in JavaScript - numbers, text, true/false - and how to convert between them.
Primitive Data Types
Non-Primitive Data Types
Truthy and Falsy Values
- What are the truthy and falsy values in JavaScript?
- Falsy values
- undefined
- null
- 0
- ""
- false
- NaN
- Using Truthy and Falsy values in conditional statements
Type Conversion
Number Conversion
String Conversion
Boolean Conversion
Use alert, confirm, and prompt boxes to interact with users through simple browser dialogs.
Learn the naming rules for variables and functions, and which words are reserved keywords in JavaScript.
Write single-line and multi-line comments to document your code and follow clean coding guidelines.
Understand what a statement is, how semicolons work, and the difference between single-line and block statements.
Three ways to create variables in JavaScript. Learn when to use each one and how they behave differently.
Learn the symbols and shortcuts JavaScript uses for math, comparisons, and making logical decisions.
Arithmetic Operators
Assignment Operator
Comparison Operator
Logical Operators
Other Operators
Logical Assignment Operators
Short Circuiting
Control program flow with if/else, else-if chains, nested conditions, and switch-case statements.
Enable strict mode to catch common mistakes and write more secure, predictable JavaScript code.
Run the same code over and over automatically. Learn for, while, do-while, and other loop types.
Work with strings, template literals, escape characters, and 20+ built-in string methods like slice, split, and replace.
String Functions
Learn where your variables are available and why some work in one place but not another.
Write reusable code with function declarations, expressions, arrow functions, parameters, default values, and more.
The topics that come up in every interview - closures, hoisting, callbacks, recursion, and more.
Debugging
Use Chrome DevTools, breakpoints, and console methods to find and fix syntax, reference, type, and range errors.
Numbers and Dates
Learn how JavaScript handles numbers, useful number methods, and how to format numbers for different countries.
Number Functions
Number Properties
Internationalization Numbers
Work with dates and times - create them, format them, and display them for any region or language.
JavaScript Data Structures
Create, access, and transform arrays with 20+ methods including map, filter, reduce, find, sort, flat, and more.
- Creating arrays, Array indexing, Array length, Looping arrays
Array Methods
Group related data together, access it easily, and learn how to copy objects the right way.
Store unique values with Set, use its methods for adding and checking elements, and understand WeakSet.
- Creating Set, Set methods, Iteration, WeakSet
Use Map for key-value pairs with any key type, iterate entries, and learn about WeakMap for memory-efficient references.
- Creating Map, Map methods, Iteration, WeakMap
Modern JavaScript Features
Pull out values from arrays and objects in one line - a modern shortcut you'll use everywhere.
- Array destructuring, Object destructuring, Nested destructuring, Default values
Copy arrays, merge collections, and pass elements as function arguments using the spread (...) syntax.
Let your functions accept any number of inputs - useful for flexible, reusable code.
Safely access deeply nested properties and call optional methods without throwing errors using the ?. operator.
Write objects with less code using modern shortcuts - shorter syntax, same result.
JavaScript DOM and BOM
Select, modify, and create HTML elements dynamically. Handle click, keyboard, and mouse events with event delegation.
- DOM introduction
- DOM selection: getElementById, querySelector, querySelectorAll
DOM Properties
Events
- click, change, mouse events, keyboard events, addEventListener
- event bubbling, event capturing, event delegation
DOM Manipulation
Access browser features like the address bar, history, screen info, and store data locally.
- window, history, navigator, screen, location
- cookies, localStorage, sessionStorage
Master how JavaScript handles user interactions - clicks, typing, scrolling, and more.
Learn to search, match, and replace text patterns using regex.
JSON & XML
Parse and stringify data with JSON, and understand XML as a data exchange format used in APIs.
JavaScript Internals
Understand how JavaScript executes behind the scenes: the engine, call stack, memory heap, execution context, event loop, and the this keyword.
Understand how JavaScript handles memory behind the scenes - from stack and heap to garbage collection and avoiding memory leaks.
OOP
Learn to organize your code using classes, inheritance, and other patterns used in real apps.
Web
Learn how clients and servers communicate through requests, responses, APIs, REST architecture, and CORS.
Fetch data from servers without refreshing the page - the old-school way that's still good to know.
Use the modern fetch() API to make HTTP requests, parse JSON responses, handle errors, and cancel requests with AbortController.
Learn how JavaScript handles things that take time - like loading data - using Promises and async/await.
Promise Combinators
Handle runtime errors gracefully with try/catch/finally, throw custom errors, and manage async error flows.
Organize code into reusable files with ES6 import/export, dynamic imports, and top-level await.
The tools real developers use - package managers, bundlers, and how to make your code work everywhere.
Protect your applications from XSS, CSRF attacks, and learn about Content Security Policy, HTTPS, and secure cookies.
Learn battle-tested patterns that experienced developers use to write cleaner, more maintainable JavaScript.
Speed up your JavaScript - learn debounce, throttle, memoization, lazy loading, and how to avoid blocking the main thread.
Make sure your code works as expected - learn unit testing, integration testing, and the tools developers use to catch bugs early.
Advanced Topics
Explore cutting-edge JavaScript: generators, Proxy, Reflect, Web Workers, Service Workers, WebSockets, and WebAssembly.
- Generators & Iterators
- Proxy & Reflect
- Web Workers
- Service Workers, WebSockets, WebRTC, WebAssembly, Immutable Data
JavaScript Syllabus FAQ
Start with the beginner JavaScript topics listed in this syllabus: variables (let, const, var), data types, operators, conditional statements, loops, and basic functions. These form the foundation of every JavaScript course and are essential before moving on to intermediate or advanced concepts. Mastering these JavaScript topics first ensures you build a solid base that makes everything else easier to learn.
Beginner JavaScript topics form the core of any JavaScript syllabus. They include: introduction to programming, data types (string, number, boolean, null, undefined, symbol, BigInt), variables, operators, conditional statements (if/else, switch), loops (for, while, do-while), basic functions, scope, strings, and popup boxes. This syllabus covers each of these with links to detailed tutorials so you can learn at your own pace.
Advanced JavaScript topics include: asynchronous programming (Promises, async/await), the Fetch API, ES6 modules (import/export), JavaScript internals (call stack, event loop, execution context), OOP with classes and prototypes, error handling with try/catch, and browser security (XSS, CSRF, CSP). These are the JavaScript course topics that separate beginners from job-ready developers, and they are all covered in the advanced section of this syllabus.
With consistent daily practice following this JavaScript syllabus, you can cover the beginner topics in 4–6 weeks. Reaching an intermediate level where you understand closures, arrays, objects, and DOM manipulation typically takes 3–6 months. Becoming proficient with advanced JavaScript topics like async programming, modules, and security can take 6–12 months. The key is regular practice - even 30 minutes daily gives better results than occasional marathon sessions.
A JavaScript syllabus is a complete list of all JavaScript topics organized by difficulty - it tells you what to learn. A JavaScript roadmap adds timelines, milestones, and a suggested order - it tells you when and how to learn each topic. This page is the syllabus (what to learn), and our JavaScript Roadmap is the step-by-step learning path with milestones. Use both together for the most effective learning experience.
Yes. This JavaScript syllabus covers every topic commonly asked in JavaScript interviews - from basics like closures, hoisting, and scope to advanced topics like Promises, the event loop, and prototypal inheritance. Each topic links to a detailed tutorial page that also includes interview questions, making it a practical guide for both learning and JS interview preparation.
Why This Syllabus Works
Organized by Difficulty
Every topic is labeled Beginner, Intermediate, or Advanced - so you always know where you stand.
Click Any Topic to Learn
Each topic links to a free tutorial. No searching around - just click and start reading.
Nothing Is Missing
From your first variable to WebAssembly - every JavaScript topic you need is here, in order.
Interview Questions Included
Every tutorial has interview questions built in. Follow the syllabus and you'll be interview-ready too.
Ready to Start?
You've got the full map. Now just pick the first topic and begin - every section links to a free tutorial with examples and practice.