Comprehensive JavaScript Study Plan (80-20 Rule)

Focus on the 20% of concepts that power 80% of real-world projects. Master these fundamentals first, then expand through projects.

Core Learning (2 Weeks)

Daily Structure:

• Morning: Study concepts (1–2 hours).
• Afternoon: Practice exercises (1–2 hours).
• Evening: Reflect, debug, and review (30 mins).

Week 1: Foundations

Day 1: Basics

• Topics: Variables (let, const), data types (strings, numbers, booleans), operators (+, ===, !).
• Resources: MDN JavaScript Basics, freeCodeCamp’s JS Syntax course.
• Practice: Write code to calculate BMI or convert Celsius to Fahrenheit.

Day 2: Control Flow

• Topics: Conditionals (if/else, switch), loops (for, while).
• Resources: JavaScript.info Conditionals and Loops.
• Practice: Solve FizzBuzz, print prime numbers.

Day 3: Functions

• Topics: Function declarations, parameters, return, arrow functions, scope.
• Resources: MDN Functions Guide.
• Practice: Create a function to reverse a string or calculate factorials.

Day 4: DOM Manipulation

• Topics: Select elements (querySelector), modify content (textContent, innerHTML), styles (classList).
• Resources: freeCodeCamp DOM Manipulation Tutorial.
• Practice: Build a button that changes page background color.

Day 5: Events

• Topics: Event listeners (click, submit), event objects, preventDefault().
• Resources: JavaScript.info Introduction to Events.
• Practice: Create a toggle button for dark/light mode.

Day 6: Arrays

• Topics: Array methods (push, pop, map, filter, forEach).
• Resources: MDN Array Guide.
• Practice: Filter even numbers from an array or sort names alphabetically.

Day 7: Review & Mini-Project

• Review: Rebuild earlier exercises without referencing code.
• Mini-Project: Simple counter app (increment/decrement buttons).

Week 2: Intermediate Concepts

Day 8: Objects

• Topics: Object literals, methods, this keyword, destructuring.
• Resources: JavaScript.info Objects Basics.
• Practice: Create a user object with methods to update profile data.

Day 9: Asynchronous JS

• Topics: Callbacks, promises, async/await, fetch().
• Resources: MDN Asynchronous JavaScript.
• Practice: Fetch data from JSONPlaceholder API and display titles.

Day 10: Error Handling

• Topics: try/catch, throwing errors, debugging with console.
• Resources: JavaScript.info Error Handling.
• Practice: Add error handling to your API fetch code.

Day 11: ES6+ Features

• Topics: Template literals, spread/rest operators, modules (import/export).
• Resources: ES6 for Everyone (free course).
• Practice: Refactor old code using ES6 syntax.

Day 12: Local Storage

• Topics: localStorage, JSON.stringify(), JSON.parse().
• Resources: MDN Web Storage API.
• Practice: Save and retrieve user preferences (e.g., dark mode).

Day 13: Closures & Callbacks

• Topics: Lexical scope, closure examples, higher-order functions.
• Resources: MDN Closures.
• Practice: Create a function factory (e.g., multiplier functions).

Day 14: Final Review & Prep for Projects

• Review: Build a small app combining DOM, events, and localStorage.
• Prep: Set up a project folder with HTML/CSS/JS files.

5 Projects to Apply & Expand Knowledge

Build these in order, increasing complexity and autonomy. Use documentation and Google to solve roadblocks.

1. To-Do List (Beginner)

• Description: Add, delete, and mark tasks as complete.
• Key Concepts:
  • DOM manipulation (rendering tasks dynamically).
  • Event handling (form submission, click events).
  • Array methods (filter for deleting tasks).
  • Local storage (persist tasks on reload).

2. Weather App (Intermediate)

• Description: Fetch real-time weather data from an API (e.g., OpenWeatherMap).
• Key Concepts:
  • fetch() and async/await.
  • Working with JSON data.
  • Error handling for API failures.
  • Dynamic DOM updates based on user input (city search).

3. Quiz Game (Intermediate+)

• Description: Timed quiz with multiple-choice questions and a scoreboard.
• Key Concepts:
  • Object-oriented design (quiz and question classes).
  • setInterval for timers.
  • State management (tracking current question, score).
  • Event delegation for answer buttons.

4. Budget Tracker (Advanced)

• Description: Track income/expenses with charts (use Chart.js).
• Key Concepts:
  • Complex state (transactions, balance, categories).
  • Integration with third-party libraries (Chart.js).
  • Form validation and error feedback.
  • Local storage for data persistence.

5. Full-Stack Bookstore (Advanced+)

• Description: CRUD app with a Node.js/Express backend and vanilla JS frontend.
• Key Concepts:
  • REST API design (GET, POST, DELETE).
  • Advanced async operations (frontend-backend communication).
  • Modular code (separate API service module).
  • Deployment basics (DigitalOcean, Netlify).

Tips for Success

1. Code Daily: Even 30 minutes reinforces muscle memory.
2. Break Problems Down: Use pseudocode to plan projects step-by-step.
3. Embrace Debugging: Learn to use console.log() and Chrome DevTools.
4. Refactor Ruthlessly: Improve code readability and efficiency after getting it working.

This plan balances structured learning with creative problem-solving. Start small, iterate often, and celebrate progress!