LEARNING PROGRAMME | STRUCTURED STUDY GUIDE June 2026

Self-Paced | Beginner to Advanced | 16 Weeks | 3-4 Hours Daily

■ PROGRAMME OVERVIEW

This 16-week self-paced JavaScript programme is designed for 3–4 hours of focused daily study. It takes
you from absolute zero — no coding experience needed — all the way to writing real-world full-stack
applications using modern JavaScript. Each phase builds directly on the last. Stick to the daily schedule,
QURAN — SURAH AL-'ALAQ 96:1-5
complete every project, and you will finish job-ready.
"Read! In the name of your Lord who created,
Phase Duration Level Focus Area Goal
Who created man from a clinging substance.
Phase 1 Weeks 1–3 ■ Beginner JS Fundamentals Write basic programs
Read! And your Lord is the Most Generous,
Phase 2 Weeks 4–6 ■ Beginner+ DOM & Browser JS Build interactive pages

Phase 3 Weeks 7–9 Who

■ taught
Intermediate by the pen
ES6+ —
& Async JS Modern JS & APIs

Phase 4 Weeks 10–12 ■ Intermediate+ [Link] & Backend Server-side apps

Taught man what he knew not."
Phase 5 Weeks 13–15 ■ Advanced Frameworks & Tools React & ecosystem
Surah Al-'Alaq (The Clot), 96:1-5 — The first revelation, a divine command to seek knowledge
Phase 6 Week 16 ■ Capstone Full Project Portfolio-ready app

■DURATION
Pro Tips: DAILY STUDY
• 16
SetWeeks
a fixed study window daily — treat it like a job appointment.
3 - 4 Hours
• LEVEL
Code every example by hand. Don't copy-paste — your fingers PROJECTS
must learn too.
Beginner to Advanced 6 Phase
• Keep a coding journal: write what confused you and how you solved it. Projects + Capstone
• If stuck for more than 30 minutes, Google it or ask ChatGPT — then understand the answer fully.

PREPARED FOR

Faidat Ayomide
June 2026
 ■ PHASE 1 — JAVASCRIPT FUNDAMENTALS (Weeks 1–3)

Phase 1 is your foundation. Everything in JavaScript — no matter how advanced — sits on these basics.
Do not rush. Understand each concept deeply before moving forward. By end of Week 3, you should be
able to write a working mini-application from scratch.

■ Week 1 — Getting Started & Core Syntax

Day Topics Subtopics Practice Task Time Split

Day 1 Setup & Hello World Install VS Code, Print 'Hello Esther!' 5 1hr theory + 2hr practice
[Link], browser different ways
console basics

Day 2 Variables & Data Types var, let, const; strings, Build a personal profile 1hr theory + 2.5hr practice
numbers, booleans, object
null, undefined

Day 3 Operators Arithmetic, comparison, Calculator using all 1hr theory + 2.5hr practice
logical, ternary operators
operators

Day 4 Conditionals if/else, else if, switch Grade calculator app 1hr theory + 2.5hr practice
statements

Day 5 Loops for, while, do-while, Multiplication table 1hr theory + 2.5hr practice
for...of, for...in generator

Day 6 Functions Declaration, expression, Build 5 utility functions 1hr theory + 2.5hr practice
arrow functions,
parameters, return

Day 7 Review & Mini-Project Recap all week 1 topics BMI Calculator app (no 4hr project
HTML)

■ Week 2 — Arrays, Objects & String Magic

Day Topics Subtopics Practice Task Time Split

Day 8 Arrays Create, access, modify, Shopping list manager 1hr theory + 2.5hr practice
length, spread operator

Day 9 Array Methods I push, pop, shift, unshift, Task tracker with 1hr theory + 2.5hr practice
splice, slice, indexOf add/remove

Day 10 Array Methods II map(), filter(), reduce(), Filter and sort a product 1hr theory + 2.5hr practice
find(), forEach() list

Day 11 Objects Object literals, access, Bank account object 1hr theory + 2.5hr practice
methods, this keyword with methods

Day 12 String Methods toUpperCase, split, join, Name formatter tool 1hr theory + 2.5hr practice
includes, replace,
template literals
 Day Topics Subtopics Practice Task Time Split

Day 13 Destructuring Array & object Refactor week 1 1hr theory + 2.5hr practice
destructuring, projects with
rest/spread destructuring

