Roadmap frontend-разработчика: что учить и в каком порядке

Порядок в одном списке

Frontend проще всего осваивать слоями, где каждый следующий опирается на предыдущий:

1. HTML и CSS — структура и внешний вид страницы.
2. JavaScript — логика и интерактивность.
3. Git, браузер и работа с API — инструменты повседневной работы.
4. Один фреймворк — например, React, Vue или Angular.
5. TypeScript и инструменты — типизация, сборка, линтеры.
6. Тестирование и качество — тесты, доступность, производительность.

Главная ошибка новичков — прыгать сразу к фреймворку. Без уверенного JavaScript фреймворк превращается в набор магических заклинаний.

Этап 1. HTML и CSS

Что изучить:

• Семантическая разметка: header, main, nav, article, формы и их атрибуты.
• CSS-основы: селекторы, каскад, блочная модель, единицы измерения.
• Раскладка: Flexbox и Grid.
• Адаптивность: media queries, mobile first.
• Базовая доступность: alt-тексты, подписи к полям, контраст.

Чекпоинт: вы можете сверстать страницу по макету, и она корректно выглядит на телефоне и десктопе.

Проект: лендинг или резюме-страница, сверстанные без библиотек.

Этап 2. JavaScript

• Переменные, типы, функции, области видимости, замыкания.
• Массивы и объекты, методы map, filter, reduce.
• Работа с DOM и событиями.
• Асинхронность: промисы, async/await, fetch.
• Модули и базовая обработка ошибок.

Чекпоинт: вы объясняете, что выведет небольшой асинхронный фрагмент кода, и пишете интерактивный интерфейс без фреймворка.

Проект: список задач с сохранением в localStorage или калькулятор с историей операций.

Этап 3. Git, браузер и API

• Git: коммиты, ветки, слияние, pull request.
• DevTools: инспектор, консоль, вкладка Network, отладка.
• HTTP и REST: методы, статус-коды, заголовки, JSON.

git checkout -b feature/search
git add .
git commit -m "Add search by title"
git push origin feature/search

Чекпоинт: ваши проекты лежат на GitHub с осмысленной историей коммитов.

Проект: приложение, которое загружает данные из открытого API (погода, курсы валют, фильмы) с поиском, загрузкой и обработкой ошибок.

Этап 4. Фреймворк

Выберите один фреймворк, ориентируясь на вакансии в вашем городе или нужной компании. Изучите:

• компоненты, props и состояние;
• работу с формами и списками;
• маршрутизацию;
• загрузку данных и управление состоянием.

Чекпоинт: вы разбиваете интерфейс на компоненты и объясняете, почему компонент перерисовывается.

Проект: многостраничное приложение, например каталог с фильтрами, корзиной и страницей товара.

Этап 5. TypeScript и инструменты

• TypeScript: типы, интерфейсы, generics на базовом уровне.
• Сборщики и пакетные менеджеры: npm, понимание того, что делает сборщик.
• Линтер и форматтер: ESLint, Prettier.
• Деплой: публикация проекта на хостинге статических сайтов.

Чекпоинт: проект собирается без ошибок типов и доступен по публичной ссылке.

Этап 6. Тестирование и качество

• Unit-тесты для функций и компонентов.
• E2E-тесты для ключевых сценариев.
• Производительность: размер бандла, ленивая загрузка, оптимизация изображений.
• Доступность: навигация с клавиатуры, работа со скринридером.

Проект: добавьте тесты и проверку линтером в CI к одному из прошлых проектов.

Частые ошибки