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

Поток документа Position Flexbox: основы 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

Elements Console Network Sources и отладка

Блок 3: Advanced Frontend

Модуль 3.1: Продвинутый JavaScript

Замыкания Контекст (this)Прототипы ES6+ классы Модули Деструктуризация и spread Map, Set, WeakMap, WeakSet Symbol и итераторы Proxy и Reflect Чистые функции и иммутабельность

Модуль 3.2: Асинхронность

Синхронный vs асинхронный код Event Loop Callbacks Promises Цепочки промисов Promise API Async/Await Практика: работа с API

Модуль 3.3: TypeScript

Зачем TypeScript Установка и настройка Базовые типы Объектные типы Union и Intersection типы Литеральные типы Generics Utility Types Типизация функций Классы в TypeScript Декларации типов Практика: типизация проекта

Модуль 3.4: React

Введение в React Создание проекта JSX Компоненты useState useEffect Обработка событий Условный рендеринг Списки и ключи useRef и useContext Кастомные хуки React Router Управление состоянием Практика: полноценное приложение

Модуль 3.5: Vue.js

Введение в Vue Создание проекта Шаблоны и директивы Реактивность Composition API Компоненты Жизненный цикл и Watchers Provide / Inject Vue Router Pinia Формы и валидация Оптимизация производительности Анимации и переходы Практический проект: Task Manager

Модуль 3.6: Тестирование

Зачем тестировать код Unit-тесты с Vitest Mocks и Spies Тестирование компонентов Тестирование асинхронного кода TDD и Best Practices

Модуль 3.7: Сборщики и инструменты

Зачем нужны сборщики Vite Webpack (обзор)npm scripts ESLint и Prettier

Модуль 3.8: CSS препроцессоры

Введение в SASS Переменные и вложенность Миксины и функции Модульность

Модуль 3.9: ООП и паттерны

Принципы ООП SOLID: S и O SOLID: L, I, D Паттерн Singleton Паттерн Observer Паттерн Factory Паттерн Module Применение паттернов во фронтенде

Модуль 3.10: Алгоритмы и структуры данных

Зачем алгоритмы Массивы и строки Хэш-таблицы Стек и очередь Связанные списки Деревья Сортировки Бинарный поиск Рекурсия Практика LeetCode

Модуль 3.11: Git продвинутый

Git Rebase Cherry-pick и Stash Git Flow Code Review Git Hooks

Модуль 3.12: HTTP и API

REST API Fetch API Axios CORS Аутентификация WebSockets

Модуль 3.13: Docker

Что такое Docker Dockerfile Docker Compose Практика Docker

Модуль 3.14: AI-инструменты

AI в разработке Промпт-инженерия Генерация кода AI для отладки и рефакторинга

Модуль 3.15: Архитектура фронтенда

Принципы проектирования Архитектурные паттерны Архитектурные стили Структура проекта Feature-Sliced Design State 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 — от идеи к реализации через Superpowers Spec-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 loop Tool Use: function calling, schema, парсинг Claude Agent SDK: установка, первый агент с tools Vercel AI SDK: generateText, streamText, tool calling FSM, DAG, граф состояний — паттерны оркестрации Планирование и самокоррекция агента

Модуль 6.2: RAG — агент с базой знаний

Что такое RAG: архитектура, когда нужен Embeddings: модели, провайдеры, размерности Векторные БД: Qdrant vs Pinecone vs ChromaDB Retrieval: semantic, hybrid search, reranking RAG-агент: поиск как tool, chunking стратегии Оценка качества RAG: метрики, RAGAS

Модуль 6.3: Память и состояние агента

Типы памяти: short-term, long-term, episodic, semantic Контекстное окно как short-term memory Persistent memory: KV store, summary, entity extraction Темпоральный граф: связи, метки, деградация Checkpointing: сохранение/восстановление состояния

Модуль 6.4: Multi-agent системы

Зачем несколько агентов: orchestration, delegation, debate Архитектура: supervisor, pipeline, peer-to-peer Реализация supervisor-агента на Claude Agent SDK Pipeline: researcher → writer → reviewer Коммуникация: shared state, message passing, handoff Отладка multi-agent: логи, трассировка, визуализация

Модуль 6.5: MCP (Model Context Protocol)

Что такое MCP: архитектура, transport, lifecycle MCP-сервер на TypeScript: tools, resources, prompts MCP-клиент: подключение, discovery, capabilities Агент + MCP: MCP-серверы как источник tools SSE 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 Streams Docker, CI/CD, quality-гейты, health checks

Модуль 6.7: Бизнес-кейсы и ROMI

Support-агент: авторезолв тикетов Sales/Content агент: исследование → персонализация → CRM Data/ETL агент: парсинг, очистка, валидация Браузерный агент: Playwright и автоматизация

Модуль 6.8: Финальный проект

Постановка задачи и выбор кейса Разработка собственного агента Защита: метрики, ROMI, альтернативные провайдеры

Главная/Блок 5: Вайб-кодинг/Модуль 5.7: Финальный проект

🎓

Модуль 5.7: Финальный проект

01

Постановка задачи

🔒

02

Разработка

🔒

03

Запуск и презентация

🔒