Frontend React Developer

Semantic HTML, Flexbox, Grid, responsive design, and accessibility basics.

• The Odin Project: Foundations Pathcoursefree
• CSS Tricks: Complete Guide to Flexboxarticlefree
• web.dev: Learn CSScoursefree

• Semantic HTML structure
• Flexbox layout mastery
• CSS Grid for complex layouts
• Mobile-first responsive page

DOM manipulation, events, fetch, Web Storage, and modern ES2024+ features.

• javascript.info: Browser: Document, Events, Interfacesdocfree
• MDN Web Docs: Web APIsdocfree

• DOM selection & mutation
• Event delegation pattern
• fetch() & async/await
• Build a weather app from a public API

Static types, interfaces, generics: the React developer's safety net.

• TypeScript Official Handbookdocfree
• Execute Program: TypeScript coursecoursepaid

• Type inference & union types
• Typing DOM events
• Generics basics

Components, props, state, effects, lifting state, and controlled forms.

• React.dev: Official Docs (Learn React)docfree
• Scrimba: Learn React for Freecoursefree

• JSX & component composition
• useState & controlled inputs
• useEffect & data fetching
• Build a full Todo app

Context, custom hooks, performance (memo/useMemo/useCallback), and TanStack Query.

• patterns.dev: React Patternsdocfree
• TanStack Query Docsdocfree
• Maximilian Schwarzmüller: React Complete Guide (Udemy)coursepaid

• Custom hook for auth state
• React.memo & useCallback optimisation
• Server state with TanStack Query

Utility-first CSS with Tailwind v4, shadcn/ui, and design system thinking.

• Tailwind CSS Docsdocfree
• shadcn/ui component librarydocfree

• Configure Tailwind in a project
• Build a responsive card component
• Dark mode theming

Global client state patterns: when Context isn't enough.

• Zustand Docsdocfree
• Redux Toolkit Docsdocfree

• Shopping cart with Zustand
• Redux slice & RTK Query

App Router, RSC, Server Actions, data fetching, deployment: the production React stack.

• Next.js: Official Learn Coursecoursefree
• Next.js App Router Docsdocfree

• File-system routing & layouts
• Server Components vs Client Components
• Server Actions & forms
• Image optimisation & metadata

Unit tests with Vitest, component tests with Testing Library, E2E with Playwright.

• Testing Library Docsdocfree
• Playwright Docsdocfree

• Test a controlled form component
• Mock fetch with MSW
• Playwright E2E login flow

LCP, CLS, FID: measure, diagnose, and fix performance on real apps.

• web.dev: Core Web Vitalsarticlefree
• Chrome DevTools Performance Paneldocfree

• Lighthouse audit your portfolio
• Fix LCP with next/image
• Bundle analysis with @next/bundle-analyzer