🗺️

Frontend Roadmap

Полный путь от новичка до Senior Frontend-разработчика. Следуй этапам — каждый шаг строится на предыдущем.

Прогресс по курсу

0/124

НАШИ КУРСЫ · ОТ НУЛЯ ДО MIDDLE

Основы JavaScript

Синтаксис, типы, функции и объекты — фундамент, который нужно знать наизусть

0/38

🚀Введение0/1

📝Основы JavaScript0/14

📦Типы данных0/14

🔷Объекты0/9

Функции и ООП

Продвинутые паттерны работы с функциями, прототипы, классы, обработка ошибок

0/25

⚡Продвинутые функции0/13

🏗️Прототипы и классы0/10

🛡️Обработка ошибок0/2

Асинхронный JavaScript

Промисы, async/await, event loop, генераторы — вся асинхронность JS

0/9

⏳Асинхронный JS0/9

Браузер и Web API

DOM, события, сетевые запросы, хранилище, браузерные API

0/32

🌳DOM0/8

🔔События0/9

📡Сеть0/8

🗄️Хранилище0/3

🌐Браузер0/4

Специализированные темы

Модули, RegExp, бинарные данные, веб-компоненты, анимации и CSS для JS

0/20

📦Модули0/2

🔍Строки и RegExp0/3

💾Бинарные данные0/4

🧩Веб-компоненты0/3

🎬Анимация0/3

🎨CSS для JS0/5

🎯

Подготовка к собеседованию

15 типичных вопросов для middle-разработчика

После наших курсов

СЛЕДУЮЩИЕ ШАГИ · MIDDLE → SENIOR

⚛️React

Обязательно

Самая популярная UI-библиотека. Хуки, компонентная архитектура, JSX

useState / useEffectuseRef / useMemoContext APIReact Router

▲Next.js

Важно

React-фреймворк: SSR, SSG, App Router, API routes, Server Actions

App RouterServer ComponentsAPI RoutesDeployments

🗃️State Management

Важно

Zustand или Redux Toolkit — управление глобальным состоянием приложения

ZustandRedux ToolkitReact QueryJotai

🧪Тестирование

Важно

Unit-тесты (Vitest), интеграционные (Testing Library), e2e (Playwright)

VitestReact Testing LibraryPlaywrightMSW

🎨CSS / Tailwind

Рекомендуется

Tailwind CSS, CSS Modules, CSS-in-JS. Адаптивная вёрстка, анимации

Tailwind CSSCSS ModulesFramer MotionFlexbox/Grid

⚡Vite / Webpack

Рекомендуется

Сборщики и инструменты разработки. Vite — стандарт де-факто в 2024+

Vite configCode splittingTree shakingBundle analysis

🟢Vue 3 / Nuxt

Альтернатива

Популярная альтернатива React. Composition API, реактивность, Nuxt для SSR

Composition APIPiniaVue RouterNuxt 3

Путь к Senior

SENIOR · АРХИТЕКТУРА И ГЛУБИНА

🏛️Архитектура фронтенда

Design Patterns, SOLID, Micro-frontends, Monorepo (Nx, Turborepo), Feature-Sliced Design

🚀Performance

Core Web Vitals, Lighthouse, Bundle optimization, Lazy loading, SSR / ISR / SSG, Image optimization

🖥️Node.js / Backend для фронта

Express, Fastify, REST API design, GraphQL, BFF паттерн, базы данных (PostgreSQL, Redis)

🔒Безопасность

OWASP Top 10, Content Security Policy, Auth (JWT, OAuth 2.0, OpenID Connect), HTTPS

🐳DevOps / CI-CD

Docker, GitHub Actions, Vercel / Netlify, мониторинг (Sentry, Datadog), Feature flags

📊System Design

Масштабирование архитектуры, CDN, кэширование, очереди сообщений, распределённые системы

roadmap.sh · developer.mozilla.org · javascript.info — дополнительные ресурсы для углублённого изучения