JavaScript 14-Day Roadmap
Optimized for Mobile Offline Learning - Ethiopia
DAY 1: Logic & Repetition
Topics: while loop, for loop
Video: JavaScript Loops (Net Ninja)
Length: 15 min | Search Query: "Net Ninja JavaScript Loops"
Shaun uses visual diagrams to explain loops, making them easy to visualize on a phone screen.
DAY 2: The Building Blocks
Topics: Functions, Function Expressions
Video: JavaScript Functions (Dave Gray)
Length: 25 min | Search Query: "Dave Gray JavaScript Functions"
Dave Gray is extremely thorough and explains the difference between declarations and expressions
slowly.
DAY 3: Modern Syntax & Scope
Topics: Arrow Functions, Closures
Video: JS Arrow Functions & Closures (Web Dev Simplified)
Length: 18 min | Search Query: "Web Dev Simplified arrow functions"
Kyle simplifies complex scope rules and gets straight to the point without fluff.
DAY 4: Data Structures (Arrays)
Topics: Arrays (Deeply), sort()
Video: JavaScript Arrays (Net Ninja)
Length: 20 min | Search Query: "Net Ninja JavaScript Arrays"
Essential for learning how to store lists of data. Great slow-paced explanation.
DAY 5: Data Structures (Objects)
Topics: Objects, "this" keyword, Destructuring
Video: JavaScript Objects (Dave Gray)
Length: 35 min | Search Query: "Dave Gray JavaScript Objects"
Covers how objects act as blueprints for data. Dave explains the "this" keyword very clearly.
DAY 6: The "Big Four" Array Methods
Topics: forEach, map, filter, reduce
Video: Array Methods (Web Dev Simplified)
Length: 25 min | Search Query: "Web Dev Simplified array methods map filter"
Compares them side-by-side so you know exactly which one to pick for a specific task.
DAY 7: Review & Practical Application
No new videos. Practice building an array of objects (like a list of items) and filtering
them by price. Rewatch Day 6 if you feel shaky on map/filter.
DAY 8: OOP (The Blueprint)
Topics: Classes, Constructor Functions, Static
Video: JS Classes (Programming with Mosh)
Length: 30 min | Search Query: "Programming with Mosh JavaScript Classes"
Mosh explains coding concepts like building houses, which is very helpful for visual learners.
DAY 9: Advanced Classes & Dates
Topics: Inheritance, super, Getters/Setters, Date Object
Video: Inheritance & Super (Net Ninja)
Length: 25 min | Search Query: "Net Ninja JS inheritance super"
Shows how classes can "share" code to save time. Shaun's high-contrast editor is easy to read on
mobile.
DAY 10: The DOM (Visual JS)
Topics: DOM Deeply, Event Listeners, ClassList
Video: DOM Crash Course (Traversy Media)
Length: 50 min | Search Query: "Traversy Media DOM tutorial part 1"
The most important day for making websites actually "interactive." Essential for any front-end dev.
DAY 11: Timing & Order
Topics: setTimeout, Callbacks, Sync vs Async
Video: Asynchronous JS (Net Ninja)
Length: 20 min | Search Query: "Net Ninja async JavaScript"
Explains how JS handles time, preparing you for talking to servers.
DAY 12: Errors & JSON
Topics: try/catch, JSON, ES6 Modules
Video: JSON & Error Handling (Dave Gray)
Length: 30 min | Search Query: "Dave Gray JavaScript JSON"
Explains how to prevent your app from crashing and how data is formatted for the web.
DAY 13: Promises
Topics: Callback Hell, Promises Deeply
Video: JS Promises (Web Dev Simplified)
Length: 20 min | Search Query: "Web Dev Simplified promises"
Visualizes how to escape "Callback Hell" using clean Promise syntax. Very beginner-friendly.
DAY 14: Data Fetching
Topics: Async/Await, Fetch API
Video: Async/Await & Fetch (Net Ninja)
Length: 45 min | Search Query: "Net Ninja fetch api async await"
The final step: connecting your app to the internet to get real data.
Final Project Ideas
• Digital Clock: Use Date and setTimeout.
• To-Do List: Use Arrays, Objects, and DOM.
• User Fetcher: Use Fetch and Async/Await.
Top 5 Struggle Topics: 'this', Closures, Reduce, Async Order, Promises.
Tip: Download these videos while you have internet to watch them offline!