Javascript Mastery
🔥 Week 1: Deepening Core Fundamentals
📌
Day 1 (Apr 22): Execution Context, Hoisting, and Call Stack
Exercise: Visualize code execution step-by-step using Loupe or Chrome DevTools.
📌 Build: Counter factory function using closure. Try returning multiple counters from
Day 2 (Apr 23): Closures, Scope Chain, Lexical Environment
one parent function. curring
Day 3 (Apr 24): this Keyword & Binding (call, apply, bind)
📌 Exercise: Rebind a method to different objects. Manually implement a custom
version of bind.
📌
Day 4 (Apr 25): Prototypes & Prototype Chain
Build: Custom constructor function and simulate inheritance using __proto__ or
Object.create.
📌
Day 5 (Apr 26): ES6+ Features (spread/rest, destructuring, optional chaining, etc.)
Exercise: Refactor an old script using modern syntax. Create a utility file using map,
reduce, optional chaining.
📌
Day 6 (Apr 27): Functional Programming in JavaScript
Build: Your own versions of map, filter, and reduce. Avoid mutation.
📌 Exercise: Convert callback-based code (e.g., setTimeout chains) to Promises and
Day 7 (Apr 28): Arrow Functions, Callbacks vs Promises
async/await.
🧠 Week 2: Async JavaScript & Advanced Patterns
📌
Day 8 (Apr 29): Event Loop, Tasks vs Microtasks
Exercise: Predict console output with combinations of setTimeout, Promise, and
async/await.
📌
Day 9 (Apr 30): Async/Await Deep Dive
Build: Use fetch with async/await to pull data from a free API (e.g., dog.ceo,
jsonplaceholder). Use axios, tanstack query
📌
Day 10 (May 1): Error Handling Patterns
Exercise: Write a retry function with exponential backoff for an unreliable API call.
📌
Day 11 (May 2): Generators & Iterators
Build: A custom range iterator using Symbol.iterator. Yield values conditionally.
📌 Build: A real-time typing indicator or mouse tracker using RxJS or manual
Day 12 (May 3): Observables and RxJS Intro
subscription model. Rxjs marbles
📌
Day 13 (May 4): Debounce & Throttle
Build: Debounced input search, and a throttled scroll position tracker. Use lodash for
reference.
📌
Day 14 (May 5): Review + Mini Project
Build: Weather App with OpenWeatherMap API (with loading states and error
handling).
⚙️ Week 3: OOP, Patterns & Tooling
📌
Day 15 (May 6): Object-Oriented JavaScript & Classes
Build: A class-based Todo List using ES6 classes with save/load from
localStorage.
📌
Day 16 (May 7): Design Patterns (Factory, Module, Singleton, Observer)
🔧
Exercise: Implement 3 classic patterns.
Tip: Use a logger singleton, a factory for creating users, and observer for notification
events.
📌
Day 17 (May 8): Modules & Bundlers (ESM, CommonJS, Webpack/Vite)
Exercise: Create a small app with module imports and bundle it using Vite.
📌
Day 18 (May 9): Error Handling, Logging & Debugging
Setup: Create a global error handler. Use try...catch, window.onerror, and
console styling.
📌
Day 19 (May 10): Performance Optimization
Exercise: Lazy-load images, memoize expensive functions, optimize loops. Use
requestIdleCallback.
📌
Day 20 (May 11): Reusable & Testable Code
Exercise: Refactor a utility module to have 100% unit test coverage with Jest.
📌 Task: Take a previous project (e.g., Todo or Weather App) and clean up
Day 21 (May 12): Review + App Refactor
architecture, folder structure, and patterns.
🚀 Week 4: Real-World Apps & Interview Prep
📌
Day 22 (May 13): JS in the Browser – DOM, Events, and Web APIs
Build: Custom form validator with real-time feedback (no libraries).
📌 Build: A notepad that saves to localStorage, with background saving via Web
Day 23 (May 14): Advanced Browser APIs – LocalStorage, Web Workers
Worker.
📌
Day 24 (May 15): Dev Tools Mastery
Exercise: Use Chrome DevTools to audit page performance and memory. Try
performance.mark.
📌
Day 25 (May 16): TypeScript for JS Developers
Refactor: Migrate one of your JavaScript apps to TypeScript. Focus on typing
functions and interfaces.
📌
Day 26 (May 17): Testing in JS (Jest, Testing Library)
Build: Write tests for form validator or weather app using Jest and Testing Library.
📌 Build: Tiny virtual DOM renderer and reactivity system to simulate React or Vue
Day 27 (May 18): Build a Mini Framework (Optional Challenge)
basics.
📌
Day 28 (May 19): Architecture & System Design
📌
Study: MVC, MVVM, and modular JS architecture.
Task: Diagram architecture of one of your projects.
📌
Day 29 (May 20): Interview Questions & Algorithms
Practice: Solve 3 JavaScript problems from LeetCode, HackerRank, or
FrontendExpert.
📌
Day 30 (May 21): Final Project & Portfolio Boost
Build: Choose a capstone project (e.g., eCommerce cart, admin dashboard, or
📌
real-time chat).
Polish: Add README, host on GitHub, and deploy to Netlify/Vercel.
