Phase 5 · 2–4 months

React

This is how real companies build modern websites. Start ONLY after plain JavaScript feels okay — React is much easier when the basics are solid.

What to learn

React (= a popular JavaScript framework — a ready-made toolbox — for building screens out of small reusable pieces).
Components (= the small reusable pieces), props (= info you hand to a piece), and state (= info a piece remembers and can change).
Hooks like useState and useEffect (= special React helpers that give pieces powers like memory).
Tailwind CSS (= a fast way to style with tiny labels) and later TypeScript (= JavaScript that warns you about mistakes early).

Step-by-step setup guides

Installing things is the most annoying part, and Windows trips people up more than Mac. These walk you through it.

Install Node.js and npm (React needs these)

WindowsInstall Node.js and npm on Windows macOSInstall Node.js and npm on a Mac Downloadnodejs.org — get the LTS version

Videos to watch

The Net Ninja — Full Modern React Tutorial (playlist)Start here JavaScript Mastery — build real React projects (channel)Programming with Mosh — React for Beginners Traversy Media — TypeScript crash course (later)

Practice on your own

A counter with + and − buttons.
A list where you can add and delete items.
Show data from an API, with a "loading…" message and an error message.
A small 3-page site you can click between.

Build this

A weather app or movie-search app in React that uses a real API, has pages, and is styled with Tailwind. Put it online with Vercel (= free hosting for the front of a website).

Move on when: You can build a multi-page React app that fetches real data and shows it nicely.

← Previous4. Web basics Next →6. Backend