A single-page, interactive roadmap covering exactly the JavaScript you need before picking up React — no more, no less. Built as a self-study tool: check off topics, track progress per phase, and use the built-in prompt for each sub-topic to drive a structured learning session with an LLM of your choice.
Live: https://loedex.github.io/js-mastery-roadmap/
Most "JS before React" guides are either too shallow (a checklist with no depth) or too broad (a full language reference that covers things you won't touch in React for months). This roadmap is scoped deliberately: seven phases, ordered by what React actually asks of you first, each paired with a ready-to-use learning prompt so you're not starting from a blank page every session.
| # | Phase | Duration | Topics |
|---|---|---|---|
| 1 | The absolute basics | ~1 week | 3 |
| 2 | Functions — the heart of JS | ~1 week | 3 |
| 3 | Arrays & Objects — React's daily bread | ~2 weeks | 3 |
| 4 | Modern ES6+ syntax — React is written in this | ~1.5 weeks | 5 |
| 5 | DOM manipulation — just enough, not too much | ~4 days | 3 |
| 6 | Async JS — essential for real apps | ~1.5 weeks | 4 |
| 7 | Mini projects — then jump to React! | ~1 week | 2 |
23 sub-topics total, roughly a 3-month path at a steady pace.
- Self-contained — one HTML file, no build step, no dependencies. Open it and it works.
- Progress tracking — check off sub-topics; per-phase and overall progress update live, persisted only in-session (no backend, no tracking).
- Learning prompts — every sub-topic ships with a copy-ready prompt designed to walk an LLM through teaching that concept step by step, with practice exercises and beginner guardrails baked in.
- Search & filter — filter by "must-know" vs. "used in React," or search across all topics and syntax by name.
- Responsive — usable on mobile for quick review between study sessions.
Clone or download the repo and open index.html directly in a browser — that's the entire setup.
git clone https://github.com/loedex/js-mastery-roadmap.git
cd js-mastery-roadmap
open index.html # or just double-click itTo work through it:
- Expand a phase and pick a sub-topic.
- Open its Learning prompt, copy it, and paste it into your LLM of choice to start a guided lesson.
- Check off the topic once you're comfortable, and move to the next.
This repo is set up to be served as-is via GitHub Pages:
- Push
index.htmlto the repo root (or/docs). - Go to Settings → Pages and set the source to your default branch.
- GitHub will serve it at
https://loedex.github.io/js-mastery-roadmap/.
No build pipeline required — it's plain HTML, CSS, and vanilla JS.
Everything — phases, topics, and prompts — lives directly in index.html, clearly commented and easy to edit:
- Each learning prompt is marked with a
<!-- PROMPT #N -->comment so you can find and rewrite it without touching layout or logic. - Phase colors, durations, and badges are set via simple attributes at the top of each phase block.
Plain HTML5, CSS (custom properties, CSS grid, no framework), and vanilla JavaScript — no build tools, no npm install, no runtime dependencies.
Husnain Ahmad LinkedIn · GitHub · engr.husnain.ahmad@gmail.com
Free to use, adapt, and share. If this roadmap helps you, a star on the repo is appreciated.