Skip to content
Mohammad Abu MattarMohammad Abu Mattar Mohammad Abu Mattar
Home About Me Experience Education Projects Skills Services
Content
Blog Cheatsheets Code Snippets DevTips Flashcards Glossary Quizzes Roadmaps Series Bookmarks
Contact Me
Home About Me Experience Education Projects Skills Services
Content
Blog Cheatsheets Code Snippets DevTips Flashcards Glossary Quizzes Roadmaps Series Bookmarks
Contact Me
Home โ€บ Roadmaps โ€บ All Categories โ€บ Web development
Roadmaps

JavaScript Beginner to Expert

Roadmap

JavaScript Beginner to Expert

A comprehensive roadmap to master JavaScript from core language fundamentals to frontend, Node.js backend, and modern ecosystem tooling.

Published: 05 Apr, 2026
30 Stages
All Levels
Web development #javascript #frontend #nodejs #typescript #react
Facebook Twitter LinkedIn WhatsApp Telegram Reddit Hacker News Pinterest Email

This roadmap guides you through the complete JavaScript journey from writing your first variable to architecting production-grade applications on the frontend and backend. Work through each stage sequentially to build deep, connected knowledge. Return to earlier stages as you advance; the language reveals new depth the more you know.

JavaScript Beginner to Expert

Contents
How JavaScript WorksVariables & Data TypesOperators & ExpressionsControl FlowFunctionsScope & ClosuresObjectsArrays & IterationStrings & Regular ExpressionsError HandlingPrototypes & InheritanceES6 ClassesAsynchronous JavaScript Callbacks & PromisesAsynchronous JavaScript async/awaitModulesDOM ManipulationEventsBrowser APIsForms & ValidationPerformance & RenderingNode.js Fundamentalsnpm & Package ManagementBuilding a REST API with ExpressWorking with DatabasesAuthentication & SecurityTypeScriptTestingBuild Tools & BundlersLinting, Formatting & Code QualityAdvanced Patterns & Architecture
Legend Required Recommended Optional
0 / 106 complete
1 How JavaScript Works 2 Variables & Data Types 3 Operators & Expressions 4 Control Flow 5 Functions 6 Scope & Closures 7 Objects 8 Arrays & Iteration 9 Strings & Regular Expressions 10 Error Handling 11 Prototypes & Inheritance 12 ES6 Classes 13 Asynchronous JavaScript Callbacks & Promises 14 Asynchronous JavaScript async/await 15 Modules 16 DOM Manipulation 17 Events 18 Browser APIs 19 Forms & Validation 20 Performance & Rendering 21 Node.js Fundamentals 22 npm & Package Management 23 Building a REST API with Express 24 Working with Databases 25 Authentication & Security 26 TypeScript 27 Testing 28 Build Tools & Bundlers 29 Linting, Formatting & Code Quality 30 Advanced Patterns & Architecture
01
1

How JavaScript Works

3 topics ยท 3 required
Understand what JavaScript is, how browsers execute it, and where it runs today.

JavaScript vs HTML vs CSS

Required

The role of JS in the browser: structure, style, and behaviour.

  • MDN: What is JavaScript?

How Browsers Execute JS

Required

The V8 / SpiderMonkey engine, JIT compilation, and the rendering pipeline.

Script Loading Strategies

Required

Inline scripts, external files, defer vs async attributes.

02
2

Variables & Data Types

3 topics ยท 3 required
Declare variables and understand every primitive type JavaScript provides.

var, let & const

Required

Differences in scope, hoisting, and mutability between the three declaration keywords.

  • MDN: var, let, const

Primitive Types

Required

String, Number, BigInt, Boolean, undefined, null, and Symbol.

typeof & Type Coercion

Required

Runtime type checking and JavaScript's implicit type conversion rules.

03
3

Operators & Expressions

3 topics ยท 3 required
Perform calculations, comparisons, and logical operations in JavaScript.

Arithmetic & Assignment Operators

Required

+, -, *, /, %, **, and compound assignment (+=, -=, etc.).

Comparison & Equality