Day 14 Review & Mini-Project Recap week 2 Student Grade Book 4hr project
app

■ Week 3 — Scope, Closures & Error Handling

Day Topics Subtopics Practice Task Time Split

Day 15 Scope Global, local, block Scope experiment 1hr theory + 2.5hr practice
scope, variable hoisting exercises

Day 16 Closures What closures are, why Counter factory function 1.5hr theory + 2hr practice
they matter, common
patterns

Day 17 Higher-Order Functions Functions as Event simulator with 1hr theory + 2.5hr practice
arguments, returning callbacks
functions, callbacks

Day 18 Error Handling try/catch/finally, throw, Add error handling to all 1hr theory + 2.5hr practice
custom errors, previous projects
debugging

Day 19 Recursion Recursive functions, Factorial, Fibonacci, 1.5hr theory + 2hr practice
base case, call stack countdown

Day 20 Math & Date Objects [Link](), Random quiz question 1hr theory + 2.5hr practice
[Link](), Date(), picker + age calculator
time methods

Day 21 Phase 1 Final Project All fundamentals Console-based Quiz 4hr project
combined Game App

■ Milestone Checkpoints:
✔ Can write functions with parameters and return values confidently
✔ Understands loops and can use them to solve real problems
✔ Knows how to work with arrays and objects
✔ Can debug simple errors in the console
✔ Has completed 3 mini-projects independently

■ Books: ■ YouTube Channels:

• Eloquent JavaScript — Marijn Haverbeke (Free online: • Traversy Media — Crash Course playlist
[Link]) • The Odin Project ([Link]) — free curriculum
• JavaScript: The Good Parts — Douglas Crockford • Bro Code — JavaScript Full Course
• Head First JavaScript Programming — Freeman & • [Link] — JavaScript Algorithms (YouTube)
Robson
 ■ PHASE 2 — DOM & BROWSER JAVASCRIPT (Weeks 4–6)

Now JavaScript gets visual. The DOM (Document Object Model) is how JS talks to your HTML and CSS.
By the end of Phase 2, you'll be building real interactive web pages — buttons that do things, forms that
validate, and live updating content.

■ Week 4 — Understanding & Manipulating the DOM

Day Topics Subtopics Practice Task Time Split

Day 22 How the DOM Works Tree structure, nodes, Draw a DOM tree for a 1hr theory + 2.5hr practice
elements, HTML-JS sample page
relationship

Day 23 Selecting Elements getElementById, Select and log 10 1hr theory + 2.5hr practice
querySelector, different elements
querySelectorAll,
getElementsByClass

Day 24 Changing Content & innerHTML, Theme switcher 1hr theory + 2.5hr practice
Style textContent, style, (dark/light mode)
classList, setAttribute

Day 25 Creating & Removing createElement, Dynamic to-do list 1hr theory + 2.5hr practice
Elements appendChild,
insertBefore,
removeChild

Day 26 Event Listeners I addEventListener, click, Interactive colour picker 1hr theory + 2.5hr practice
mouseover, keydown,
load

Day 27 Event Listeners II Event delegation, event Dynamic table with 1hr theory + 2.5hr practice
object, preventDefault, deletable rows
stopPropagation

Day 28 Mini-Project Full DOM manipulation Digital Clock + 4hr project

Stopwatch App

■ Week 5 — Forms, Validation & Local Storage

Day Topics Subtopics Practice Task Time Split

Day 29 Working with Forms Input, select, textarea, Contact form with live 1hr theory + 2.5hr practice
form events, FormData preview

Day 30 Form Validation Client-side validation, Sign-up form with 1hr theory + 2.5hr practice
regex basics, custom validation
error messages

Day 31 Local Storage setItem, getItem, Persistent to-do list 1hr theory + 2.5hr practice
removeItem, (survives refresh)
[Link]/parse
 Day Topics Subtopics Practice Task Time Split

Day 32 Session Storage & Difference from Shopping cart using 1hr theory + 2.5hr practice
Cookies localStorage, when to localStorage
use each

Day 33 Browser APIs I Geolocation, clipboard, Location display app 1hr theory + 2.5hr practice
navigator, window
object

