Frontend Developer

Master modern frontend development — from HTML & CSS foundations to React, TypeScript, performance optimisation, and production deployment.

HTML & Accessibility

The backbone of every web page. Learn semantic HTML5, forms, media elements, and ARIA for accessible interfaces.

Semantic HTML5

Document structure, sectioning elements (header, main, article, section, aside, footer), proper heading hierarchy.

Forms & Validation

Input types, labels, fieldsets, constraint validation API, accessible error messages.

Web Accessibility (WCAG)

ARIA roles, keyboard navigation, focus management, screen reader testing, color contrast.

CSS & Modern Styling

Internal

Style, layout, and animation. Master Flexbox, Grid, CSS custom properties, and responsive design.

Flexbox & Grid

Build any layout with CSS Flexbox and Grid. Alignment, spacing, responsive grids.

Responsive Design

Mobile-first approach, media queries, container queries, fluid typography (clamp).

Tailwind CSS

Utility-first CSS framework. Configuration, responsive prefixes, dark mode, custom plugins.

CSS Animations

Keyframes, transitions, transforms, will-change, motion path, prefers-reduced-motion.

JavaScript Fundamentals

Internal

Deep understanding of the language — not just syntax, but the runtime: closures, prototypes, async, and the event loop.

Async JavaScript

Callbacks, Promises, async/await, Promise.all/allSettled/race, error handling patterns.

DOM & Browser APIs

querySelector, event delegation, MutationObserver, IntersectionObserver, Web Storage, History API.

ES6+ Modern Syntax

Destructuring, spread/rest, template literals, modules (import/export), optional chaining, nullish coalescing.

TypeScript

External

Add static types to JavaScript. TypeScript is now standard in professional frontend development.

Types, Interfaces & Generics

Primitive types, union/intersection, type guards, utility types (Partial, Pick, Omit, Record), generics.

TypeScript with React

Typing props, hooks, events, context, and refs. React.FC vs function declaration.

tsconfig & Strict Mode

Compiler options, strict flag, paths alias, project references, declaration files.

React

Internal

The most popular UI library. Build component trees, manage state, and create fast, interactive UIs.

Hooks Deep Dive

useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer, custom hooks.

State Management

Context API, Zustand, Redux Toolkit, TanStack Query for server state.

React Router v6

File-based and code-based routing, nested routes, loaders, actions, protected routes.

Next.js

App Router, Server Components, SSR/SSG/ISR, API routes, middleware, image optimisation.

Build Tools & Toolchain

Modern frontend tooling — bundlers, linters, formatters, and package managers.

Vite & Webpack

Module bundling, HMR, code splitting, tree shaking, environment variables.

ESLint & Prettier

Enforce code quality and consistent formatting across the team.

npm / pnpm / yarn

Dependency management, scripts, workspaces, lock files, semantic versioning.

Testing

Write reliable software with unit, integration, and end-to-end tests.

Vitest / Jest

Unit and integration testing, mocking, snapshot testing, coverage reports.

React Testing Library

Test components from a user's perspective — queries, fireEvent, userEvent, async utilities.

Optional Playwright / Cypress

End-to-end testing in real browsers. Page object model, API mocking, CI integration.

Performance & Web Vitals

Fast websites rank higher and convert better. Master Core Web Vitals and optimisation techniques.

Core Web Vitals (LCP, FID, CLS)

Measure and improve Largest Contentful Paint, First Input Delay, Cumulative Layout Shift.

Image & Asset Optimisation

WebP/AVIF, lazy loading, responsive images (srcset), font subsetting, SVG sprites.

Code Splitting & Caching

Dynamic imports, prefetching, service workers, cache-control headers.

Deployment & CI/CD

Optional

Ship your frontend confidently with automated pipelines and CDN delivery.

Optional Vercel / Netlify

Zero-config deployment, preview URLs, environment variables, edge functions.

Optional GitHub Actions CI

Run lint, type-check, and tests on every PR. Auto-deploy on merge to main.