Роадмап фронтенд-разработчика
Путь от вёрстки до продакшена: что учить и в каком порядке.
Основы вебаКак страница попадает в браузер и что с ней там происходит.
- HTML — семантика, а не набор div
Заголовки, списки, формы, доступность разметки.
- CSS — модель коробки, flex, grid
Раскладка без хаков. Каскад и специфичность.
- Как работает браузер
DOM, CSSOM, рендер, репейнт. Вкладка «Сеть» и «Производительность».
- → Разобрать загрузку любимого сайта во вкладке «Сеть»
JavaScriptЯзык, а не только jQuery-подобные приёмы.
- Типы, замыкания, прототипы
То, что спрашивают на собеседовании и что реально нужно.
- Асинхронность
Промисы, async/await, event loop.
- Модули и сборка
ESM, что делает бандлер и зачем.
- DOM и события
Делегирование, всплытие, когда не нужен фреймворк.
- → Написать todo-список на чистом JS, без библиотек
Один фреймворк — глубокоReact, Vue или Svelte — выбери один и доведи до автоматизма.
- Компоненты и состояние
Локальное состояние, пропсы, подъём состояния.
- Управление данными
Стор, кэш запросов, когда он не нужен.
- Роутинг и код-сплиттинг
Ленивая загрузка, метаданные страниц.
TypeScriptТипы ловят ошибки до рантайма и документируют код.
- Базовые типы и дженерики
Достаточно для 90% кода.
- Типизация API и форм
Один источник правды между фронтом и бэком.
Инструменты
- Git — ветки, ребейз, конфликты
- → Пройти интерактивный тренажёр по git
- Пакетный менеджер и lock-файл
Почему lock коммитят и что ломается без него.
- Линтер и форматтер
ESLint + Prettier, настроить один раз.
Качество
- Юнит-тесты
Vitest/Jest. Тестировать поведение, не реализацию.
- E2E
Playwright: один сценарий, который проходит через весь продукт.
- Доступность
Клавиатура, скринридер, контраст. axe в CI.
Продакшен
- Сборка и деплой
Статика на CDN или SSR, переменные окружения.
- Производительность
Core Web Vitals, ленивые картинки, размер бандла.
- Мониторинг
Ошибки (Sentry), аналитика, алерты.
- → Выложить любой свой проект и подключить сбор ошибок