JavaScript Roadmap for Beginners: What to Learn and in What Order

JavaScript is the language of the browser. Every interactive thing you click on the web, from a dropdown menu to a live chat, runs on it. With Node.js, it also runs on servers. That's why it appears in so many job posts.

It is also easy to get lost: frameworks, build tools, TypeScript, state management. This roadmap keeps the order sensible. If you are new to programming altogether, see learn programming in the AI era and the Python roadmap, which cover first-language choices.

• Basic HTML and CSS: headings, links, images, forms, boxes, colours and layout (Flexbox and Grid). A week or two is enough to begin.
• A code editor (VS Code) and a modern browser with developer tools. Press F12 and explore. See how a website works.
• Git for saving work. See Git for beginners.

Learn the language itself.

• Variables: let, const (avoid var)
• Data types: numbers, strings, booleans, null, undefined
• Operators and comparison: === vs ==
• Conditions and loops: if, switch, for, while
• Functions: declarations, arrow functions, parameters, return values, scope
• Arrays and objects: methods like map, filter, reduce, forEach, find
• Strings and template literals
• Error messages and console.log: debugging basics. See how to debug any bug

Practice: a tip calculator, a temperature converter, a function that counts words, a quiz with arrays of questions.

The DOM is the browser's tree of page elements. JavaScript can read and change it.

• Selecting elements: querySelector, querySelectorAll
• Changing text, styles and classes
• Events: click, input, submit, keydown
• Creating and removing elements
• Forms and validation
• localStorage for saving data in the browser

Projects: a to-do list that saves to localStorage, a dark mode toggle, a counter, an image gallery, a form with live validation.

• ES6+ features: destructuring, spread and rest, default parameters, modules (import and export)
• Optional chaining and nullish coalescing: ?., ??
• Classes (basic)
• this and how it behaves
• Closures and callbacks

This is where most beginners struggle, and where real apps begin.

• Callbacks, Promises and async/await
• fetch to get data from APIs. See what is an API
• JSON: parsing and stringifying
• Handling errors with try/catch
• Loading states and user feedback

Projects: a weather app with a public API, a movie search, a currency converter, a quote generator. Check each API's terms and never put secret keys in front-end code.

• npm and package.json
• Node.js basics (running scripts)
• A bundler such as Vite
• ESLint and Prettier
• Browser DevTools: Network, Console, Sources and Performance tabs
• Deploying a static site to a hosting platform. See cloud computing explained

• Components, props and state
• Hooks (useState, useEffect)
• Rendering lists and handling forms
• Routing
• Fetching data and managing state
• Basics of TypeScript, later

Project: a full app with API data, such as an expense tracker or recipe finder.

• Express (or a similar framework)
• Building REST APIs
• Databases: SQL or MongoDB. See SQL for beginners
• Authentication basics and environment variables
• Deployment

Project: an API for notes or tasks with a database.

Do frontend and backend in sequence, building one end-to-end project. See the web development roadmap.

TypeScript adds types to JavaScript and is widely used in jobs. Learn it after you're comfortable with JavaScript, usually after Stage 4 or 5.

1. Interactive page: a quiz, a calculator or a to-do app
2. API app: a weather or movie search
3. A full project with routing, forms and saved data
4. A project with a backend, if you follow that path

For each, write a README, publish on GitHub and, if possible, deploy a live demo. See build a developer portfolio website.

• Type the code instead of pasting.
• Break things to see the errors.
• Build before you feel ready.
• Read other people's code, and open-source projects.
• Use documentation (MDN is excellent).
• Solve small problems on coding practice sites.
• Review with spaced repetition. See spaced repetition.
• Avoid tutorial hell: after each tutorial, build something similar on your own.

Use AI tools to explain errors and concepts, but write code yourself first. See learning with AI and writing better AI prompts.

• Jumping to React before understanding JavaScript
• Skipping HTML and CSS
• Collecting tutorials without building
• Copy-pasting without understanding
• Learning too many tools at once
• Ignoring errors instead of reading them
• Putting API keys in front-end code
• Not using Git

The basics take 2 to 3 months of steady practice. Becoming job-ready usually takes 6 to 12 months.

Not for new projects. Learn modern JavaScript.

Choose JavaScript if you want to build websites. Python is gentler for data and automation.

React has the most jobs in many markets. Check local job posts, then pick one and stay with it.

You'll also need HTML, CSS, Git, basic databases and projects. See first job search guide for freshers and software interview preparation.

Tools and frameworks change quickly. Check official documentation for current versions and practices.