Roadmap
Coding learning roadmap: a clear plan from HTML and CSS to React, Next.js and Python. See every module and lesson, track your progress and reach your goals.
Your path: Fullstack TypeScript
Ancient Egypt
HTML5, CSS3, Flexbox, SASS, Grid
Introduction
First steps on the platform, introduction to HTML, HTML elements, document structure, element extensions
The road to Heliopolis
How the internet works, browsers, HTTPS/IP, text formatting, links, images, internet history, HTML semantics, lists, element properties, tables, forms, video, HTML resources
Hieroglyphic puzzles
Introduction to CSS, CSS rules, selectors, text styling, box model, classes and IDs, display, positioning, pseudo-classes and pseudo-elements
Secrets of the pyramids
Flexbox: axes, justify-content, align-items, order, align-self, wrapping, align-content, shorthand properties, flex-grow/shrink/basis, grid with flexbox, gap
Temple obelisks
Viewport, fluid layout, responsive images, vw/vh units, media queries, mobile-first vs desktop-first
Visiting Cleopatra
2D/3D transforms, transitions, @keyframes, timing functions, advanced animations, animation shorthand
Nile Valley
SASS: variables, nesting, mixins, maps/lists, partials/modules, extend/inheritance, operators, RWD review, SASS vs CSS custom properties
CSS Grid
CSS Grid: sizes/units, element positioning, advanced positioning, grid+flexbox layouts, grid areas/template areas, grid vs flexbox comparison
Pharaoh's chamber
Modern CSS: container queries, :has(), CSS nesting, cascade layers, subgrid, clamp(), aspect-ratio, :is()/:where(), @property, scroll-snap, @supports
Hall of Anubis
Accessibility (a11y), WCAG, semantic HTML, ARIA, keyboard navigation, accessible forms, images/multimedia, color contrast, accessibility testing tools
Bibliotheca Alexandrina
Chrome DevTools, Emmet, HTML/CSS validators, favicon/Open Graph, performance optimization, web fonts, hosting (GitHub Pages/Netlify/Vercel), advanced workflow techniques
Space Mission
JavaScript, React.js, Hooks, Redux, Router
Mission Start
Introduction to React, framework comparison, Virtual DOM, environment setup, Node.js/npm, Vite project creation, project structure, first component, JSX, DevTools
Landing on Mars
Component anatomy, children/composition, props, conditional rendering, list rendering, composition patterns, controlled vs uncontrolled components
New reality
State and events, event handling, data flow, event propagation, state update patterns, forms (controlled components)
User Interface
Context API, reducers, global state, useReducer, Context+useReducer in practice, Context optimization, state management patterns
Connectivity problems
Component lifecycle, useEffect, external system sync, API/data fetching, effect cleanup, useRef, useEffect optimization, custom hooks, race conditions/debouncing, memoization (memo/useMemo/useCallback)
Advanced systems
React Router: routing config, URL params, nested routes, programmatic navigation, route guards, redirects, lazy loading, state via location, browser history
From a different perspective
Styled Components, Sass/SCSS, Tailwind CSS, UI component frameworks, design systems, React Transition Group, CSS animations/keyframes
Journey to Orbiter
HOC/Render Props/Compound Components, Concurrent Mode/Suspense, code splitting, Adapter/Facade patterns, accessibility (a11y), performance profiling, Vercel deployment
Database communication
React 18+ hooks: useTransition, useFormStatus/useActionState, useId, use hook, useDeferredValue, list virtualization, useOptimistic
Ship styling
Portals, i18n, security, Apollo Client/GraphQL, WebSockets/SSE, Web Workers, React Compiler, Streaming SSR/Edge, RSC, micro-frontends, TanStack Query, React 19
Quality control
Axios/HTTP libraries, loading/error/empty states, race conditions/AbortController, POST/PUT/DELETE, caching/SWR, advanced error handling, pagination/infinite scroll
Flight optimization
TypeScript with React: typing functional components, props/interfaces, useState/useRef, events, generic components, discriminated unions, typing Context/useReducer
External integrations
React testing: Jest, React Testing Library, user interaction testing, async component testing, mocking modules/API, hooks testing, snapshot testing
Journey into the unknown
CSS variables/dynamic themes, CSS Modules, zero-runtime CSS-in-JS, styled-components theming, responsive patterns, Emotion/vanilla-extract, design tokens
Orbital Station Omega
Composition vs Inheritance, Container/Presentational, headless components, Inversion of Control, feature flags/A/B testing, event-driven architecture, Atomic Design, Provider/State Machines
Apollo Command Center
Error Boundaries, react-error-boundary, form error handling, logging/monitoring, Fallback UI/Skeleton Loaders, Graceful Degradation, advanced error handling patterns
Jurassic Park
JavaScript, ES6+, DOM, Async/Await, TypeScript
Park Gate
JS history, runtime environment, console, comments, code formatting, semicolons, variables (var/let/const), data types, type conversion, arithmetic/comparison/logical operators, operator precedence, conditionals (if/else/switch), loops, functions
DNA Laboratory
Function parameters/arguments, arrow functions, scope (global/function/block), hoisting, this, arrays (push/pop/slice/splice), forEach/map/filter/reduce, objects (literals/constructors), prototypes, closures, try/catch, template literals, destructuring, spread/rest
Dinosaur Breeding
ES6 classes, constructors/methods, inheritance (extends), encapsulation/private fields (#), polymorphism, abstract classes, mixins, Map/Set, WeakMap/WeakSet, Symbol, static methods, getters/setters, composition vs inheritance
Species Catalog
Event model and Event Loop, callbacks/callback hell, Promise (then/catch/finally), Promise.all/race/allSettled, async/await, error handling try/catch, parallel async tasks, Fetch API, HTTP requests, JSON processing, iterators and generators
Control System
Advanced object/array patterns, method chaining/composition, reduce/flatMap, iterators, ES Modules (import/export), CommonJS (require), dynamic imports, debugging (console/breakpoints/profilers), advanced error handling, Builder/Observer patterns, regex, Date, localStorage/sessionStorage, ES2024/ES2025, Web APIs
Alarm Systems
What is TypeScript, tsconfig.json setup, tsc compiler, basic types (string/number/boolean/any/unknown), tuple, enum, union/intersection, interfaces, type aliases, extending interfaces, function parameter/return types, generic functions, function overloading, utility types
Code Evolution
Access modifiers (public/private/protected), static/abstract properties, interface implementation, type narrowing/type guards, generic classes, generic constraints, conditional types, mapped types, discriminated unions, class/method/property decorators, decorator factories, namespace, declaration merging
Advanced Genetics
Event listeners, Event object, propagation (bubbling), event delegation, mouse/keyboard events, form events, removing listeners/memory cleanup, advanced event handling, performance optimization, Event Bus, unit testing event handlers, Custom Events, advanced DOM API
TypeScript in Lab
Design patterns (Module/Factory/Observer), SOLID principles, functional programming, state management patterns, code splitting/tree shaking, lazy loading, bundle optimization, event-driven architecture
Project: Park Rebuild
Web Workers, memory management (garbage collection/memory leaks), declaration files (.d.ts), type-safe Event System, template literal types, TypeScript with Node.js, module augmentation, Test-Driven Development (TDD), TypeScript with popular frameworks
DNA Testing Center
Why testing matters, Jest framework, matchers, setup/teardown, mocking, async code testing, Test-Driven Development (TDD), testing TypeScript with Jest
Evolution Laboratory
What is functional programming, higher-order functions (map/filter/reduce), function composition (compose/pipe), currying/partial application, closures, recursion, immutability patterns, functors and monads
Cyberpunk 2150
Next.js 16, SSR, SSG, ISR, API Routes, TypeScript
Metropolis Entry
React/Next.js intro, environment setup, project initialization, directory structure, Client/Server Components, Hello World app, dev tools, rendering strategies overview
City Hyperloop
File-based routing, dynamic segments, Link/useRouter, route grouping, nested/catch-all routes, loading UI/layouts, 404/redirects, middleware
Quantum Processing
Global styles/CSS Modules, Tailwind CSS, Shadcn/UI, Image component, image loading strategies, font optimization, static assets (public/), icons/favicon/metadata
Neural Networks
Database options, Prisma ORM setup, data models/migrations, Server Components data fetching, Client Components hooks, Server Actions/mutations, search implementation, query optimization/N+1
ID System
Rendering strategies (App Router), data revalidation, streaming/Suspense, loading skeletons, Partial Prerendering, caching strategies, Edge Runtime, SSR vs SSG vs ISR benchmarks
Central Mainframe
Forms (controlled/uncontrolled), React Hook Form, Zod validation, server-side validation, form error handling, error.tsx components, Server Actions errors, accessibility, multi-step forms
Holographic Interfaces
Auth fundamentals, NextAuth.js/Auth.js, auth strategies, OAuth providers, sessions/tokens, roles/permissions, middleware route protection, OWASP security, Clerk integration, auth Context Provider
Quantum Optimization
Production readiness, SEO/dynamic metadata, Open Graph, sitemaps/robots.txt, web analytics, deployment platforms, environment variables, CI/CD, performance monitoring, PWA/Service Workers, preview deployments
Project: Mega City
Strapi CMS, Stripe payments, Resend/React Email, Zustand, advanced Server Actions, TanStack Table, typed routes, internationalization (next-intl), Docker, Turborepo monorepo, forbidden()/unauthorized(), after() API, use cache
Roman Empire
NestJS, TypeORM, PostgreSQL, JWT, WebSockets, Microservices
Rome Gate
NestJS architecture, modules, Dependency Injection, controllers, services, CRUD operations, DTOs, project configuration
Forum Romanum
Routing, middleware, guards, interceptors, pipes, custom decorators, exception filters, request lifecycle
Empire Treasury
Entities, migrations, relations, Repository pattern, Query Builder, transactions, seeders, data validation
Praetorian Guard
Password hashing, JWT, Passport.js, RBAC, refresh tokens, OAuth, sessions, two-factor authentication (2FA)
Centurion Hierarchy
WebSockets, real-time events, Socket.IO, broadcasting, rooms/namespaces, socket authentication, connection handling, error handling
Advanced Systems
Exception filters, custom exceptions, logging, health checks, monitoring, debugging, graceful shutdown
Legion Communication
Unit tests, integration tests, E2E tests, mocking, code coverage, performance testing, test automation
Qualification Tests
Redis cache, DB indexing, load balancing, memory management, rate limiting, compression, message queues, performance profiling
Empire Conquest
Docker, SSL/TLS, CI/CD, production practices, scaling/microservices, security, backup, blue-green deployment
Praetor's Chancellery
class-validator, ValidationPipe, class-transformer, nested validation, custom validators, validation groups
Senate Archives
Swagger setup, controller decorators, DTO documentation, response decorators, UI customization, CLI plugin, API versioning
Port of Ostia
Kubernetes, advanced Docker/Compose, secrets management, advanced CI/CD, Prometheus, OpenTelemetry, Terraform
Future Laboratory
Vue.js 3, Vite, TypeScript, Pinia, Vue Router
Launch Zone
Introduction to Vue.js, Vite, Single File Components, first Vue system, app structure, developer tools
Hologram Workshop
Interpolation, v-bind/v-on, class/style binding, v-if/v-show, v-for, template refs
Energy Reactor
ref() reactivity, reactive(), deep vs shallow reactivity, toRef/toRefs, debugging reactivity
Computing Center
Computed properties, computed get/set, watch, watchEffect, stopping watchers/cleanup
Control Simulator
Event handling, event modifiers, forms with v-model, v-model modifiers, advanced forms
3D Printer Bay
Components intro, registration/import, composition, lifecycle hooks, scoped styles/CSS modules, composables
Communication Station
Props basics, props validation, custom events, v-model on components, provide/inject, fallthrough attrs, advanced communication patterns
Module Storage
Slots basics, named slots, scoped slots, dynamic components, KeepAlive/Teleport, async components/Suspense, advanced slots
Science Laboratory
Advanced composables, reactive design patterns, VueUse, testing composables, performance/optimization, composables in production
Navigation Center
Vue Router basics, dynamic routes/params, nested routes/named views, navigation guards, programmatic navigation, advanced routing
Mission Database
Pinia basics, state, getters, actions, Composition API stores, store composition, plugins/persistence
Launch Platform
Component testing, composable/store testing, integration/E2E testing, building for production, deployment
Holographic Chamber
Transition component, named transitions/modes, JS Animation Hooks, TransitionGroup, animation library integration, route transitions, advanced animation patterns
Extensions Module
Custom directives (hooks/args/modifiers), advanced directives, plugin system, useful plugins, renderless/functional components, plugin ecosystem
Launch Control Center
TypeScript with Vue, typing props/emits, typing ref/reactive/computed, template refs/provide-inject typing, SSR/Nuxt concepts, Nuxt 3 basics