Required

== vs === (abstract vs strict equality) and comparison operators.

  • MDN: Equality comparisons

Logical & Nullish Operators

Required

&&, ||, !, ??, and optional chaining (?.).

04
4

Control Flow

3 topics ยท 2 required ยท 1 recommended
Direct the execution path of your programs using conditionals and loops.

Conditionals

Required

if/else if/else, ternary operator, and switch/case statements.

  • MDN: Control flow

Loops

Required

for, while, do-while, for...of, and for...in loops.

Break, Continue & Labels

Recommended

Control loop execution flow with break, continue, and labelled statements.

05
5

Functions

4 topics ยท 3 required ยท 1 recommended
Write reusable blocks of logic and understand the many ways to define functions.

Function Declarations & Expressions

Required

Named functions, anonymous functions, and the difference in hoisting behaviour.

  • MDN: Functions

Arrow Functions

Required

Concise syntax, implicit returns, and how arrow functions handle this.

Default, Rest & Spread Parameters

Required

Set default values, collect extra arguments with rest (...args), and spread arrays.

Higher-Order Functions

Recommended

Functions that accept or return other functions the basis of functional patterns.

06
6

Scope & Closures

4 topics ยท 3 required ยท 1 recommended
Understand variable visibility and how functions capture their surrounding environment.

Scope Chain

Required

Global, function, and block scope how JS resolves variable lookups.

  • MDN: Closures

Closures

Required

A function bundled with its lexical environment practical uses and common patterns.

Hoisting

Required

How var declarations and function declarations are moved to the top of their scope.

IIFE

Recommended

Immediately Invoked Function Expressions for scope isolation.

07
7

Objects

4 topics ยท 3 required ยท 1 optional
Work with key-value pairs, object methods, and understand reference semantics.

Object Literals & Property Access

Required

Create objects, access properties with dot and bracket notation, and shorthand syntax.

  • MDN: Working with objects

Destructuring

Required

Extract values from objects and arrays into variables using destructuring syntax.

Spread & Object.assign

Required

Copy and merge objects with the spread operator and Object.assign.

Property Descriptors

Optional

Configurable, enumerable, writable attributes and Object.defineProperty.

08
8

Arrays & Iteration

4 topics ยท 3 required ยท 1 recommended
Store ordered collections and process them with powerful built-in array methods.

Array Basics

Required

Creating arrays, accessing elements, push/pop/shift/unshift, and length.

  • MDN: Array

map, filter & reduce

Required

Transform, select, and accumulate array values with the three core functional methods.

find, some, every & flat

Required

Search, test, and flatten arrays with modern built-in methods.

Sorting & Comparators

Recommended

Sort arrays correctly with custom comparator functions.

09
9

Strings & Regular Expressions

3 topics ยท 2 required ยท 1 recommended
Manipulate text data and match patterns with regex.

String Methods

Required

slice, split, trim, replace, includes, startsWith, padStart, and template literals.

  • MDN: String

Template Literals

Required

Multi-line strings, embedded expressions, and tagged templates.

Regular Expressions

Recommended

Patterns, flags, test/match/replace with regex, and capture groups.

  • RegexOne: Interactive Tutorial
10
10

Error Handling

3 topics ยท 2 required ยท 1 recommended
Write resilient code that handles unexpected failures gracefully.

try / catch / finally

Required

Catch runtime errors, execute cleanup code, and re-throw selectively.

  • MDN: Error handling

Error Types

Required

Built-in error types: TypeError, RangeError, ReferenceError, SyntaxError, and custom errors.

Custom Error Classes

Recommended

Extend Error to create domain-specific error types with extra context.

11
11

Prototypes & Inheritance

3 topics ยท 2 required ยท 1 recommended
Understand the prototype chain the foundation of object inheritance in JavaScript.

Prototype Chain

Required

How JS looks up properties through proto and Object.prototype.

  • MDN: Inheritance and the prototype chain

Constructor Functions

Required

Creating objects with new and attaching methods to the prototype.

Object.create & Object.setPrototypeOf