Day 34 Timers & Animation setTimeout, setInterval, Pomodoro timer app 1hr theory + 2.5hr practice
clearTimeout,
requestAnimationFrame

Day 35 Mini-Project Forms + storage + Notes App with tags & 4hr project
events localStorage

■ Week 6 — Projects & Consolidation

Day Topics Subtopics Practice Task Time Split

Day 36 CSS-JS Interaction Animations via JS, CSS Animated card slider 1hr theory + 2.5hr practice
variables, transition
control

Day 37 Keyboard & Mouse keyup, keydown, Snake game or 1hr theory + 2.5hr practice
Events mouseenter, drag keyboard piano
events

Day 38 Infinite Scroll & Lazy Scroll events, Infinite scroll photo feed 1hr theory + 2.5hr practice
Loading IntersectionObserver
API

Day 39 Refactoring Practice DRY principle, clean Refactor all Week 4-5 1hr theory + 2.5hr practice
code, naming projects
conventions

Day 40 Code Review Skills Reading code, console Debug 5 broken JS files 1hr theory + 2.5hr practice
debugging, DevTools
deep dive

Day 41 Phase 2 Revision Review all DOM, Flashcard study + quiz 2hr review + 2hr practice
events, storage topics yourself

Day 42 Phase 2 Final Project Full browser JS Weather Dashboard (UI 4hr project
application only, static data)

■ Milestone Checkpoints:
✔ Can select, modify, and create DOM elements confidently
✔ Handles user events (clicks, forms, keyboard) without reference
✔ Saves and retrieves data from localStorage
✔ Has built at least 2 interactive UI projects
■ Books: ■ YouTube Channels:
• JavaScript & jQuery — Jon Duckett (visual, great for • Kevin Powell — CSS + JS DOM tutorials
beginners) • Web Dev Simplified — DOM Crash Course playlist
• Eloquent JavaScript — Ch. 13–18 (DOM chapters) • Florin Pop — 10 JS projects in 10 hours
• JavaScript30 by Wes Bos — 30 FREE DOM projects
([Link])
 ■ PHASE 3 — ES6+ MODERN JS & ASYNC PROGRAMMING (Weeks 7–9)

This phase is where most beginners either level up or get stuck. Asynchronous JavaScript — Promises,
async/await, and Fetch — is what powers every real-world app. Master this, and you can work with any
API on the internet. ES6+ features will also make your code cleaner and faster to write.

■ Week 7 — Modern ES6+ Features

Day Topics Subtopics Practice Task Time Split

Day 43 let, const & Arrow Block scope review, Rewrite 10 old functions 1hr theory + 2.5hr practice
Functions concise arrow syntax, in ES6 style
implicit return

Day 44 Template Literals & Multi-line strings, Generate HTML cards 1hr theory + 2.5hr practice
Destructuring embedded expressions, with template literals
deep destructuring

Day 45 Spread & Rest Copying arrays/objects, Merge multiple 1hr theory + 2.5hr practice
Operators merging data, variadic shopping lists app
functions

Day 46 Default Parameters & Default values, property Refactor calculator with 1hr theory + 2.5hr practice
Short Syntax shorthand, computed default params
properties

Day 47 Modules (Import/Export) ES modules, named vs Split a project into 3 1.5hr theory + 2hr practice
default exports, module module files
pattern

Day 48 Classes & OOP class, constructor, Build Animal → Dog 1.5hr theory + 2hr practice
inheritance, extends, class hierarchy
super, static methods

Day 49 Mini-Project All ES6+ features Object-Oriented To-Do 4hr project

App with modules

■ Week 8 — Asynchronous JavaScript

Day Topics Subtopics Practice Task Time Split

Day 50 The Call Stack & Event How JS handles async, Visualise the event loop 1.5hr theory + 2hr practice
Loop single-threaded model, with diagrams +
task queue experiments

Day 51 Callbacks & Callback What callbacks are, Build a nested callback 1hr theory + 2.5hr practice
Hell why they become example, then see the
messy problem

Day 52 Promises new Promise(), .then(), Promise-based 1.5hr theory + 2hr practice
.catch(), .finally(), countdown timer
chaining
 Day Topics Subtopics Practice Task Time Split

Day 53 [Link] & Running promises in Simulate fetching data 1hr theory + 2.5hr practice
[Link] parallel, handling from 3 sources
multiple results simultaneously

