Frontend Roadmap
Генератор легендыCV ImproverТренажёр собеседований
Telegram КаналКарта контента сообщества
Блок 1: Введение в цифровой мир
Модуль 1.1: Как работает интернет
Что такое компьютерная сетьПротоколы: TCP/IP и HTTPКлиент-серверная архитектураDNS и доменные именаКак работает браузерАнатомия URL
Модуль 1.2: Настройка рабочего окружения
Выбор редактора кодаУстановка VS CodeИнтерфейс VS CodeПолезные расширения VS CodeГорячие клавиши VS Code
Модуль 1.3: Командная строка
Что такое терминалНавигация по файловой системеРабота с файлами и папкамиПолезные командыТерминал в VS Code
Модуль 1.4: Введение в программирование
Что такое программированиеПеременные и типы данныхОператорыУсловия (if/else)ЦиклыАлгоритмическое мышление
Блок 2: Основы Frontend разработки
Модуль 2.1: HTML Основы
Что такое HTMLСтруктура HTML-документаТекстовые элементыСсылки и изображенияСемантические тегиТаблицыФормыАтрибуты форм и валидация
Модуль 2.2: CSS Основы
Что такое CSSСелекторыЦвета и фоныШрифты и текстБлочная модельDisplayСпецифичность и каскадЕдиницы измеренияПсевдоклассы и псевдоэлементыCSS-переменные
Модуль 2.3: CSS Layout
Поток документаPositionFlexbox: основыFlexbox: продвинутыйGrid: основыGrid: продвинутыйКогда Flex, когда GridПрактика: вёрстка макета
Модуль 2.4: Адаптивная вёрстка
Принципы адаптивностиMedia QueriesГибкие изображенияГибкая типографикаМобильная навигацияПрактика: адаптивный сайт
Модуль 2.5: JavaScript Основы
Введение в JavaScriptПеременныеТипы данныхОператорыУсловияЦиклыФункцииМассивыОбъектыСтрокиОбласть видимостиОтладка
Модуль 2.6: DOM и события
Что такое DOMВыборка элементовИзменение элементовСоздание и удаление элементовСобытия: основыСобытия: продвинутыеРабота с формамиПрактика: интерактивный UI
Модуль 2.7: Git и GitHub
Что такое GitБазовые команды GitВеткиGitHub: основыPull RequestsРабочий процесс
Модуль 2.8: DevTools
ElementsConsoleNetworkSources и отладка
Блок 3: Advanced Frontend
Модуль 3.1: Продвинутый JavaScript
ЗамыканияКонтекст (this)ПрототипыES6+ классыМодулиДеструктуризация и spreadMap, Set, WeakMap, WeakSetSymbol и итераторыProxy и ReflectЧистые функции и иммутабельность
Модуль 3.2: Асинхронность
Синхронный vs асинхронный кодEvent LoopCallbacksPromisesЦепочки промисовPromise APIAsync/AwaitПрактика: работа с API
Модуль 3.3: TypeScript
Зачем TypeScriptУстановка и настройкаБазовые типыОбъектные типыUnion и Intersection типыЛитеральные типыGenericsUtility TypesТипизация функцийКлассы в TypeScriptДекларации типовПрактика: типизация проекта
Модуль 3.4: React
Введение в ReactСоздание проектаJSXКомпонентыuseStateuseEffectОбработка событийУсловный рендерингСписки и ключиuseRef и useContextКастомные хукиReact RouterУправление состояниемПрактика: полноценное приложение
Модуль 3.5: Vue.js
Введение в VueСоздание проектаШаблоны и директивыРеактивностьComposition APIКомпонентыЖизненный цикл и WatchersProvide / InjectVue RouterPiniaФормы и валидацияОптимизация производительностиАнимации и переходыПрактический проект: Task Manager
Модуль 3.6: Тестирование
Зачем тестировать кодUnit-тесты с VitestMocks и SpiesТестирование компонентовТестирование асинхронного кодаTDD и Best Practices
Модуль 3.7: Сборщики и инструменты
Зачем нужны сборщикиViteWebpack (обзор)npm scriptsESLint и Prettier
Модуль 3.8: CSS препроцессоры
Введение в SASSПеременные и вложенностьМиксины и функцииМодульность
Модуль 3.9: ООП и паттерны
Принципы ООПSOLID: S и OSOLID: L, I, DПаттерн SingletonПаттерн ObserverПаттерн FactoryПаттерн ModuleПрименение паттернов во фронтенде
Модуль 3.10: Алгоритмы и структуры данных
Зачем алгоритмыМассивы и строкиХэш-таблицыСтек и очередьСвязанные спискиДеревьяСортировкиБинарный поискРекурсияПрактика LeetCode
Модуль 3.11: Git продвинутый
Git RebaseCherry-pick и StashGit FlowCode ReviewGit Hooks
Модуль 3.12: HTTP и API
REST APIFetch APIAxiosCORSАутентификацияWebSockets
Модуль 3.13: Docker
Что такое DockerDockerfileDocker ComposeПрактика Docker
Модуль 3.14: AI-инструменты
AI в разработкеПромпт-инженерияГенерация кодаAI для отладки и рефакторинга
Модуль 3.15: Архитектура фронтенда
Принципы проектированияАрхитектурные паттерныАрхитектурные стилиСтруктура проектаFeature-Sliced DesignState Management архитектураКомпонентная архитектураМикрофронтендыМасштабирование
Блок 4: Карьера
Модуль 4.1: Профориентация
Кто такой Frontend-разработчикРынок трудаПуть новичкаАльтернативные путиОжидания vs Реальность
Модуль 4.2: Резюме и портфолио
Структура резюмеЧто писать в опытеНавыки и технологииGitHub-профильПортфолио-проектыСопроводительное письмо
Модуль 4.3: Создание легенды
Что такое легендаРасскажите о себеОписание проектовСлабые стороныПочему ушли с прошлой работы
Модуль 4.4: Поиск работы
Площадки для поискаКак откликатьсяНетворкингРабота с рекрутерамиОтслеживание откликов
Модуль 4.5: Собеседования
Этапы собеседованийПодготовка к HRВопросы работодателюПоведение на собесеПосле собеседованияАнализ отказов
Модуль 4.6: Soft Skills
КоммуникацияРабота в командеТайм-менеджментОтветственность (Ownership)ОбучаемостьВопросы по Soft Skills
Модуль 4.7: Технические интервью
Форматы технических интервьюТеоретические вопросыLive CodingТестовые заданияWhiteboard InterviewПодготовка к техинтервью
Модуль 4.8: Зарплатные переговоры
Исследование рынкаКогда говорить о деньгахТехники переговоровКонтроффер
Модуль 4.9: Испытательный срок
Первый деньПервые неделиПервые 90 днейРаспространённые ошибкиКак пройти испытательный
Модуль 4.10: Развитие карьеры
Грейды и ростКак просить повышениеКогда менять работуВыгораниеДолгосрочное планированиеГрейды и ростКак просить повышениеКогда менять работуВыгораниеWork-life balanceДолгосрочное планирование
Блок 5: Вайб-кодинг
Модуль 5.0: Что такое вайб-кодинг
Вайб-кодинг — новый навыкКак AI пишет код за васОбзор инструментовПервый проект за 15 минут
Модуль 5.1: Среда разработки без боли
Установка и настройкаФайлы и папки проектаGit для не-программистовКонтекст для AIЧитаем чужой код глазами AIДжентльменский набор вайбкодера
Модуль 5.2: Промптинг для кода
Анатомия хорошего промптаИтерации вместо идеалаОтладка через AIПромпт-паттерныКонтекст — корольPlan & Act — от идеи к реализации через SuperpowersSpec-Driven Development — спека как источник правдыПамять агента: start-session и end-session
Модуль 5.3: Фронтенд — видимая часть
Vue и Nuxt — фреймворк для проектаФормы и взаимодействиеКомпоненты и переиспользованиеHTML/CSS/JS — минимум теорииАдаптивность и стили
Модуль 5.4: Бэкенд и данные
Сервер на Node.jsБаза данныхВнешние сервисы и APIАвторизацияTelegram-ботФронт vs бэк — как устроен веб
Модуль 5.5: AI-фичи в продукте
Подключаем LLMЧат-бот в приложенииГенерация контентаАнализ данных через AIКонтроль расходов
Модуль 5.6: Деплой и жизнь продукта
Деплой: Vercel и RailwayБезопасность для не-разработчиковИтерации и развитиеДомен и DNSМониторинг и ошибки
Модуль 5.7: Финальный проект
Постановка задачиРазработкаЗапуск и презентация
Блок 6: AI Agents
Модуль 6.0: Основы LLM и AI
Что такое LLM: токены, контекст, температура, моделиAPI провайдеров: Anthropic, OpenAI, OpenRouterПромпт-инжиниринг: system/user/assistant, few-shot, CoTСтриминг, structured output, мультимодальность
Модуль 6.1: Первый AI-агент
Что такое AI-агент: агент vs чат-бот, ReAct, agentic loopTool Use: function calling, schema, парсингClaude Agent SDK: установка, первый агент с toolsVercel AI SDK: generateText, streamText, tool callingFSM, DAG, граф состояний — паттерны оркестрацииПланирование и самокоррекция агента
Модуль 6.2: RAG — агент с базой знаний
Что такое RAG: архитектура, когда нуженEmbeddings: модели, провайдеры, размерностиВекторные БД: Qdrant vs Pinecone vs ChromaDBRetrieval: semantic, hybrid search, rerankingRAG-агент: поиск как tool, chunking стратегииОценка качества RAG: метрики, RAGAS
Модуль 6.3: Память и состояние агента
Типы памяти: short-term, long-term, episodic, semanticКонтекстное окно как short-term memoryPersistent memory: KV store, summary, entity extractionТемпоральный граф: связи, метки, деградацияCheckpointing: сохранение/восстановление состояния
Модуль 6.4: Multi-agent системы
Зачем несколько агентов: orchestration, delegation, debateАрхитектура: supervisor, pipeline, peer-to-peerРеализация supervisor-агента на Claude Agent SDKPipeline: researcher → writer → reviewerКоммуникация: shared state, message passing, handoffОтладка multi-agent: логи, трассировка, визуализация
Модуль 6.5: MCP (Model Context Protocol)
Что такое MCP: архитектура, transport, lifecycleMCP-сервер на TypeScript: tools, resources, promptsMCP-клиент: подключение, discovery, capabilitiesАгент + MCP: MCP-серверы как источник toolsSSE transport, auth, композиция серверов
Модуль 6.6: Production и безопасность
Safety: prompt injection, guardrails, валидацияPII и RBAC: фильтрация данных, контроль доступаSandbox и контроль побочных эффектовDead-letter очереди и обработка ошибокLLM-as-a-Judge: автооценка, golden-сетиA/B-тестирование промптов и стратегийСтоимость: токены, кеширование, rate limitingМониторинг: OpenTelemetry, Prometheus, GrafanaОчереди сообщений: BullMQ, Redis StreamsDocker, CI/CD, quality-гейты, health checks
Модуль 6.7: Бизнес-кейсы и ROMI
Support-агент: авторезолв тикетовSales/Content агент: исследование → персонализация → CRMData/ETL агент: парсинг, очистка, валидацияБраузерный агент: Playwright и автоматизация
Модуль 6.8: Финальный проект
Постановка задачи и выбор кейсаРазработка собственного агентаЗащита: метрики, ROMI, альтернативные провайдеры
Главная/Блок 6: AI Agents/Модуль 6.6: Production и безопасность
🛡️

Модуль 6.6: Production и безопасность

01

Safety: prompt injection, guardrails, валидация

🔒
02

PII и RBAC: фильтрация данных, контроль доступа

🔒
03

Sandbox и контроль побочных эффектов

🔒
04

Dead-letter очереди и обработка ошибок

🔒
05

LLM-as-a-Judge: автооценка, golden-сети

🔒
06

A/B-тестирование промптов и стратегий

🔒
07

Стоимость: токены, кеширование, rate limiting

🔒
08

Мониторинг: OpenTelemetry, Prometheus, Grafana

🔒
09

Очереди сообщений: BullMQ, Redis Streams

🔒
10

Docker, CI/CD, quality-гейты, health checks

🔒