Recommended

Manipulate the prototype chain directly without classes.

12
12

ES6 Classes

3 topics ยท 2 required ยท 1 recommended
Use class syntax as a clean abstraction over prototype-based inheritance.

Class Syntax

Required

class, constructor, methods, getters/setters, and static members.

  • MDN: Classes

Inheritance with extends & super

Required

Create subclasses and call parent constructors/methods with super.

Private Fields & Methods

Recommended

Encapsulate implementation details with # private class fields.

13
13

Asynchronous JavaScript Callbacks & Promises

4 topics ยท 4 required
Handle operations that take time network requests, timers, and file I/O.

The Event Loop

Required

Call stack, Web APIs, callback queue, and the microtask queue explained visually.

  • Jake Archibald: In the Loop (video)

Callbacks & Callback Hell

Required

Traditional async pattern and why deeply nested callbacks are problematic.

Promises

Required

Creating promises, .then/.catch/.finally chaining, and promise states.

  • MDN: Promise

Promise Combinators

Required

Promise.all, Promise.allSettled, Promise.race, and Promise.any.

14
14

Asynchronous JavaScript async/await

3 topics ยท 2 required ยท 1 recommended
Write asynchronous code that reads like synchronous code using async/await.

async Functions & await

Required

Mark functions as async, await promise resolution, and return values.

  • MDN: async function

Error Handling with async/await

Required

Wrap await calls in try/catch and handle rejected promises properly.

Top-Level await

Recommended

Use await outside async functions in ES modules.

15
15

Modules

3 topics ยท 2 required ยท 1 recommended
Organise code into reusable, encapsulated files using JavaScript module systems.

ES Modules (ESM)

Required

import, export, named vs default exports, and re-exports.

  • MDN: JavaScript modules

CommonJS (CJS)

Required

require() and module.exports the Node.js module format.

Dynamic Imports

Recommended

import() for code splitting and lazy loading modules at runtime.

16
16

DOM Manipulation

4 topics ยท 3 required ยท 1 recommended
Interact with HTML elements and dynamically update the page from JavaScript.

Selecting Elements

Required

querySelector, querySelectorAll, getElementById, and getElementsByClassName.

  • MDN: DOM introduction

Modifying the DOM

Required

innerHTML, textContent, createElement, appendChild, insertAdjacentHTML, and remove.

Attributes, Classes & Styles

Required

getAttribute/setAttribute, classList (add/remove/toggle), and inline style.

DOM Traversal

Recommended

parentElement, children, nextElementSibling, and closest.

17
17

Events

4 topics ยท 3 required ยท 1 recommended
Respond to user interactions and browser events with event listeners.

addEventListener & removeEventListener

Required

Attach and detach handlers, event types, and the event object.

  • MDN: Events

Event Bubbling & Capturing

Required

How events propagate up the DOM tree and how to control propagation.

Event Delegation

Required

Attach a single listener to a parent to handle dynamic child elements efficiently.

Custom Events

Recommended

Create and dispatch custom events with CustomEvent and dispatchEvent.

18
18

Browser APIs

4 topics ยท 2 required ยท 2 recommended
Use the rich set of APIs built into modern browsers.

Fetch API

Required

Make HTTP requests, handle JSON responses, and manage headers and methods.

  • MDN: Fetch API

localStorage & sessionStorage

Required

Persist key/value data in the browser across sessions or tabs.

History & URL APIs

Recommended

pushState, replaceState, and the URLSearchParams interface.

Intersection Observer & ResizeObserver

Recommended

Efficiently detect element visibility and size changes without scroll events.

19
19

Forms & Validation

3 topics ยท 1 required ยท 2 recommended
Handle user input, validate data, and submit forms programmatically.

Form Events

Required

input, change, submit events reading values and preventing default.

  • MDN: HTML forms guide

Constraint Validation API

Recommended

checkValidity, setCustomValidity, and the ValidityState interface.

FormData API

Recommended

Collect and serialize form data for XHR or Fetch submissions.

20
20

Performance & Rendering

