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