Web Development
Master React, Node.js, databases, and building full-stack applications.
- HTML, CSS, JavaScript & TypeScript
- Master React & advanced hooks
- Full-stack Backend, API & Databases
Start your 7-day free trial
Get full access to all learning paths across the platform.
All Lessons
HTML Forms & Input Types
Master HTML forms: text inputs, selects, checkboxes, validation attributes, and form submission.
HTML Accessibility (a11y)
Build inclusive web pages with ARIA attributes, keyboard navigation, focus management, and screen reader best practices.
HTML Tables & Lists
Structure tabular data with accessible tables, and organize content with ordered, unordered, and description lists.
HTML Media & Embeds
Embed images, video, audio, and iframes with responsive sizing, lazy loading, and performance optimization.
CSS Selectors & Specificity
Master CSS selectors from basic to advanced, understand the specificity hierarchy, and learn the cascade.
CSS Box Model & Layout
Understand the CSS box model: content, padding, border, margin, and how box-sizing changes everything.
CSS Flexbox
Master one-dimensional layouts with Flexbox: alignment, wrapping, ordering, and responsive patterns.
CSS Grid
Build powerful two-dimensional layouts with CSS Grid: rows, columns, areas, and responsive patterns.
Responsive Design
Build layouts that adapt to any screen size using media queries, fluid typography, and mobile-first design.
CSS Transitions & Animations
Add motion to your UI with CSS transitions, keyframe animations, and performance-optimized transforms.
CSS Custom Properties (Variables)
Use CSS custom properties to create maintainable, themeable stylesheets with dynamic values.
Sass Preprocessing
Speed up CSS development with Sass: nesting, mixins, variables, partials, and inheritance.
BEM Methodology
Organize CSS with the BEM methodology: Block, Element, Modifier naming conventions for scalable styles.
CSS Architecture & Best Practices
Organize large CSS codebases with architecture patterns, file structure, and performance optimization.
JavaScript Variables & Types
Understand JavaScript variables (let, const, var), primitive types, type coercion, and typeof operator.
Operators & Control Flow
Control program flow with comparison operators, logical operators, if/else, switch, and ternary expressions.
Functions & Scope
Define and invoke functions, understand scope, hoisting, arrow functions, and default parameters.
JavaScript Arrays
Manipulate arrays with map, filter, reduce, find, sort, spread operator, and destructuring.
JavaScript Objects
Work with JavaScript objects: properties, methods, destructuring, spread/rest, and computed keys.
DOM Manipulation
Select, create, modify, and remove DOM elements using querySelector, createElement, and classList.
Event Handling & Delegation
Handle user interactions with addEventListener, event propagation, delegation, and custom events.
Async JavaScript & Promises
Master asynchronous JavaScript: callbacks, Promises, async/await, and Promise.all for concurrent operations.
Fetch API & HTTP Requests
Make HTTP requests with the Fetch API: GET, POST, headers, JSON parsing, and AbortController.
Error Handling & Debugging
Debug effectively with try/catch, custom error classes, console methods, and browser DevTools.
Closures & Lexical Scope
Understand closures, lexical scope, and how functions capture variables from their enclosing scope.
Prototypes & Classes
Learn JavaScript's prototype chain, ES6 classes, inheritance, static methods, and private fields.
JavaScript Modules (ES Modules)
Organize code with ES modules: import/export, named vs default exports, and dynamic imports.
Iterators & Generators
Use iterators and generators to create lazy sequences, custom iterables, and async generators.
Web APIs (Storage, Geolocation)
Explore browser Web APIs: localStorage, sessionStorage, Geolocation, Intersection Observer, and Clipboard.
TypeScript Introduction
Get started with TypeScript: installation, basic types, type annotations, and the compilation process.
TypeScript Types & Interfaces
Define shapes of data with TypeScript interfaces, type aliases, unions, intersections, and literal types.
TypeScript Generics
Write reusable code with TypeScript generics: generic functions, constraints, and generic components.
TypeScript Utility Types
Use built-in utility types like Partial, Required, Pick, Omit, Record, and ReturnType.
TypeScript Strict Mode & Config
Configure TypeScript strict mode, tsconfig.json options, and integrate TypeScript into existing projects.
React & JSX Fundamentals
Understand JSX syntax, React element creation, component rendering, and the React tree structure.
Components & Props
Build reusable UI pieces with React components, pass data via props, and compose component hierarchies.
State & useState Hook
Add interactivity with the useState hook: state updates, functional updates, and state lifting patterns.
Conditional Rendering
Render different UI based on conditions using ternaries, logical &&, early returns, and switch patterns.
Lists, Keys & Rendering Arrays
Render dynamic lists with .map(), understand why React needs keys, and handle list updates efficiently.
useEffect & Side Effects
Perform side effects with useEffect: data fetching, subscriptions, cleanup functions, and dependency arrays.
useContext & Shared State
Share state across components without prop drilling using React's Context API and useContext hook.
useReducer for Complex State
Manage complex state logic with useReducer: actions, dispatching, and when to prefer it over useState.
useRef & DOM Access
Access DOM elements and persist values across renders with useRef without triggering re-renders.
Custom Hooks
Extract and reuse stateful logic by building custom hooks for common patterns like data fetching and forms.
Component Composition Patterns
Build flexible UIs with composition patterns: children prop, compound components, and slot patterns.
Higher-Order Components
Enhance components with higher-order components (HOCs) for cross-cutting concerns like auth and logging.
Render Props Pattern
Share code between components using the render props pattern for maximum flexibility.
Error Boundaries
Catch JavaScript errors in React component trees with error boundaries and display fallback UIs.
React Portals & Modals
Render UI outside the component tree with React Portals for modals, tooltips, and floating elements.
React Router Setup
Set up client-side routing with React Router: Route, Link, and BrowserRouter configuration.
Dynamic Routes & Parameters
Handle dynamic URL parameters and query strings to build data-driven pages.
Nested Routes & Layouts
Create complex layouts with nested routes, shared layouts, and outlet-based composition.
Protected Routes
Guard routes based on authentication state and redirect unauthorized users to login.
Programmatic Navigation
Implement programmatic navigation, redirects, and browser history management in React apps.
State Lifting
Coordinate state between sibling components by lifting state to their nearest common ancestor.
Context API Advanced Patterns
Build scalable state management with the Context API: providers, consumers, and performance optimization.
Redux Toolkit
Set up Redux Toolkit with createSlice, configureStore, and async thunks for predictable state management.
Zustand State Management
Use Zustand for lightweight state management with a simple API, selectors, and middleware.
React Query (TanStack Query)
Manage server state with React Query: caching, background refetching, pagination, and optimistic updates.
React Forms & Validation
Build controlled and uncontrolled forms with validation, error handling, and React Hook Form.
React Performance Optimization
Optimize React rendering with memo, useMemo, useCallback, virtualization, and profiling tools.
Suspense & Lazy Loading
Code-split your React app with React.lazy, Suspense boundaries, and streaming server rendering.
Testing React Components
Test React components with React Testing Library: render, query, fire events, and test async behavior.
React Ecosystem & Best Practices
Navigate the React ecosystem: Next.js, UI libraries, animation tools, and production best practices.
CSS Modules in React
Scope styles to components with CSS Modules: local class names, composition, and build integration.
Tailwind CSS Fundamentals
Build modern UIs rapidly with Tailwind CSS utility classes, responsive prefixes, and component extraction.
Styled-Components & CSS-in-JS
Write component-scoped styles with styled-components: tagged templates, dynamic props, and theming.
Design Tokens & Theme Systems
Create consistent design systems with design tokens, theme providers, and centralized style configuration.
Responsive Components
Build components that adapt to any viewport with responsive props, container queries, and fluid typography.
REST Client Architecture
Design robust REST client layers with Axios or Fetch: interceptors, base URLs, and retry logic.
GraphQL Basics
Query APIs with GraphQL: schemas, queries, mutations, and client-side caching with Apollo or urql.
WebSockets & Real-Time
Build real-time features with WebSockets: connection lifecycle, events, and reconnection strategies.
Optimistic Updates
Implement optimistic UI updates and client-side caching for snappy, responsive data interactions.
API Error Handling
Handle API errors gracefully with retry logic, error boundaries, user-friendly messages, and fallback states.
Node.js Fundamentals
Understand Node.js fundamentals: the event loop, modules, npm, and building command-line tools.
Express.js Routing
Build RESTful APIs with Express.js: route handlers, path parameters, query strings, and response methods.
Express Middleware
Write Express middleware for logging, authentication, CORS, body parsing, and request validation.
Express Error Handling
Implement centralized error handling in Express with error middleware, status codes, and error responses.
Node.js File System & Streams
Read and write files, work with streams, and handle file paths in Node.js server applications.
SQL Fundamentals
Write SQL queries: SELECT, INSERT, UPDATE, DELETE, JOINs, GROUP BY, and aggregate functions.
PostgreSQL Deep Dive
Use PostgreSQL for production apps: data types, indexes, constraints, transactions, and full-text search.
MongoDB & NoSQL
Model data with MongoDB: documents, collections, queries, indexes, and aggregation pipelines.
ORMs with Prisma
Use Prisma ORM to define schemas, generate type-safe queries, and manage database relationships.
Database Migrations
Keep your database schema in sync with your code using migrations, seed scripts, and rollback strategies.
JWT Authentication
Implement stateless authentication with JSON Web Tokens: signing, verifying, refresh tokens, and storage.
OAuth2 & Social Login
Add social login to your app with OAuth2 flows: Google, GitHub, and third-party identity providers.
Sessions & Cookies
Manage user sessions with cookies, server-side session stores, and session configuration.
Role-Based Access Control
Implement role-based access control (RBAC) to restrict routes and features based on user permissions.
Password Security
Secure passwords with bcrypt hashing, salting, and best practices for credential storage.
Unit Testing with Vitest
Write unit tests with Vitest: test suites, assertions, mocking, and code coverage.
React Testing Library
Test React components with React Testing Library: rendering, querying, user events, and async testing.
Integration Testing
Write integration tests that verify multiple components and API layers work together correctly.
E2E Testing with Playwright
Automate browser testing with Playwright: page navigation, selectors, assertions, and test fixtures.
Test-Driven Development
Practice test-driven development: write failing tests first, implement code, then refactor with confidence.
Git Workflows
Manage code with Git: branches, merge strategies, rebasing, pull requests, and conflict resolution.
CI/CD Pipelines
Automate build, test, and deploy workflows with CI/CD pipelines using GitHub Actions.
Docker for Web Apps
Containerize web applications with Docker: Dockerfiles, multi-stage builds, and docker-compose.
Cloud Deployment
Deploy full-stack apps to the cloud with Vercel, AWS, or similar platforms with custom domains and SSL.
Performance Monitoring
Monitor web application performance with Lighthouse, Core Web Vitals, bundle analysis, and real-user metrics.