Карта навыков Frontend-разработчика
Roadmap фронтенд-разработчика с нуля: от семантического HTML и адаптивной вёрстки до приложения с API. После основы JavaScript в этой карте выбран стек TypeScript и React.
6 этапов 34 темы 34 обязательные темы
koddo Карта навыков Frontend-разработчика koddo.ru/roadmaps/frontend Интерактивная карта навыков
Нажимай на кружок темы: раз — «изучаю», два — «готово», три — снять отметку.
Собери понятную HTML-страницу
Разбери, как браузер получает страницу. Начни с нативных HTML-элементов: они задают структуру, смысл и основу управления с клавиатуры.
-
От URL до страницы
Проследи DNS, HTTP-запрос и загрузку HTML, CSS и JavaScript. Найди запросы, статусы и ошибки в Network и Console браузера.
-
Семантика HTML
Разметь страницу с main, nav, заголовками и списками. Выбирай ссылку для перехода, кнопку для действия; проверь смысл без оформления.
-
Клавиатура и фокус
Пройди страницу клавишами Tab и Enter. Сохрани видимый фокус, логичный порядок переходов и понятные названия ссылок и кнопок.
-
Нативные формы
Собери форму с label, input и button. Подбери type и autocomplete, свяжи подписи с полями и проверь отправку через Enter.
-
Git и структура проекта
Раздели HTML, CSS и JavaScript по файлам. Создай репозиторий, внеси изменение в ветке и проверь diff перед коммитом.
Сделай адаптивную вёрстку
Освой поток документа, каскад и раскладку. Проверяй страницу на разной ширине, с длинным текстом и увеличенным масштабом.
-
Каскад и блочная модель
Объясни, какое CSS-правило победило. Проверь наследование, специфичность, padding, border и box-sizing через инструменты разработчика.
-
Текст и изображения
Настрой читаемый текст и межстрочный интервал. Добавь alt по смыслу изображения, задай его размеры и проверь длинные строки.
-
Flexbox
Собери навигацию и строку карточек через Flexbox. Проверь выравнивание, перенос и сжатие элементов при нехватке места.
-
CSS Grid
Сверстай сетку карточек с gap и minmax. Проверь одинаковый ритм колонок, длинные заголовки и поведение при разном числе элементов.
-
Адаптивность
Перестрой страницу для узкого экрана через media queries. Убери горизонтальное переполнение и проверь интерфейс при увеличении масштаба.
Освой логику JavaScript
Сначала решай небольшие задачи без DOM. Научись преобразовывать данные, разделять расчёты и объяснять порядок выполнения кода.
-
Типы, условия и циклы
Используй let и const, явные преобразования и строгое сравнение. Обработай null и undefined, напиши условия и обход коллекции.
-
Массивы и преобразования
Найди и отфильтруй записи, преобразуй их через map и посчитай итог через reduce. Проверь пустой массив и сохранность исходных данных.
-
Объекты и копирование
Прочитай свойства с учётом отсутствующих значений. Обнови объект без изменения исходного; объясни границы поверхностной копии.
-
Функции и замыкания
Выдели расчёт в функцию с аргументами и return. Создай счётчик в замыкании и проверь, что два экземпляра не делят состояние.
-
Модули и окружение
Раздели код через import и export. Проверь пути импорта; различай браузер и Node.js, а также модули ESM и CommonJS.
-
Promise и async/await
Выполни зависимые шаги последовательно, независимые — через Promise.all. Обработай отказ и проверь, что ошибки доходят до вызывающего кода.
Свяжи интерфейс с данными
Добавь события, формы и API на обычном JavaScript. Продумай сбои и пустые результаты до переноса приложения во фреймворк.
-
DOM и события
Найди элемент, обнови его текст и обработай действие через addEventListener. Проверь всплытие и отсутствие повторных обработчиков.
-
Валидация формы
Считай данные через FormData и покажи ошибки рядом с полями. Сохрани введённое и доступный фокус; помни о проверке данных на сервере.
-
fetch и ошибки API
Получи JSON через fetch, проверь response.ok и структуру данных. Различай HTTP-ошибку, сетевой сбой и CORS; обработай отмену запроса.
-
Загрузка, ошибка и пустой ответ
Покажи состояния загрузки, успеха, ошибки и пустого результата. Добавь повтор запроса и не позволяй старому ответу затереть новый.
-
XSS и границы доверия
Выводи недоверенный текст без вставки HTML. Не храни секреты в клиентском коде; не считай скрытую кнопку или CORS проверкой прав доступа.
-
URL и браузерное хранилище
Сохрани фильтры в query-параметрах и восстанови их при открытии ссылки. Используй localStorage для несекретных настроек и обработай сбой чтения.
Собери приложение на React
В этой карте TypeScript и React выбраны для практики компонентного подхода. Это один из стеков фронтенда; HTML, CSS и JavaScript остаются его основой.
-
TypeScript и контракты
Опиши props, события и состояния через типы и объединения. Сузь unknown проверкой; объясни, почему тип не валидирует ответ API при выполнении.
-
Пакеты и сборка
Установи зависимости с lock-файлом, настрой запуск и сборку проекта. Проверь production-сборку и не передавай секреты в клиентские переменные.
-
Компоненты, props и JSX
Разбей интерфейс на компоненты, передай данные через props и отрисуй список со стабильными ключами. Сохрани семантику исходного HTML.
-
Состояние и формы
Добавь useState и управляемую форму. Обновляй данные без мутаций, поднимай общее состояние и вычисляй производные значения без лишних копий.
-
Эффекты и очистка
Используй effect для связи с внешней системой. Очищай подписки и таймеры, учитывай зависимости; не запускай побочные действия во время рендера.
-
Маршруты и навигация
Добавь страницы, параметры URL и состояние «не найдено». Проверь прямую ссылку, обновление страницы, кнопку «назад» и перенос фокуса при переходе.
Проверь и опубликуй проект
Проверь пользовательские сценарии, доступность и скорость на собранном приложении. Заверши маршрут проектом, который можно открыть и объяснить.
-
Проверки логики и интерфейса
Проверь расчёты на крайних случаях и поведение формы при ошибке. Напиши тест пользовательского действия и убедись, что он ловит поломку.
-
Скорость загрузки и отклика
Измерь загрузку и отклик на действие. Найди тяжёлый ресурс или долгую задачу, сократи лишнюю работу и сравни результат до и после.
-
Проверка доступности
Проверь клавиатуру, порядок фокуса, контраст, масштаб и подписи ошибок. Убедись, что скринридер называет поля и сообщает об изменении состояния.
-
Публикация и проверка релиза
Опубликуй production-сборку по HTTPS. Проверь прямые ссылки, загрузку ресурсов и ошибки API; сохрани способ вернуть предыдущую версию.
-
Рубеж: самостоятельный интерфейс контрольная точка
Собери приложение с каталогом, фильтрами, формой и API. Добавь все состояния, адаптивную вёрстку, проверки и README; опубликуй рабочую ссылку.
-
Собеседование и защита проекта контрольная точка
Объясни вёрстку, состояние и работу с API на своём проекте. Реши задачу JavaScript вслух, разбери ошибку и составь список тем для повторения.
закрепи основу JavaScript на задачах
Реши задачи на массивы, объекты, замыкания и Promise. Это практика языка: вёрстку, доступность и поведение интерфейса проверяй отдельно на своём проекте.