Learn JavaScript Free: Complete 2026 Roadmap

Foundations: Variables, Functions, and Control Flow

Before writing real programs, you need the vocabulary and grammar of JavaScript. Cover these fundamentals:

• Variables (var, let, const) and data types (strings, numbers, booleans, null, undefined)
• Operators (arithmetic, comparison, logical)
• Control flow (if/else, switch, ternary)
• Loops (for, while, for...of, forEach)
• Functions (declarations, expressions, arrow functions)
• Scope and hoisting basics

Best resources for this stage:

Project to build: A simple tip calculator in the browser. Takes user input (bill amount, tip %), calculates and displays the result. Forces you to use variables, functions, and basic DOM interaction.

Core JavaScript: Arrays, Objects, and the DOM

This stage is where JavaScript gets powerful. Arrays and objects are the data structures you'll use constantly. DOM manipulation is how you make web pages interactive.

• Arrays and array methods (map, filter, reduce, find, forEach)
• Objects, object methods, and destructuring
• The Document Object Model (DOM) — selecting, creating, and modifying elements
• Event listeners and event handling
• Template literals and string methods
• JSON basics — parsing and stringifying

Best resources:

Project to build: A to-do list app with add, complete, and delete functionality. Pure HTML/CSS/JS, no frameworks. This is the classic beginner project for good reason — it exercises every concept in this stage.

Intermediate: Async JS, APIs, and ES6+

Modern JavaScript is asynchronous. Understanding async/await and the Fetch API is the bridge between toy projects and real applications that talk to the internet.

• Promises — what they are, how chaining works
• Async/await syntax
• The Fetch API — making real HTTP requests
• Error handling (try/catch)
• ES6+ features: spread/rest, optional chaining, nullish coalescing
• Modules (import/export)
• Local storage API

Best resources:

Project to build: A weather app that fetches real weather data from OpenWeatherMap API (free tier) and displays it based on user location or city search. Requires all async concepts plus API integration.

Advanced: Closures, Prototypes, and Design Patterns

This stage separates junior developers from mid-level developers. Interviewers love asking about closures and prototypes — and more importantly, understanding them makes you a better programmer.

• Closures — what they are, common use cases, memory implications
• The 'this' keyword — how it changes with context
• Prototypal inheritance vs class syntax
• The event loop, call stack, and microtask queue
• Higher-order functions
• Common design patterns (module, observer, factory)

Best resources:

React (or Another Framework)

Once you have solid vanilla JavaScript foundations, learning React becomes much faster. The React official docs (react.dev) are excellent and completely free. Build at minimum 2–3 React projects before applying for jobs.

• Components, props, and state
• useEffect, useState, and other hooks
• React Router for multi-page apps
• Fetching data in React
• Simple state management (Context API)

Project to build: A full CRUD application — a movie tracker, expense tracker, or similar. Should have multiple views, data persistence (local storage or a free API), and clean UI. This is your portfolio centerpiece.