#webdev #react #ai #learning The web dev landscape has shifted — junior developers today are expected to work with AI tools (Copilot, ChatGPT, Claude, Cursor), not just write code from scratch. This updated 8-week plan trims some of the deeper theory to make room for practical AI-assisted workflows, while keeping the core skills every junior React dev needs. Every two weeks, there's a dedicated Tech Insight Day — no new material, just discussion, questions, and reflection on what's been learned.
#
Week 1 — Foundations: Agile, Web Basics & Your First AI Tools
Project Management with Jira
-
Agile & Scrum basics
-
Create user stories, tasks, and epics
-
Update task status (To Do, In Progress, Done) HTML5 / CSS3 Essentials
-
Core HTML5 tags, tables, forms
-
CSS3 (inline, embedded, external)
-
Intro to TailwindCSS
AI Tooling Kickoff
- Setting up GitHub Copilot / Claude / ChatGPT in your editor
- Prompting basics: asking for code, explanations, and fixes
- Using AI to scaffold an HTML/CSS layout from a plain-English description
#
Week 2 — Styling with AI + Tech Insight Day
- TailwindCSS deep dive (utility-first workflows)
- Using AI to generate and refactor CSS/Tailwind from mockups or descriptions
- Using AI to audit a page for basic accessibility issues
- Spotting and correcting AI mistakes in generated markup/styles (critical review, not blind copy-paste)
📌 Tech Insight Day (end of week)
-
Open discussion: What's worked so far? Where did AI help vs. get in the way?
-
Show-and-tell: one thing you built, one prompt that worked well
#
Week 3 — JavaScript Foundations
- Data types, variables, operators
- Conditional statements & loops
- Functions (declaration, expression, arrow)
- Arrays and objects (CRUD operations)
AI-Assisted Practice
- Using AI to explain unfamiliar error messages
- Generating test/edge cases for your own functions with AI, then verifying them by hand
- Rule of thumb: always trace through AI-suggested code before running it
#
Week 4 — JavaScript Advanced + Tech Insight Day
-
Scope & closures, hoisting,
this -
ES6+ features (let/const, spread/rest, destructuring)
-
Asynchronous JavaScript: callbacks, Promises, async/await, Fetch API
AI Pair Programming
- Using AI to refactor callback-based code into async/await
- Prompting for step-by-step explanations of tricky async bugs
- Comparing two AI-generated solutions to the same problem and picking the better one
📌 Tech Insight Day (end of week)
- Discussion: async JS pain points, AI debugging wins/fails
- Peer code review of one AI-assisted exercise
#
Week 5 — Git/GitHub + React Fundamentals
Version Control with Git & GitHub
- Core commands (init, add, commit, push, pull)
- Branches and pull requests
- Using AI to write clearer commit messages and PR descriptions
React Basics
- What is React & why use it?
- Vite setup, JSX syntax
- Functional components, props and state
- Using AI to scaffold a new component from a description ("generate a Card component that takes title, image, and description props")
#
Week 6 — React Core, Hooks & Router + Tech Insight Day
React Core Concepts
- Event handling, conditional rendering, list rendering (
map
)
- Component reuse & composition
React Hooks
useState
, useEffect
, useRef
, useContext
React Router
- Setting up routes, navigation, dynamic routes & params
AI-Assisted React Development
- Using AI to generate boilerplate hooks and explain
why a
useEffect
dependency array matters
- Using AI-powered code review (e.g. Copilot/Claude suggestions) before opening a PR
📌 Tech Insight Day (end of week)
- Discussion: how AI changes the "learn by struggling" process — when to lean on it, when to push through manually
- Share one React Dev Tools discovery
#
Week 7 — State Management, Tooling & Real APIs
- Context API and a basic intro to Redux
- Form handling with
react-hook-form
-
API handling with Axios
-
Custom hooks, error boundaries
-
Dev tools (React Dev Tools, Redux DevTools) AI Integration Workflows
-
Using AI to generate Axios API integration code from an API doc/spec
-
Prompting AI to write custom hooks, then testing and adapting them
-
Using AI to explain and fix Redux/Context bugs
#
Week 8 — Capstone Project + Tech Insight Day
Goal: Combine tools, code, and AI assistance to simulate a real-world sprint.
- Break the project into tasks in Jira, assign yourself tickets, track progress on the board
- Push code to GitHub regularly, work across branches, open pull requests for review
- Build a small feature end-to-end using AI tools throughout (scaffolding, debugging, refactoring, PR descriptions)
- Apply Container vs Presentational component patterns, and Context API vs prop drilling
📌 Tech Insight Day (end of week — capstone wrap-up)
- Retro: what you built, what AI helped with most, what you'd do differently
- Discussion: responsible AI use as a junior dev — verifying output, avoiding over-reliance, and building real understanding underneath the assistance
A note on AI tools in this plan
AI assistants are treated as a pair programmer, not a replacement for understanding. Every AI-assisted section pairs generation with review — reading, testing, and being able to explain the code before it ships. That habit is what separates a junior dev who uses AI well from one who just copy-pastes.