Day 54 Async / Await async functions, await, Rewrite all promise 1.5hr theory + 2hr practice
try/catch with code using async/await
async/await

Day 55 The Fetch API fetch(), GET & POST Fetch random jokes 1hr theory + 2.5hr practice
requests, reading JSON from a public API
responses

Day 56 Mini-Project Async + Fetch + DOM Random User Profile 4hr project
App ([Link]
API)

■ Week 9 — APIs, JSON & Real-World Data

Day Topics Subtopics Practice Task Time Split

Day 57 Understanding REST HTTP methods (GET, Test 5 APIs in browser 1.5hr theory + 2hr practice
APIs POST, PUT, DELETE), + Postman/Insomnia
status codes, headers

Day 58 Working with JSON JSON structure, Build a JSON data 1hr theory + 2.5hr practice
[Link], viewer
[Link], nested
data

Day 59 Authentication Basics API keys, how to keep Connect to 1hr theory + 2.5hr practice
them safe, .env basics OpenWeatherMap API
with key

Day 60 Error Handling in Async try/catch patterns, Add full error UI to 1hr theory + 2.5hr practice
network errors, 404s, weather app
timeouts

Day 61 Axios Library Installing via CDN, Redo weather app 1hr theory + 2.5hr practice
[Link](), [Link](), using Axios
interceptors

Day 62 Working with Free APIs: REST Country explorer app 1hr theory + 2.5hr practice
Third-Party APIs Countries, Open Trivia
DB, NASA APOD

Day 63 Phase 3 Final Project Full async + API + DOM Full Weather App 4hr project
application (search, forecast, error
states)
■ Milestone Checkpoints:
✔ Writes modern ES6+ code naturally (arrow functions, destructuring, modules)
✔ Understands Promises and can use async/await without confusion
✔ Can connect to any public REST API and display the data
✔ Handles errors in async operations gracefully

■ Books: ■ YouTube Channels:

• You Don't Know JS Yet (Book Series) — Kyle Simpson • Fireship — Async JS in 100 seconds + full tutorials
(free on GitHub) • Academind — JavaScript course (Udemy / YouTube)
• JavaScript: The Definitive Guide — David Flanagan • Net Ninja — Async JavaScript playlist
(reference) • Jack Herrington — Modern JavaScript deep dives
 ■ PHASE 4 — [Link] & BACKEND DEVELOPMENT (Weeks 10–12)

JavaScript doesn't stop at the browser. [Link] lets you run JS on the server — reading files, connecting
to databases, handling user logins, and building full APIs. This phase makes you a full-stack capable
developer.

■ Week 10 — [Link] Foundations

Day Topics Subtopics Practice Task Time Split

Day 64 What is [Link]? How Node works, Write and run 5 Node 1hr theory + 2.5hr practice
REPL, global objects scripts in terminal
(process, __dirname),
CommonJS vs ES
modules

Day 65 File System Module [Link], [Link], File-based notes 1hr theory + 2.5hr practice
[Link], manager
synchronous vs async

Day 66 Path & OS Modules [Link], [Link], Build a file organiser 1hr theory + 2.5hr practice
[Link](), [Link]() script

Day 67 Events & EventEmitter EventEmitter class, Custom event-driven 1hr theory + 2.5hr practice
.on(), .emit(), custom logging system
events

Day 68 HTTP Module [Link](), Build basic HTTP 1.5hr theory + 2hr practice
request/response, server (no framework)
status codes

Day 69 npm & Package npm init, install, scripts, Set up a full project with 1hr theory + 2.5hr practice
Management [Link], 3 dependencies
node_modules

Day 70 Mini-Project [Link] core modules CLI Task Manager 4hr project
(reads/writes to JSON
file)

■ Week 11 — [Link] & REST API Building

Day Topics Subtopics Practice Task Time Split

Day 71 [Link] Setup Install Express, Hello World Express 1hr theory + 2.5hr practice
[Link](), [Link](), server
routing basics

Day 72 Routes & HTTP GET, POST, PUT, Build a products REST 1hr theory + 2.5hr practice
Methods DELETE routes, route API (in-memory)
params, query strings
 Day Topics Subtopics Practice Task Time Split

Day 73 Middleware [Link](), built-in Add logging + CORS to 1hr theory + 2.5hr practice
middleware, third-party your API
(morgan, cors), custom
middleware

