All roadmaps

Diploma roadmap

React Diploma

12 weeks · 10 stages

What you will learn

Launch your front-end career with modern React, starting from absolute basics

Build responsive, accessible websites and single-page apps

Build an elegant portfolio of apps throughout the diploma

Think and develop web apps like a real professional developer

Skills covered

  • HTML / CSS (Flex & Grid)
  • Modern JavaScript (ES6+)
  • React
  • TypeScript
  • React Router
  • Context API
  • React Hook Form + Zod validation
  • Redux Toolkit basics

Achieve expertise and proficiency as a professional front-end developer.

01

Web & Git Fundamentals

  • How the web works, the DOM
  • Semantic HTML, responsive CSS
    • Flexbox
    • Grid
    • Media queries
  • Git basics
  • Project: responsive personal profile page
02

JavaScript Essentials

  • Variables, types, arrays / objects, functions
  • Control flow, loops, array methods
  • DOM basics, events, fetch(), JSON
  • TypeScript — typed JavaScript
    • Generics, enums, unions
    • Interfaces
    • Type inference
  • Lab: build a small "Movie Search" page with a public API
03

Enter React

  • Why React, JSX, components, props
  • Local state with useState, rendering lists, keys
  • Handling events, lifting state
  • useEffect for side effects & data fetching
  • Sprint: product cards with filters & favorites
04

Hooks & Data Flow

  • Loading / error UI patterns, simple caching in state
  • Custom hooks for reuse
  • Controlled vs uncontrolled with React Hook Form
  • Client-side validation with simple schemas
  • Accessible inputs, error messages
  • Project: Weather or News mini-app (REST + fetch())
05

Routing & App Structure

  • React Router
    • Routes
    • Nested routes
    • Params
  • Layout components, 404, simple protected routes
  • Folder structure and module boundaries
  • File-based route generation
  • Path / search-param schema validation
  • Lab: multi-page app with details pages, sign-up / login + validation
06

State Beyond a Single Component

  • Context API: when and how
  • Basic global state (cart, theme, auth token)
  • LocalStorage for persistence
  • Zustand
    • Store & hook-based access
    • Selectors and actions
    • Immutability
  • Lab: persistent cart / theme
07

Styling & UI Patterns

  • CSS organization, utility classes, Tailwind
  • Reusable components (buttons, modals, tabs, toasts)
  • Accessibility
    • WCAG basics
    • Keyboard navigation
    • ARIA
  • shadcn/ui
  • Project: mini component library + usage docs
08

Testing Essentials

  • Unit & integration tests with Testing Library + Vitest / Jest
  • Testing forms, API calls (mocks), routing
  • Confidence without over-testing
  • Lab: write tests for critical flows in your projects
09

Performance & Quality

  • DevTools, basic profiling, avoiding unnecessary re-renders
  • Code splitting (lazy routes), images, Lighthouse checks
  • Linting / formatting with ESLint + Prettier
  • Audit for performance & a11y goals
10

Final Project

  • Choose your app; environment variables, API keys
  • Deploy to Vercel / Netlify with preview links
  • Plan → build → polish → ship
  • Capstone: mentor code review and final demo — deployed, documented, tested

Graduation Party

The end of the road: demo your project, collect your certificate, and leave with a portfolio — alongside your cohort and mentors.

Reserve your seat