Карта обучения frontend-разработке

JuniorMiddleSeniorОбзор ~16 мин

Сильный frontend начинается не с API фреймворка. Трек последовательно соединяет платформу браузера, языки, архитектуру приложения, качество и production.

ТРЕК FRONTEND-РАЗРАБОТКИ

От веб-платформы к готовым к эксплуатации интерфейсам

Трек связывает основы браузера, JavaScript и TypeScript с архитектурой интерфейсов, доступностью, производительностью и эксплуатацией frontend-систем.

Темы

441

Разделы

18

Этапы

5

01

Освоить платформу

Понять HTML, CSS, модель браузера и сетевой жизненный цикл страницы.

Веб-платформаHTMLCSSБраузер

02

Освоить языки

Уверенно работать с JavaScript, TypeScript и семантикой среды выполнения.

JavaScriptАсинхронная работаTypeScriptИнструменты

03

Строить приложения

Проектировать отрисовку, состояние, поток данных, формы и границы UI.

АрхитектураОтрисовкаСостояниеДанные

04

Обеспечить качество

Сделать интерфейс доступным, быстрым, безопасным и проверяемым.

ДоступностьПроизводительностьБезопасностьТестирование

05

Эксплуатировать

Развивать дизайн-системы, доставку, наблюдаемость и frontend-платформу.

Дизайн-системыДоставкаНаблюдаемостьПлатформа

Полный трек441 тем

01

Веб-платформа

URL, HTTP, браузер и веб-стандарты

24 тем

02

HTML и семантика

Структура документа и семантический UI

22 тем

03

Основы CSS

Каскад, селекторы и визуальное форматирование

30 тем

04

Компоновка и адаптивность

Поток, Flexbox, Grid и адаптивность

24 тем

05

JavaScript

Семантика языка и модель программирования

32 тем

06

Среда выполнения браузера

Цикл событий, DOM, отрисовка и workers

25 тем

07

TypeScript

Типы, вывод типов и безопасное проектирование API

24 тем

08

Архитектура интерфейсов

Границы, композиция и сопровождаемость

26 тем

09

Фреймворки и отрисовка

CSR, SSR, гидратация и реактивность

28 тем

10

Состояние и данные

Модели состояния, загрузка и синхронизация

24 тем

11

Формы

Ввод, проверка и отправка

18 тем

12

Доступность

WCAG, клавиатура и вспомогательные технологии

24 тем

13

Производительность

Метрики, загрузка и производительность среды

26 тем

14

Безопасность

Источник, XSS, CSP и доверие во frontend

22 тем

15

Тестирование

Модульные, компонентные, интеграционные и E2E-тесты

24 тем

16

Инструменты и доставка

Сборка, бандлы, CI и выпуски

22 тем

17

Дизайн-системы

Токены, компоненты и управление

22 тем

18

Эксплуатация frontend

Мониторинг, инциденты и платформа

24 тем

Карта знаний

Диаграмма

Как проходить трек

1. Воспроизводите базовые механизмы без framework abstraction.
2. Для каждой UI-фичи рисуйте state, event и data flow.
3. Проверяйте semantics, keyboard flow и accessibility tree.
4. Измеряйте loading и runtime performance, не полагайтесь на ощущения.
5. Добавляйте unit, component, integration и E2E-тесты по уровню риска.
6. Разбирайте delivery, telemetry, rollback и browser compatibility как часть дизайна.

Контрольные проекты

Этап	Проект	Что доказывает
Platform	Доступная responsive-страница без framework	HTML, CSS, browser model
Application	Data-heavy SPA	TypeScript, state, errors, concurrency
Rendering	SSR-приложение	hydration, caching, performance
System	Component library	API, tokens, accessibility, governance
Production	Наблюдаемый web-продукт	RUM, incidents, safe delivery

Полная программа: progress.md.