Day 74 Request & Response [Link], [Link], Full CRUD API for a 1hr theory + 2.5hr practice
[Link], [Link](), contacts list
[Link]()

Day 75 Error Handling in Error middleware, 404 Add error handling to 1hr theory + 2.5hr practice
Express handler, centralised contacts API
error response

Day 76 Environment Variables .env files, dotenv Move all config to .env 1hr theory + 2.5hr practice
package, never push in your API
secrets to GitHub

Day 77 Mini-Project Full Express REST API Bookstore API with full 4hr project
CRUD + error handling

■ Week 12 — Databases & Authentication

Day Topics Subtopics Practice Task Time Split

Day 78 MongoDB Introduction NoSQL vs SQL, Set up Atlas, create first 1.5hr theory + 2hr practice
MongoDB Atlas (free), database
collections, documents

Day 79 Mongoose ODM Connecting, schemas, Create User and Post 1hr theory + 2.5hr practice
models, validation schemas

Day 80 CRUD with Mongoose .find(), .findById(), Connect bookstore API 1hr theory + 2.5hr practice
.create(), .updateOne(), to MongoDB
.deleteOne()

Day 81 User Authentication bcrypt for passwords, Register endpoint with 1.5hr theory + 2hr practice
hashing vs encryption, hashed passwords
salts

Day 82 JWT (JSON Web How JWTs work, sign, Login endpoint + 1.5hr theory + 2hr practice
Tokens) verify, protect routes protected route
with middleware

Day 83 Deployment Basics Deploy to [Link] Deploy bookstore API 1.5hr theory + 2hr practice
or Railway (free), live to the internet
environment vars in
prod

Day 84 Phase 4 Final Project Full backend application Blog API (users, posts, 4hr project
auth, MongoDB) — fully
deployed
■ Milestone Checkpoints:
✔ Can build a REST API with [Link] from scratch
✔ Connects [Link] apps to MongoDB with Mongoose
✔ Implements user authentication with hashed passwords and JWTs
✔ Has deployed a live backend API to the internet

■ Books: ■ YouTube Channels:

• [Link] Design Patterns — Mario Casciaro • Dave Gray — [Link] / Express full tutorials (free)
(intermediate-advanced) • Traversy Media — [Link] Crash Course, Express Crash
• Learning Node — Shelley Powers (beginner-friendly) Course
• Net Ninja — [Link] for Beginners + MongoDB +
Mongoose playlists
• Codevolution — Express + MongoDB playlist
 ■ PHASE 5 — REACT & MODERN FRONTEND TOOLS (Weeks 13–15)

React is the most in-demand frontend skill in 2026. Built by Meta, it powers thousands of major apps
including Instagram, Airbnb, and Netflix. This phase teaches you component-based thinking, state
management, and how to connect your React frontend to your [Link] backend.

■ Week 13 — React Foundations

Day Topics Subtopics Practice Task Time Split

Day 85 What is React & Why Virtual DOM, Set up React project 1hr theory + 2.5hr practice
component model, with Vite, render Hello
create-react-app / Vite World
setup

Day 86 JSX JSX syntax rules, Convert 3 HTML pages 1hr theory + 2.5hr practice
embedding to JSX
expressions,
className, self-closing
tags

Day 87 Components Functional components, Build a card component 1hr theory + 2.5hr practice
props, children, used 5 different ways
component reuse

Day 88 useState Hook State concept, Counter, toggle, and 1.5hr theory + 2hr practice
useState(), updating form state
state, re-rendering

Day 89 useEffect Hook Side effects, Fetch data with 1.5hr theory + 2hr practice
dependency array, useEffect and display it
cleanup, API calls in
components

Day 90 Lists & Conditional .map() in JSX, key Dynamic product list 1hr theory + 2.5hr practice
Rendering props, ternary, && with filter UI
shortcircuit

Day 91 Mini-Project Core React concepts GitHub User Search 4hr project
App (React + GitHub
API)

■ Week 14 — React Intermediate & Routing

Day Topics Subtopics Practice Task Time Split

Day 92 React Router v6 BrowserRouter, Routes, Multi-page blog with 1.5hr theory + 2hr practice
Route, Link, routing
useNavigate,
useParams