4 topics ยท 2 required ยท 1 recommended ยท 1 optional
Write efficient JavaScript that keeps the browser responsive and animations smooth.

Reflow & Repaint

Required

What triggers layout recalculation and how to batch DOM reads/writes.

  • web.dev: Rendering performance

requestAnimationFrame

Recommended

Schedule visual updates in sync with the browser's paint cycle.

Debounce & Throttle

Required

Limit the rate of expensive event handlers like scroll and resize.

Web Workers

Optional

Move heavy computation off the main thread to keep the UI unblocked.

21
21

Node.js Fundamentals

3 topics ยท 3 required
Run JavaScript on the server with Node.js the runtime that powers the backend.

Node.js Architecture

Required

The event loop in Node, libuv, non-blocking I/O, and the global object.

  • Node.js Docs

Core Modules

Required

fs, path, os, http, events, stream, and util built-in modules.

process & environment

Required

process.argv, process.env, process.exit, and stdin/stdout streams.

22
22

npm & Package Management

4 topics ยท 2 required ยท 1 recommended ยท 1 optional
Manage third-party dependencies and publish your own packages.

npm CLI Basics

Required

init, install, uninstall, run scripts, and understanding package.json.

  • npm Docs

Semantic Versioning

Required

MAJOR.MINOR.PATCH versioning, caret (^), tilde (~), and lock files.

pnpm & Yarn

Recommended

Alternative package managers workspaces, performance, and hoisting differences.

Publishing Packages

Optional

Create, version, and publish a package to the npm registry.

23
23

Building a REST API with Express

4 topics ยท 4 required
Create HTTP servers, define routes, and build RESTful APIs with Express.js.

Express Basics

Required

app.get/post/put/delete, route params, query strings, and request/response objects.

  • Express.js Docs

Middleware

Required

Built-in, third-party, and custom middleware the middleware stack execution model.

Router & Controller Pattern

Required

Organise routes with express.Router and separate business logic into controllers.

Error Handling Middleware

Required

Centralise error responses with four-argument error-handling middleware.

24
24

Working with Databases

3 topics ยท 3 recommended
Persist and query data from SQL and NoSQL databases in a Node.js application.

MongoDB & Mongoose

Recommended

Documents, collections, schemas, models, and CRUD with Mongoose ODM.

  • Mongoose Docs

PostgreSQL with pg or Prisma

Recommended

Relational data modelling, SQL queries, and using Prisma ORM for type-safe access.

  • Prisma Docs

Database Patterns

Recommended

Repository pattern, connection pooling, transactions, and migrations.

25
25

Authentication & Security

4 topics ยท 4 required
Protect your APIs with authentication strategies and secure coding practices.

JWT Authentication

Required

Sign, verify, and decode JSON Web Tokens for stateless authentication.

  • JWT.io

Password Hashing

Required

Hash passwords securely with bcrypt never store plain text.

CORS & Helmet

Required

Configure CORS policies and set secure HTTP headers with Helmet.js.

Input Validation & Sanitisation

Required

Validate request bodies with Zod or Joi; prevent injection attacks.

26
26

TypeScript

4 topics ยท 3 required ยท 1 recommended
Add static types to JavaScript for better tooling, safer refactors, and clearer intent.

Type System Basics

Required

Primitive types, arrays, tuples, enums, union/intersection types, and any vs unknown.

  • TypeScript Handbook

Interfaces & Type Aliases

Required

Model data shapes, extend interfaces, and choose between interface and type.

Generics

Required

Write reusable, type-safe functions and data structures with generic parameters.

tsconfig & Build Integration

Recommended

Configure the TypeScript compiler, strict mode, and integrate with Vite or tsx.

27
27

Testing

4 topics ยท 1 required ยท 2 recommended ยท 1 optional
Ensure correctness and prevent regressions with automated tests.

Unit Testing with Vitest / Jest

Required

Write and run unit tests, use matchers, and mock dependencies.

  • Vitest Docs

Integration & API Testing

Recommended

Test Express routes end-to-end with Supertest.

E2E Testing with Playwright

