Дорожная карта фронтенд-разработчика 2025: что учить и в каком порядке

С чего начать

МногоROADMAP-ов в интернете предлагают выучить сразу всё: и React, и Vue, и Angular, и Webpack, и Docker. Это ошибка. Новичок пытается охватить всё, выгорает за месяц и бросает.

Нормальный путь: основа → фреймворк → практика → углубление. На каждом этапе вы решаете реальные задачи, а не просто читаете документацию.

Этап 1: Основы (2–3 месяца)

Это фундамент. Без него ни один фреймворк не будет понятен до конца.

HTML

• Семантические теги: header, main, section, article, nav, footer
• Формы: input, select, textarea, button, валидация
• Атрибуты: data-*, aria-*, disabled, readonly
• Изображения: srcset, picture, loading="lazy"

CSS

• Блочная модель (box model): margin, padding, border, box-sizing
• Flexbox — основа раскладки: display: flex, justify-content, align-items
• CSS Grid — для сложных сеток: grid-template-columns, gap
• Позиционирование: relative, absolute, fixed, sticky
• Адаптивность: @media, max-width, mobile-first
• Единицы: rem, em, vh, vw, clamp()

JavaScript

• Переменные: let, const (забудьте про var)
• Типы данных: примитивы и объекты, typeof
• Функции: стрелочные, параметры по умолчанию
• Массивы: map, filter, reduce, find, some, every
• Объекты: деструктуризация, spread/rest
• DOM: querySelector, addEventListener, classList
• Асинхронность: fetch, Promise, async/await

Что можно пропустить на этом этапе: классы, генераторы, Proxy, Symbol. Они понадобятся позже.

Этап 2: Инструменты и Git (2–3 недели)

Не нужно становиться DevOps-инженером. Но без минимальных навыков тяжело работать в команде.

Git

git init
git add .
git commit -m "feat: add header component"
git push origin main
git pull
git checkout -b feature/new-page

Умейте: создать репозиторий, сделать коммит, ветку, pull request. Этого достаточно для начала.

Инструменты

• VS Code — редактор, поставьте расширения: ESLint, Prettier, Vue/React snippets
• npm/bun — npm install, npm run dev, package.json
• Chrome DevTools — Elements, Console, Network

Командная строка

ls          # список файлов
cd projects # перейти в папку
mkdir app   # создать папку
cat file.js # посмотреть файл

Не нужно учить Bash-скрипты. Хватит базовых команд.

Этап 3: Фреймворк (1–2 месяца)

Выберите один. React или Vue — самые востребованные на рынке.

React

• JSX — как шаблон + логика в одном файле
• Компоненты — функциональные, с хуками
• Хуки: useState, useEffect, useRef, useMemo, useCallback
• Props — передача данных вниз
• Условный рендеринг и списки
• React Router — маршрутизация
• Работа с сервером: fetch + хуки или TanStack Query

Vue

• Template syntax: v-if, v-for, v-model, v-bind, @click
• Composition API: ref, reactive, computed, watch
• Компоненты: props, emit, slots
• Vue Router — маршрутизация
• Pinia — хранилище состояния
• Работа с сервером: fetch + composables

Не учите Angular сразу

Angular — полноценный фреймворк с RxJS, dependency injection, модулями. Крутой, но порог входа высокий. Если вы не знаете, нужен ли он вам — скорее всего, не нужен. Начните с React или Vue.

Этап 4: TypeScript (2–3 недели)

TypeScript — уже не опция, а стандарт. Большинство вакансий middle+ требуют TS.

• Базовые типы: string, number, boolean, array, null, undefined
• Интерфейсы: interface User { name: string; age: number }
• Дженерики: function identity<T>(value: T): T
• Utility types: Partial, Pick, Omit, Record
• Типизация компонентов: props, events, ref

Не нужно учить все продвинутые фичи (conditional types, mapped types). Начните с базовых и углубляйтесь по мере необходимости.

Этап 5: Практика и проекты (постоянно)

Теория без практики забывается. Каждый изученный блок закрепляйте проектом.

Уровень 1: Статичные страницы

• Лендинг с адаптивом
• Форма регистрации с валидацией
• Галерея изображений с фильтрами

Уровень 2: Интерактивные приложения

• TODO-приложение (CRUD + localStorage)
• Погода по API (fetch + отображение)
• Канбан-доска (drag & drop + состояние)

Уровень 3: Fullstack-лайт

• Блог с маршрутизацией и комментариями
• Интернет-магазин: каталог, корзина, фейковая оплата
• Чат: WebSocket или polling

Этап 6: Углубление (middle)

Когда вы уверенно пишете на фреймворке и решаете типичные задачи:

Обязательные темы

• Event Loop — как JS выполняет асинхронный код
• Замыкания — как работает scope
• Прототипы —原型链 и наследование
• Сеть: HTTP-методы, статус-коды, CORS, REST API
• Сборка: Vite (основы), зачем нужны бандлеры
• Тестирование: Vitest или Jest — хотя бы unit-тесты

Полезные, но не срочные

• SSR: Next.js (React) или Nuxt (Vue)
• State management: Redux Toolkit, Zustand, Pinia — глубже
• CSS-инструменты: Tailwind CSS, CSS Modules, styled-components
• CI/CD: GitHub Actions — базовый пайплайн
• Docker: Dockerfile для фронтенда

Не тратьте время на

• jQuery — мёртв для новых проектов
• CoffeeScript — умер
• Gulp/Grunt — устарели, Vite/Webpack заменили
• Веб-дизайн — это отдельная профессия

Сколько времени нужно

Это примерные сроки при 15–20 часах в неделю. Два часа каждый день лучше, чем десять часов в выходные — мозгу нужно время на усвоение.

Типичные ошибки

Пытаться выучить всё сразу. Не нужно знать React, Vue и Angular одновременно. Выберите один и идите глубже.

Смотреть туториалы без практики. После видео — напишите то же самое самостоятельно, без подглядывания. Если не получается — вы не поняли, а просто скопировали.

Ждать «готовности» до первого проекта. Готовность не наступит никогда. Делайте проекты на том уровне, на котором находитесь.

Игнорировать основы. Если вы не понимаете, как работает this или замыкания — фреймворк будет казаться магией. Основы всегда возвращаются на собеседованиях.

Сравнивать себя с другими. Кто-то за три месяца дошёл до middle. Кто-то за год ещё junior. Это нормальный разброс.

Итог

1. HTML → CSS → JavaScript — обязательная база
2. Выберите один фреймворк (React или Vue) и изучайте его глубоко
3. TypeScript — обязателен для middle+
4. Каждый блок закрепляйте практическим проектом
5. Git и базовые инструменты — параллельно с основами
6. Не пытайтесь охватить всё — лучше меньше технологий, но глубже