Day 93 Forms in React Controlled inputs, form Login & register form 1hr theory + 2.5hr practice
submission, validation with validation
in React
 Day Topics Subtopics Practice Task Time Split

Day 94 useContext Context API, Theme switcher + user 1.5hr theory + 2hr practice
createContext, auth context
Provider, useContext vs
prop drilling

Day 95 useReducer When to use Shopping cart with 1.5hr theory + 2hr practice
useReducer vs useReducer
useState, dispatch,
actions

Day 96 Custom Hooks Creating reusable logic, Build 3 custom hooks 1.5hr theory + 2hr practice
useFetch, from scratch
useLocalStorage

Day 97 Styling in React CSS Modules, Tailwind Restyle GitHub app with 1hr theory + 2.5hr practice
CSS with React, Tailwind
styled-components intro

Day 98 Mini-Project React Router + Context Multi-page Portfolio 4hr project

+ Forms Website (React)

■ Week 15 — Full Stack & Advanced Patterns

Day Topics Subtopics Practice Task Time Split

Day 99 Connecting React to Axios in React, Connect React app to 1.5hr theory + 2hr practice
Your API environment variables, Node/Express backend
CORS setup

Day 100 Authentication in React Login flow, storing JWT Full login/logout with 1.5hr theory + 2hr practice
in memory/cookie, JWT
protected routes

Day 101 Performance [Link], Optimise the portfolio 1.5hr theory + 2hr practice
Optimisation useMemo, useCallback, app
lazy loading, Suspense

Day 102 State Management with Why Zustand, store Replace useContext 1hr theory + 2.5hr practice
Zustand setup, actions, persist shopping cart with
middleware Zustand

Day 103 Testing Basics Jest, React Testing Write tests for 3 1.5hr theory + 2hr practice
Library, writing basic components
unit tests

Day 104 TypeScript Intro Why TypeScript, basic Convert one component 1.5hr theory + 2hr practice
types, interfaces, using file to TypeScript
TS in React

Day 105 Phase 5 Final Project Full React application E-Commerce Frontend 4hr project
with cart, auth, product
listings
■ Milestone Checkpoints:
✔ Builds multi-page React apps with React Router
✔ Manages global state with Context and Zustand
✔ Connects React frontend to a real backend API with authentication
✔ Understands performance optimisation patterns
✔ Has a portfolio-worthy React project deployed online

■ Books: ■ YouTube Channels:

• The Road to React — Robin Wieruch (updated yearly, • Scrimba — React course (interactive, free tier available)
free online) • Codevolution — React 18 Hooks series + React Router
• Full-Stack React Projects — Shama Hoque v6
• Jack Herrington — Advanced React Patterns (YouTube)
• ByteGrad — Modern React + TypeScript tutorials
 ■ PHASE 6 — CAPSTONE PROJECT WEEK (Week 16)

This is your graduation week. You will plan, design, build, and deploy a complete full-stack application
entirely by yourself. No tutorials. No copy-pasting. This is the project that goes on your portfolio, your CV,
and your LinkedIn. Make it matter.

Day Activity Details Deliverable Hours

Day 106 Project Planning Choose your idea, write Written project spec 3–4 hrs
user stories, design the document
database schema,
sketch the UI

Day 107 Backend Setup Set up Node/Express, Functional API with all 3–4 hrs
connect MongoDB, endpoints
create all models and
routes

Day 108 Authentication & JWT auth, protected Secure login/register 3–4 hrs
Security routes, input validation working
with Joi or Zod

Day 109 Frontend — Core UI React setup, routing, All pages rendering with 3–4 hrs
components, connect to real data
backend

Day 110 Frontend — State & State management, Fully functional app 3–4 hrs
Polish loading states, error
handling, mobile
responsiveness

Day 111 Deployment Deploy backend Live URL that anyone 3–4 hrs
(Render), deploy can visit
frontend (Vercel),
connect them, test in
production

Day 112 Documentation & Write [Link], Public GitHub repo + 3–4 hrs
Showcase record a demo video, demo video
push to GitHub, share
on LinkedIn/X

■ Capstone Project Ideas

