🗺️
The Full Plan
~10 weeks from JS to shipping the ASL project
🎯
Goal: Go from learning JavaScript at uni to shipping a real ASL sign language recognition app with React, TensorFlow.js, MediaPipe, and a live AI API. Everything on this roadmap feeds directly into that project.
Learning Timeline
⚡JavaScript
Weeks 1–4 · Foundation
Core language, DOM, async/await, ES6+. Everything else depends on this.
🌿Git & GitHub
Weeks 2–3 · Parallel
Version control and collaboration for the ASL project. Portfolio-ready repos.
Package management. 3–4 days. You'll pick most of it up by using it in React.
⚛️React
Weeks 5–6 · Main focus
Components, hooks, state. Start the ASL project scaffold by end of week 5.
🤖AI Tools
Weeks 5–8 · Ongoing
Copilot, Claude, prompting techniques, and Anthropic API in the ASL project.
🎨Tailwind CSS
Weeks 7–8 · After React
Utility-first styling for React. Deliberately delayed — learn React structure first.
📍 Full Frontend Roadmap Reference
roadmap.sh is the definitive community-maintained guide. The skills below are what it marks as essential for an intermediate frontend developer — and exactly what this checklist covers.
Open roadmap.sh/frontend ↗
CSS Frameworks / Tailwind
⚡
JavaScript
Weeks 1–4 · The foundation of everything
💡
You're already learning this at uni. Use these weeks to go deeper than the lectures — async and ES6+ are what separates beginners from developers who can use React confidently.
Week 1Core Language Fundamentals
Variables, types, control flow, functions, scope
✓
Variables — var, let, const
Scope differences, when to use each, temporal dead zone
✓
Data Types
Strings, numbers, booleans, null, undefined — and typeof
✓
Operators & Expressions
Arithmetic, == vs ===, logical (&&, ||, ??), ternary operator
✓
Control Flow
if/else, switch, for, while, do...while, break/continue
✓
Functions — declarations, expressions, arrow functions
Named functions, anonymous, hoisting, arrow syntax and 'this' differences
✓
Scope & Closures
Global vs local, lexical scope, closure — why this matters in React hooks
Week 2Arrays, Objects & Modern ES6+
Data structures and syntax you'll use daily in React
✓
Arrays — core methods
push/pop, map, filter, reduce, find, forEach, some, every
✓
Objects — creation & access
Key-value pairs, dot vs bracket notation, nested objects
✓
Destructuring
Array and object destructuring — used constantly in React
✓
Spread & Rest Operators
...spread to clone/merge arrays and objects, rest params in functions
✓
Template Literals
Backtick strings, multi-line, ${} interpolation
✓
Optional chaining & nullish coalescing
obj?.property to avoid crashes, ?? for defaults
✓
Modules — import / export
Named exports, default exports, import syntax across files
Week 3Async JavaScript & the DOM
Fetch, Promises, async/await, DOM manipulation & events
✓
The Event Loop
How JS runs code, why it's single-threaded, how async fits in
✓
Promises & .then()/.catch()
Creating, chaining, catching errors
✓
async / await
Cleaner async syntax — you'll use this constantly for API calls
✓
try / catch / finally
Handling errors in async code, logging, user feedback
✓
Fetch API
GET/POST requests, parsing JSON responses, handling errors
✓
DOM Manipulation
querySelector, createElement, classList, innerHTML, dataset
✓
Event Listeners
addEventListener, event object, bubbling, event delegation
Week 4Consolidation & Project
Build something real before moving to React + npm
✓
OOP basics — classes & this
Class syntax, constructor, methods, basic inheritance
✓
JSON — parse and stringify
Working with API data, config files, localStorage
✓
Browser DevTools
Console, Sources debugger, Network tab, Elements inspector
✓
🏗️ Build a vanilla JS project
Quiz app, weather widget using a free API, or memory game
✓
Push project to GitHub with a README
First real portfolio piece. Screenshot it, write a proper description.
🌿
Git & GitHub
Weeks 2–3 · Learn in parallel with JavaScript
⚡
Start in Week 2 of JS, not after. Git takes 2–3 days to get comfortable and you'll need it before the React + ASL project with your collaborator. Merge conflicts are inevitable — better to learn now.
Week 2Git Fundamentals
Local version control — tracking, branching, merging
✓
What is version control & why Git
Tracking file history, avoiding "final_v3_REAL.zip" disasters
✓
git init & git clone
Initialising a local repo vs cloning a remote one
✓
git add, commit, status, log
The daily workflow. Write meaningful commit messages.
✓
.gitignore
Exclude node_modules, .env files, OS files from commits
✓
Branches — create, switch, delete
git branch, git checkout -b, git switch
✓
git merge & resolving conflicts
Merging feature branches, reading conflict markers, choosing correct code
✓
git stash
Temporarily shelving unfinished work
Week 3GitHub & Collaboration
Remote repos, pull requests, portfolio setup
✓
Push local project to GitHub
git remote add origin, git push -u origin main
✓
Pull Requests (PRs)
Open, review, and merge PRs — critical for the ASL project collaboration
✓
git pull & fetch
Syncing with remote, understanding the difference between the two
✓
GitHub Issues & Project Board
Track tasks and bugs for the ASL project collaboratively
✓
Write a proper README.md
Project title, description, install steps, tech stack, screenshots
✓
GitHub Pages — deploy a static site
Free hosting. Live demos on your CV make a huge difference to recruiters.
✓
Pin 3 best repos on your GitHub profile
Recruiters look at this. Curate it intentionally.
📦
npm
Week 4 · 3–4 days, learn by doing
📦
npm is a quick win. You don't really "study" it in isolation — you learn it by setting up your first Vite + React project. These topics take 3–4 days and you'll keep reinforcing them throughout React and the ASL project.
Week 4npm Essentials
Everything you need to manage packages in your projects
✓
What npm is and why it exists
Package registry, managing dependencies, vs loading from CDN
✓
npm init & package.json
Fields: name, version, scripts, dependencies, devDependencies
✓
npm install
Installing packages, --save-dev flag, what node_modules actually is
✓
npm scripts
npm start, npm run dev, npm run build — custom task shortcuts
✓
package-lock.json
Locks exact versions — always commit this to git
✓
dependencies vs devDependencies
Runtime packages vs dev-only tools like linters and test runners
✓
🏗️ Scaffold a Vite + React project
npm create vite@latest — your first real npm workflow in practice
⚛️
React
Weeks 5–6 · The main event
⚛️
Two weeks is the right call. Week 5 = core concepts + a small practice app. Week 6 = intermediate hooks + scaffold the actual ASL project. Don't wait until you feel "ready" — learning inside a real project is how React sticks.
Week 5Core React Concepts
Components, JSX, props, state — the mental model shift
✓
What React is & the component model
Virtual DOM, declarative UI, why it exists over vanilla JS
✓
Vite + React project setup
npm create vite@latest, file structure, running dev server
✓
JSX syntax
HTML-in-JS, className not class, curly braces, self-closing tags
✓
Functional Components
Writing and composing reusable UI components
✓
Props
Passing data into components, default props, children prop
✓
useState Hook
Local state, setter function, how re-renders work
✓
Events in React
onClick, onChange, onSubmit — React synthetic event system
✓
Conditional Rendering
&&, ternary, show/hide components based on state
✓
Rendering Lists with .map() & keys
Why keys matter, rendering arrays of components
✓
🏗️ Build: small React practice app
Counter, colour picker, or todo — something with state. Deploy to GitHub Pages.
Week 6Intermediate Hooks + Start ASL Project
useEffect, useRef, data fetching — then scaffold the real project
✓
useEffect Hook
Side effects, dependency array, cleanup function — understand this deeply
✓
useRef Hook
Direct DOM access — essential for webcam + TensorFlow.js in the ASL project
✓
Fetching data in React
useEffect + fetch, loading/error states, displaying async data
✓
Lifting State Up
Sharing state between sibling components via a parent
✓
Forms in React (controlled inputs)
Controlled vs uncontrolled, form state, handling submission
✓
React Router basics
BrowserRouter, Route, Link — multiple pages in one app
✓
🚀 Scaffold the ASL project in React
Create the repo, set up Vite, plan component structure with your partner
🤖
AI Tools & Integration
Weeks 5–8 · Ongoing alongside React and the ASL project
🤖
This is on the roadmap.sh frontend path now. Being able to discuss how you used AI tools critically during the ASL project — not just blindly copy-pasting — is a real differentiator in 2026 interviews. Interviewers want to know you can use it and evaluate it.
Week 5AI-Assisted Coding
Copilot, Claude, and Cursor — using them effectively while learning
✓
How LLMs work (basic mental model)
Token prediction, not "thinking" — why it hallucinates, why context matters
✓
AI vs Traditional Coding
What AI speeds up (boilerplate, syntax) vs what it can't replace (architecture decisions)
✓
GitHub Copilot in VS Code
Tab completion, inline suggestions, chat panel — set it up, learn the shortcuts
✓
Using Claude for code review
Paste your code, ask "what's wrong with this?" — learn from the explanation
✓
When NOT to trust AI output
Spot hallucinated APIs, outdated syntax, wrong logic. Always verify output yourself.
Weeks 6–7Prompting Techniques
Getting consistently useful output from AI assistants
✓
Role prompting
"Act as a senior React developer reviewing my code" — sets context, improves quality
✓
Prompting for debugging
"Here's my error + full code. What's the likely cause?" — structured bug reports
✓
Chain-of-thought prompting
"Think step by step before answering" — better for complex architectural questions
✓
Iterating on AI output
"That's close but change X" — treat it like a conversation, not a search engine
✓
Using AI for code review & refactoring
Ask for a code review, ask "how would a senior dev improve this?"
✓
Using AI for docs generation
Get Claude to write JSDoc comments and README sections for your projects
Week 8Implementing AI in the ASL Project
Integrating the Anthropic API to add real AI features
✓
Anthropic API basics
Get an API key, understand the /v1/messages endpoint, read the docs
✓
Call the API from a React app
fetch() to Anthropic endpoint, parse response, display result in UI
✓
Feature: ASL sentence builder
Detected signs → API → returns a natural language sentence. Strong portfolio feature.
✓
Feature: signing feedback assistant
Confidence scores → API → "Your B looks like P, try adjusting your thumb position"
✓
Document your AI usage for interviews
Note: what tools you used, how you caught mistakes, what you decided not to use it for
🎨
Tailwind CSS
Weeks 7–8 · After you're comfortable with React
⏱️
Deliberately delayed to Week 7. Learning Tailwind before you understand React component structure creates confusion about what's React and what's CSS. Two weeks into React this will click immediately — and you'll style the ASL project UI fast.
Week 7Tailwind Fundamentals
Utility-first CSS — layout, spacing, typography, colour
✓
What utility-first CSS means
Why Tailwind vs writing BEM/module CSS — and when each makes sense
✓
Install Tailwind in Vite + React
npm install, tailwind.config.js, @tailwind directives in CSS entry file
✓
Layout — flex & grid utilities
flex, grid, gap, justify-, items-, col-span — replaces most layout CSS
✓
Spacing, sizing & borders
p-, m-, w-, h-, rounded-, border- utility classes
✓
Typography & colour
text-lg, font-bold, text-gray-500, bg-blue-600 — the full Tailwind palette
✓
Responsive breakpoints
sm:, md:, lg:, xl: prefixes — mobile-first by default
Week 8Intermediate Tailwind + Apply to ASL
State variants, dark mode, and styling your real components
✓
Hover, focus & active state variants
hover:bg-blue-700, focus:ring, active:scale-95 etc
✓
Dark mode
dark: prefix, class-based toggle in React
✓
Custom values in tailwind.config
Extending the theme with custom colours, fonts, spacing tokens
✓
Tailwind + React patterns
className conditionals with template literals or the clsx library
✓
🎨 Restyle the ASL project UI with Tailwind
Replace all inline/module CSS with Tailwind classes. Big quality jump.