Хотите стать frontend-разработчиком, но теряетесь среди HTML, CSS, JavaScript, TypeScript, React, Next.js и других технологий? Эта дорожная карта раскладывает обучение по этапам: для каждого мы расскажем, что изучить, какой мини-проект сделать и как понять, что пора переходить дальше. Не торопитесь: последовательное движение по шагам даёт результат быстрее, чем попытка выучить всё одновременно.
1. HTML и CSS: фундамент всего
Любая страница, которую вы видите в браузере, построена на HTML и CSS. Фреймворки меняются, а эти две технологии остаются — поэтому время, вложенное в этот этап, потом окупится много раз.
HTML и семантика
HTML описывает структуру страницы. Цель — не заучить теги, а научиться выбирать тег по смыслу: <nav> для навигации, <main> для основного содержимого, <button> для кнопки — а не <div> для всего подряд. Семантическая вёрстка делает сайт понятным и для поисковых систем, и для людей, которые пользуются программами экранного доступа (скринридерами).
- иерархия заголовков, списки, ссылки, изображения и атрибут
alt; - семантические теги:
header,nav,main,section,article,footer; - формы: типы полей,
label, простая валидация; - основы доступности (accessibility).
CSS: Flexbox, Grid и адаптивность
CSS отвечает за внешний вид страницы. Главное внимание уделите расположению элементов — именно на это во frontend уходит больше всего времени.
- селекторы, каскад, блочная модель (box model), цвета и шрифты;
- Flexbox — раскладка в одну строку или колонку: меню, карточки, группы кнопок;
- Grid — двумерные макеты: каркас страницы, галереи;
- адаптивный дизайн: медиазапросы и подход mobile-first;
- CSS-переменные, переходы (transition) и простые анимации.
Мини-проект: одностраничный лендинг по готовому макету — например, для кафе или спортзала. Страница должна одинаково аккуратно выглядеть на телефоне, планшете и компьютере.
Вы готовы к следующему шагу, если: глядя на простой макет, сразу представляете, как собрать его на Flexbox или Grid, выбираете семантические теги не задумываясь, и ваша страница не «разваливается» на мобильном экране.
Пройти этот этап с ментором можно на нашем курсе HTML & CSS. Один из самых надёжных бесплатных справочников — MDN Web Docs.
2. JavaScript: DOM, асинхронность и fetch
JavaScript «оживляет» страницу: клики по кнопкам, проверка форм, загрузка данных с сервера. Это самый длинный и самый важный этап пути во frontend — все фреймворки построены именно на JavaScript.
- основы языка: переменные, типы, условия, циклы, функции;
- массивы и объекты, методы
map,filter,reduce; - DOM: поиск и изменение элементов, обработка событий;
- асинхронный код: колбэки, Promise,
async/await; - получение данных через
fetch, JSON и обработка ошибок; - модули (
import/export) и современный синтаксис ES2015+.
Например, так можно получить список пользователей из API:
async function loadUsers() {
const response = await fetch('/api/users');
if (!response.ok) throw new Error('Ошибка: ' + response.status);
return response.json();
}Мини-проект: страница прогноза погоды или поиска фильмов на открытом API — с формой поиска, индикатором загрузки и сообщением об ошибке. Для дополнительной практики напишите список задач (to-do list), который хранит данные в localStorage браузера.
Вы готовы к следующему шагу, если: можете с нуля написать небольшую интерактивную страницу без библиотек, своими словами объясняете, как работает async/await, и сами находите проблему по сообщению об ошибке в консоли.
Системно изучить язык поможет курс JavaScript. А если хотите увидеть, как код выполняется строка за строкой, загляните в раздел «Как это работает?» — там 100 бесплатных анимированных уроков, в том числе по JavaScript.
3. Git и GitHub: управляйте своим кодом
Git хранит историю версий кода, а GitHub — платформа, где код лежит в интернете и где над ним работают командой. Мы вынесли этот этап отдельно, но начинать пользоваться Git можно уже с первой HTML-страницы — чем раньше, тем лучше.
- основы работы в терминале;
commit,branch,mergeи разрешение конфликтов;- репозитории на GitHub, Pull Request и код-ревью;
- публикация статического сайта на GitHub Pages.
Мини-проект: загрузите на GitHub все свои предыдущие проекты и напишите к каждому README. Новую функцию сделайте в отдельной ветке и влейте в основной код через Pull Request.
Вы готовы к следующему шагу, если: работаете с Git каждый день, пишете понятные сообщения коммитов и знаете, как вернуться к предыдущей версии, когда что-то пошло не так.
Официальная документация и бесплатная книга «Pro Git» — на сайте git-scm.com. Освоить Git на практике можно на курсе Git & GitHub.
4. TypeScript: более надёжный код
TypeScript добавляет в JavaScript статическую типизацию. Редактор показывает ошибки ещё во время написания кода, до того как они попадут в браузер, а в больших проектах код становится заметно проще читать и менять. В современных проектах на React, Vue и Next.js TypeScript используется очень широко.
- базовые типы, объединения (union),
typeиinterface; - типизация параметров и результата функций;
- дженерики (generics);
- типы для данных, приходящих из API.
type User = { id: number; name: string };
function greet(user: User): string {
return `Привет, ${user.name}!`;
}Мини-проект: переведите проект с этапа JavaScript на TypeScript: опишите типы для ответа API и исправьте ошибки, которые найдёт редактор.
Вы готовы к следующему шагу, если: читаете и понимаете ошибки типов, избегаете any и спокойно пишете собственные типы.
Подробнее — на курсе TypeScript.
5. Фреймворк: React или Vue
Фреймворк позволяет собирать интерфейс из переиспользуемых компонентов. На старте выберите один и изучите его глубоко: у React более широкая экосистема и большое сообщество, а Vue ценят за простой и понятный синтаксис. Базовые идеи у них похожи, так что позже перейти на второй будет несложно.
- компоненты, props и состояние (state);
- хуки в React (
useState,useEffect), Composition API во Vue; - работа со списками, условным рендерингом и формами.
Роутинг, состояние и загрузка данных
Настоящее приложение состоит из нескольких страниц и постоянно обменивается данными с сервером. После основ фреймворка переходите к трём темам:
- роутинг — переходы между страницами: React Router или Vue Router;
- управление состоянием — данные, общие для нескольких компонентов: Redux Toolkit или Pinia;
- загрузка данных — запросы к API, кеширование, состояния загрузки и ошибок, например с TanStack Query.
Мини-проект: небольшой интернет-магазин с фильтрами, страницей товара и корзиной (данные — из открытого API) или многостраничный менеджер задач.
Вы готовы к следующему шагу, если: заранее продумываете, как разбить приложение на компоненты, можете объяснить, где должно храниться состояние, и собираете многостраничное приложение с нуля.
Курсы: React и Vue.js. Официальная документация: react.dev и vuejs.org.
6. Next.js, тесты и деплой
Next.js и основы SSR
Next.js — фреймворк на основе React. Обычное React-приложение собирает страницу в браузере, а Next.js умеет готовить её ещё на сервере (SSR — server-side rendering). В итоге страница открывается быстрее, а поисковые системы лучше её индексируют.
- App Router и роутинг на основе файлов;
- разница между Server и Client Components;
- SSR, статическая генерация и метаданные для SEO;
- простые API-маршруты (API routes).
Основы тестирования
Тесты дают уверенность, что после изменений старые функции не сломались. Для начала достаточно unit-тестов (Vitest или Jest) и тестов компонентов (Testing Library): проверьте, что функция возвращает правильный результат, а после клика по кнопке на экране появляется нужный текст.
Деплой
Если проект работает только на вашем компьютере, его никто не увидит. Статические сайты легко опубликовать на GitHub Pages или Netlify, приложения на Next.js — на Vercel. Разберитесь также с переменными окружения (environment variables) и автоматическим деплоем из GitHub.
Мини-проект: блог или сайт-портфолио на Next.js: страницы статей готовятся на сервере, для ключевых функций написано несколько тестов, а результат — ссылка, которая открывается в интернете.
Вы готовы к следующему шагу, если: можете объяснить, когда нужен SSR, в проекте есть тесты, а сайт обновляется автоматически после каждого push.
Подробнее — на курсе Next.js; тесты на Vitest разбираем на курсе React.
7. Портфолио: доказательство ваших навыков
Самый убедительный аргумент для работодателя — проекты, которые работают в интернете, и открытый код на GitHub. Важно не количество: лучше несколько аккуратных, доведённых до конца работ.
- у каждого проекта — живая ссылка и README: что делает проект, на каких технологиях построен, как его запустить;
- хотя бы один проект — для реального пользователя: небольшого бизнеса знакомых или вашего хобби;
- следите за мобильной версией, чистотой кода и понятной историей коммитов;
- соберите проекты, короткий рассказ о себе и контакты на одном сайте-портфолио.
Можно откликаться на вакансии, если: вы коротко и понятно рассказываете о каждом своём проекте, у вас есть аккуратное резюме, а большинство требований в вакансиях вам уже знакомо. Не ждите ощущения «я полностью готов» — чаще всего оно так и не приходит.
На наших курсах вы сделаете несколько проектов для портфолио, а после окончания курса мы помогаем с резюме и поиском работы.
Коротко: дорожная карта
| Этап | Ключевые темы | Курс |
|---|---|---|
| HTML & CSS | семантика, Flexbox, Grid, адаптивность | HTML & CSS |
| JavaScript | DOM, async/await, fetch | JavaScript |
| Git & GitHub | commit, branch, Pull Request | Git & GitHub |
| TypeScript | типы, интерфейсы, дженерики | TypeScript |
| React или Vue | компоненты, роутинг, состояние, загрузка данных | React, Vue.js |
| Next.js, тесты, деплой | SSR, unit-тесты, публикация | Next.js, React (тесты) |
| Портфолио | проекты, README, резюме | — |
Путь может показаться длинным, но каждый этап опирается на предыдущий, а каждый мини-проект — ещё один шаг к портфолио.
Если не уверены, на каком этапе вы сейчас и куда двигаться дальше, приходите на бесплатный пробный урок: познакомитесь с преподавателем, увидите, как проходят занятия, проверите свой уровень и получите помощь с выбором курса. Никаких обязательств. А если JavaScript вы уже знаете, логичный следующий шаг — курс React.