■ Personal Finance Tracker — Track income, expenses, savings goals. Auth, charts, categories.
■ Job Application Tracker — Log jobs applied to, statuses, notes, follow-up reminders.
■ Recipe & Meal Planner — Save recipes, plan weekly meals, generate shopping lists.
■ Trading Journal App — Log trades, track wins/losses, attach chart screenshots.
■ Content Creator Dashboard — Schedule posts, track ideas, monitor performance notes.
■ E-Commerce Mini Store — Product listings, cart, checkout flow, admin panel.
■ Pro Tips:
• Pick a project you would actually USE yourself — it will keep you motivated.
• Keep scope small: 3 main features done well beats 10 features half-finished.
• Write clean commit messages on GitHub: 'feat: add user login' not 'fix stuff'.
• Record a 2-minute Loom video walking through your project — employers love this.
 ■ MASTER RESOURCE GUIDE — ALL PHASES

■ Essential Books (in reading order)

# Book Title Author Best For Where to Get

1 Eloquent JavaScript (3rd ed.) Marijn Haverbeke Phase 1–3 deep Free: [Link]
foundation

2 JavaScript & jQuery Jon Duckett Phase 2 visual DOM Amazon / PDF online
learners

3 You Don't Know JS Yet Kyle Simpson Phase 3–4 deep Free on GitHub
(Series) understanding

4 The Road to React Robin Wieruch Phase 5 React mastery Free online / paid updated
edition

■ YouTube Channel Directory

Channel Best Content Phase Link/Search

[Link] Full JavaScript bootcamp (10hr) 1–3 [Link]/freeCodeCamp

Traversy Media Crash courses for every topic 1–5 [Link]/traversymedia

The Net Ninja Playlist-based, beginner friendly 1–4 [Link]/netninja

Web Dev Simplified Concise, practical explanations 2–4 [Link]/webdevsimplified

Fireship Fast, high-quality concept videos 3–5 [Link]/fireship

Codevolution React, Node, TypeScript series 4–5 [Link]/codevolution

Jack Herrington Advanced React patterns 5 [Link]/jherr

Kevin Powell CSS + JS layout mastery 2 [Link]/kevinpowell

■ Free Online Practice Platforms

■ [Link] — Full JavaScript curriculum + certification, 100% free
■ [Link] — 30 day vanilla JS challenge by Wes Bos — no frameworks, pure JS
■ [Link] — Coding challenges (kata) to sharpen problem solving daily
■ [Link] — Open-source full-stack curriculum, project-based learning
■ [Link] — Real design challenges to build portfolio projects
■ [Link] — Algorithm practice — start when you reach Phase 4
■ [Link] — Free online IDE — code in the browser, great for quick experiments
 ■ DAILY STUDY SCHEDULE & WINNING HABITS

Consistency beats intensity every time. 3 hours every day for 16 weeks is far more powerful than 10 hours
one weekend then nothing for 5 days. Here is a proven daily framework:

Time Block Activity Duration Goal

Block 1 — Theory Watch tutorial / read chapter, take notes in 60–75 mins Understand the concept
your own words

Break Step away from screen — walk, water, pray 10–15 mins Mental reset

Block 2 — Coding Build the practice task from scratch (no 90 mins Apply the concept
copy-paste)

Block 3 — Project Work on the week's mini-project, debug 45–60 mins Build real experience
issues, add features

End of Day Write 3 things you learned today, 1 thing 10 mins Lock in the learning
Review that confused you

■ The 7 Daily Habits of a Successful JS Learner

1. Code every single day — even 20 minutes on a hard day is better than zero.
2. Type every line yourself — your hands need to learn, not just your eyes.
3. Google like a pro — 'JavaScript how to loop through object keys' is a valid developer skill.
4. Build things, not just tutorials — tutorials give you the recipe, projects give you experience.
5. Share your progress publicly — post on X/Twitter, write about what you learned (builds your brand too!).
6. Join developer communities — local Discord servers, Twitter spaces, #100DaysOfCode challenge.
7. Celebrate milestones — every completed week deserves a small reward. You are doing something most
people never will.

■ Pro Tips:
• On difficult days, remember: every senior developer was once confused by the same things you are.
• Use Notion or a physical journal to track your progress. Looking back at Week 1 from Week 16 will blow your mind.
• The #100DaysOfCode challenge on X/Twitter is perfect for you as a content creator — document your journey!
• 'I don't understand this yet' is always temporary. 'I gave up' is permanent.