JavaScript Roadmap for Freshers
A comprehensive 8-week learning plan to master JavaScript programming from scratch
This roadmap assumes 3-4 hours of daily study (2 hours learning + 1-2 hours practice)
Week 1: JavaScript Fundamentals
| Day | Topics | Learn (hrs) | Practice (hrs) | Important Topics |
|---|---|---|---|---|
| Week 1: JavaScript Basics | ||||
| Day 1 |
JavaScript Introduction - History & Features - Where JS Runs (Browser/Node.js) - Hello World Program |
2 | 1 | Client-side vs Server-side, Script Tag |
| Day 2 |
JavaScript Basics - Variables (var, let, const) - Data Types - Console Input/Output |
2 | 1.5 | Primitive Types, Type Coercion |
| Day 3 |
Operators - Arithmetic, Logical - Comparison, Ternary - Type Operators |
1.5 | 1.5 | Loose vs Strict Equality, Truthy/Falsy |
| Day 4 |
Control Flow - if-else, switch - Loops (for, while) |
2 | 2 | Nested Control Structures |
| Day 5 |
More Control Flow - do-while, for-in, for-of - break, continue - Labeled Statements |
2 | 2 | Loop Control Statements |
| Day 6 |
Practice Day - Mini Projects - Problem Solving |
1 | 3 | Calculator, Number Games |
| Day 7 |
Review Day - Week 1 Concepts - Q&A Session |
1 | 2 | Common Mistakes, Debugging |
Week 2: Functions & Objects
| Day | Topics | Learn (hrs) | Practice (hrs) | Important Topics |
|---|---|---|---|---|
| Week 2: Core Concepts | ||||
| Day 8 |
Functions - Function Declarations - Parameters & Arguments - Return Values |
2 | 1.5 | Function Scope, Hoisting |
| Day 9 |
Advanced Functions - Function Expressions - Arrow Functions - Callback Functions |
2 | 2 | this Keyword, Lexical Scoping |
| Day 10 |
Arrays - Array Creation - Common Methods - Iteration Methods |
2.5 | 2 | Array Manipulation, forEach/map/filter |
| Day 11 |
Objects - Object Literals - Properties & Methods - Object References |
2 | 2 | Reference vs Value, Dot vs Bracket Notation |
| Day 12 |
Built-in Objects - Math, Date - JSON Methods - Storage Objects |
1.5 | 1.5 | LocalStorage, SessionStorage |
| Day 13 |
Practice Day - Array Problems - Object Manipulation |
1 | 3 | Todo List, Data Processing |
| Day 14 |
Review Day - Week 2 Concepts - Q&A Session |
1 | 2 | Common Patterns |
Week 3-4: DOM Manipulation & Events
| Day | Topics | Learn (hrs) | Practice (hrs) | Important Topics |
|---|---|---|---|---|
| Week 3: DOM Fundamentals | ||||
| Day 15 |
DOM Introduction - What is the DOM - Document Object - Node Hierarchy |
2.5 | 2 | DOM Tree Structure |
| Day 16 |
Selecting Elements - getElementById - querySelector - querySelectorAll |
2 | 2 | CSS Selectors |
| Day 17 |
Manipulating Elements - Changing Content - Modifying Attributes - Changing Styles |
2 | 2 | innerHTML vs textContent |
| Day 18 |
Creating Elements - createElement - appendChild - insertBefore |
2 | 2 | DOM Manipulation Performance |
| Day 19 |
Traversing the DOM - parentNode - childNodes - siblings |
1.5 | 1.5 | Node Relationships |
| Day 20 |
Practice Day - DOM Projects - Interactive Elements |
1 | 3 | Dynamic Content Generation |
| Day 21 |
Review Day - Week 3 Concepts - Q&A Session |
1 | 2 | DOM Best Practices |
| Week 4: Events & Forms | ||||
| Day 22 |
Event Handling - Event Listeners - Event Object - Event Propagation |
2.5 | 2 | Bubbling and Capturing |
| Day 23 |
Common Events - Mouse Events - Keyboard Events - Form Events |
3 | 2 | Event Delegation |
| Day 24 |
Form Handling - Form Validation - Form Submission - Input Types |
2 | 2 | Prevent Default Behavior |
| Day 25 |
Async JavaScript - setTimeout - setInterval - Callback Hell |
2.5 | 2 | Event Loop Concept |
| Day 26 |
Error Handling - try-catch - throw Statement - Custom Errors |
1.5 | 1.5 | Debugging Techniques |
| Day 27 |
Practice Day - Interactive Projects - Form Validation |
1 | 3 | Interactive Quiz App |
| Day 28 |
Review Day - Week 4 Concepts - Q&A Session |
1 | 2 | Event Best Practices |
Week 5-8: Advanced JavaScript & Projects
| Day | Topics | Learn (hrs) | Practice (hrs) | Important Topics |
|---|---|---|---|---|
| Week 5: ES6+ Features | ||||
| Day 29 |
ES6 Variables - let vs const - Temporal Dead Zone - Block Scoping |
2.5 | 2 | Hoisting Differences |
| Day 30 |
Template Literals - String Interpolation - Multi-line Strings - Tagged Templates |
2 | 2 | Dynamic String Generation |
| Day 31 |
Destructuring - Array Destructuring - Object Destructuring - Parameter Destructuring |
2.5 | 2 | Default Values |
| Day 32 |
Spread & Rest - Spread Operator - Rest Parameters - Use Cases |
3 | 2 | Array/Object Copying |
| Day 33 |
Modules - import/export - Named vs Default - Module Patterns |
2 | 2 | Code Organization |
| Day 34 |
Practice Day - ES6 Features - Refactoring Code |
1 | 3 | Modern JavaScript Patterns |
| Day 35 |
Review Day - Week 5 Concepts - Q&A Session |
1 | 2 | ES6 Best Practices |
| Week 6: Async JavaScript & APIs | ||||
| Day 36 |
Promises - Promise Basics - then/catch/finally - Promise Chaining |
2.5 | 2 | Error Handling with Promises |
| Day 37 |
Async/Await - async Functions - await Operator - Error Handling |
2 | 2 | Synchronous-looking Async Code |
| Day 38 |
Fetch API - HTTP Requests - GET/POST Requests - Handling Responses |
3 | 2 | REST API Consumption |
| Day 39 |
APIs Practice - Public APIs - JSON Data Handling - Error Management |
2.5 | 2 | API Integration Patterns |
| Day 40 |
Local Storage - localStorage API - sessionStorage - Storage Events |
2 | 2 | Data Persistence |
| Day 41 |
Practice Day - API Projects - Data Fetching |
1 | 3 | Weather App, News Reader |
| Day 42 |
Review Day - Week 6 Concepts - Q&A Session |
1 | 2 | Async Patterns |
| Week 7-8: Projects & Advanced Topics | ||||
| Day 43-49 |
Project Week - Portfolio Website - Interactive Web App - API-based Application |
1/day | 4/day | Real-world Application Development |
| Day 50-56 |
Advanced Topics - JavaScript Patterns - Performance Optimization - Testing (Jest) |
2/day | 3/day | Code Quality & Best Practices |
Learning Resources
Recommended Books
- Eloquent JavaScript by Marijn Haverbeke
- JavaScript: The Good Parts by Douglas Crockford
- You Don't Know JS Series by Kyle Simpson
Online Resources
- MDN JavaScript Documentation
- freeCodeCamp JavaScript Curriculum
- JavaScript.info Tutorial
Final Notes
This roadmap provides a structured approach to learning JavaScript. Remember that consistency is key - try to code every day, even if it's just for 30 minutes. Don't rush through concepts; make sure you understand each topic before moving to the next.
After completing this roadmap, you'll have a solid foundation in JavaScript and be ready to explore frameworks like React, Vue, or Node.js for backend development.