JavaScript Learning Roadmap: Topics, Theory, and Projects

Step Topic Theory Project Idea

Build a Simple Calculator
Basics of Learn about variables, data types,
1 for basic arithmetic
JavaScript operators, and expressions.
operations.
Create a Guess the
Study if, else, switch, and loops Number Game where the
2 Control Structures
(for, while, do-while). user guesses a randomly
generated number.
Develop a Temperature
Understand function declaration,
3 Functions Converter using functions
expressions, and arrow functions.
for conversions.
Learn how to access and modify
Build a Dynamic To-Do List
DOM HTML elements with
4 that lets users add, edit, and
Manipulation document.querySelector and
delete tasks.
document.getElementById.
Explore event types, event Create a KeyPress
Events and Event
5 propagation, and how to handle Visualizer that shows key
Listeners
events. codes when typing.
Create a Grocery List
Study array methods like push, pop, Manager with features like
6 Arrays
filter, map, reduce, and forEach. adding, editing, and sorting
items.
Learn about objects, properties, Build a Student Grades
7 Objects methods, and how to loop through Tracker using objects for
objects. student data.
Study modern features like let,
Build a Recipe Manager
const, template literals,
8 ES6 Features app using ES6 features to
destructuring, and the spread/rest
store and edit recipes.
operator.
Understand JSON format and how Fetch and display weather
9 JSON and APIs
to fetch data from APIs using fetch. data using a Weather App.
Learn how to handle asynchronous Build a GitHub User Finder
Promises and
10 operations with Promises and that fetches user data using
Async/Await
async/await. the GitHub API.
Create a Form Validator
Study try, catch, and finally for
11 Error Handling that handles errors for
managing errors in code.
invalid inputs.
Develop a Library App with
Explore ES6 classes, constructors,
12 Classes book objects and class-
inheritance, and methods.
based structure.
Build a Multi-Page
Learn how to use import and export Portfolio Website using
13 Modules
to organize your code into modules. JavaScript modules for
navigation.
Study localStorage,
Create a Notes App that
14 Browser Storage sessionStorage, and cookies for
saves notes in localStorage.
storing data in the browser.
Step Topic Theory Project Idea
Regular Build a Password Strength
Learn basic Regex syntax for
15 Expressions Checker using Regex to
pattern matching and validation.
(Regex) validate input.
Create a Countdown Timer
Understand how to work with dates
16 Date and Time for an event with real-time
and times using the Date object.
updates.
Study closures and how they Develop a Stopwatch App
17 Closures capture variables from their that uses closures to
surrounding scope. manage time intervals.
Build a Shape Drawer with
Prototypes and Understand JavaScript's prototype
18 different shapes inheriting
Inheritance chain and inheritance.
from a common prototype.
Learn how JavaScript’s event loop Visualize the event loop with
Event Loop and
19 and call stack work for an Interactive Event Loop
Async Flow
asynchronous behavior. Diagram using animations.
Study frameworks like React or Create a Chat Application
Advanced Node.js to expand your JavaScript with a real-time backend
20
Frameworks/Tools knowledge into frontend or backend (e.g., Node.js and
development. Socket.IO).

This roadmap covers foundational to advanced concepts, ensuring a balance between theoretical understanding and
practical application. Each project complements its respective topic to strengthen hands-on skills.