Recommended

Automate browser interactions and assert UI behaviour with Playwright.

  • Playwright Docs

Test Coverage

Optional

Measure and improve code coverage; avoid chasing 100% blindly.

28
28

Build Tools & Bundlers

4 topics ยท 2 required ยท 1 recommended ยท 1 optional
Transform, optimise, and bundle your source code for production delivery.

Vite

Required

Lightning-fast dev server with ESM, HMR, and optimised production builds.

  • Vite Docs

Webpack

Recommended

Entry points, loaders, plugins, code splitting, and tree-shaking with Webpack.

esbuild & Rollup

Optional

Ultra-fast builds with esbuild; library bundling with Rollup and ES output formats.

Environment Variables

Required

Manage .env files, secrets, and environment-specific config across builds.

29
29

Linting, Formatting & Code Quality

3 topics ยท 2 required ยท 1 recommended
Enforce consistent code style and catch bugs before runtime.

ESLint

Required

Configure ESLint rules, shareable configs (Airbnb, Standard), and custom plugins.

  • ESLint Docs

Prettier

Required

Opinionated code formatter integrate with ESLint and your editor.

Husky & lint-staged

Recommended

Run linters on staged files as a pre-commit Git hook.

30
30

Advanced Patterns & Architecture

4 topics ยท 2 recommended ยท 2 optional
Write maintainable, scalable JavaScript with proven architectural patterns.

Design Patterns

Recommended

Observer, Factory, Singleton, Strategy, and Decorator patterns in JS.

  • Patterns.dev

Functional Programming

Recommended

Immutability, pure functions, function composition, currying, and monads.

Event-Driven Architecture

Optional

Build decoupled systems with EventEmitter, pub/sub, and message queues.

Monorepos

Optional

Manage multiple packages in a single repo with Turborepo or Nx.

Reset Progress?

This will clear all your checked topics in this roadmap. This action cannot be undone.

Comments

Related Posts

You might also enjoy

Check out some of our other posts on similar topics

DevOps Engineer Beginner to Expert

  • Mohammad Abu Mattar
  • Devops
  • Cloud

This roadmap guides you from Linux fundamentals through to advanced platform engineering and MLOps. Each stage builds on the last work through them sequentially to develop a deep, well-rounded DevOps

#Devops #Linux #Docker +4 tags
read more

Solutions Architect Beginner to Expert

  • Mohammad Abu Mattar
  • Cloud
  • Architecture

This roadmap guides you from cloud fundamentals through to professional-level AWS solutions architecture. Each stage builds on the last master the foundations before tackling advanced networking, secu

#Aws #Solutions architect #Cloud +3 tags
read more

Site Reliability Engineer Beginner to Expert

  • Mohammad Abu Mattar
  • Sre
  • Cloud
  • Devops

This roadmap takes you from the fundamentals of Linux and systems thinking through to advanced observability, chaos engineering, and SRE organisational culture. Each stage builds on the last master re

#Sre #Aws #Observability +3 tags
read more

Release Engineer Beginner to Expert

  • Mohammad Abu Mattar
  • Devops
  • Cloud
  • Release engineering

This roadmap takes you from release engineering principles and version control mastery through to advanced GitOps patterns and multi-account AWS delivery at scale. Each stage builds on the last treat

#Aws #Ci cd #Terraform +4 tags
read more

4 related posts

Back to top
Mohammad Abu MattarMohammad Abu Mattar Mohammad Abu Mattar

Building modern, scalable, and secure cloud solutions with a focus on operational excellence.

Explore

  • Blog
  • Cheatsheets
  • Code Snippets
  • DevTips
  • Flashcards
  • Glossary
  • Quizzes
  • Roadmaps
  • Series
  • Bookmarks

Legal

  • Guestbook
  • Terms of Service
  • Privacy Policy

Connect

  • linkedin
  • github
  • linktree
  • RSS

All Copyrights Reserved ยฉ 2020 - 2026, Made With โค & a lot โ˜• By Mohammad Abu Mattar

·

Crafted with intention