Главная → Roadmap Frontend

Дорожная карта

Roadmap Frontend-разработчика с нуля

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

🗺️ 6 этапов 🎯 С нуля 🔄 Обновлено: 2026

Что такое frontend-разработка

Frontend — это всё, что пользователь видит и с чем взаимодействует в браузере: вёрстка страницы, кнопки, формы, анимации, поведение интерфейса. За это отвечают три технологии: HTML (структура), CSS (внешний вид) и JavaScript (логика и интерактивность).

💡 Важно: JavaScript — самая объёмная и самая важная часть этого набора. Именно от уровня владения им зависит, сможешь ли ты дальше перейти к фреймворкам вроде React или Vue.

Путь по шагам

1-2 недели

HTML — структура страницы

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

2-3 недели

CSS — оформление и Flexbox

Размеры, отступы, цвета, Flexbox для расположения блоков, базовая адаптивность под разные экраны.

2-4 месяца

JavaScript — основы языка

Переменные, типы данных, условия, циклы, функции, массивы и объекты — фундамент, без которого дальше двигаться нельзя.

1-2 месяца

DOM и события

Управление страницей из кода: реакция на клики, изменение контента, работа с формами и вводом пользователя.

1-2 месяца

Первые самостоятельные проекты

Небольшие, но полностью законченные приложения — калькулятор, список задач, мини-игра, простой интернет-магазин.

По желанию

Фреймворк (React, Vue) и портфолио

После уверенного JavaScript фреймворк осваивается гораздо быстрее. 2-3 готовых проекта в портфолио — и можно откликаться на junior-вакансии.

С какого шага начать прямо сейчас

Если HTML и CSS уже знакомы хотя бы на базовом уровне — можно сразу переходить к JavaScript, это самый долгий и самый важный этап всего пути. Если нет — пара дней на знакомство с тегами и Flexbox не будут потрачены зря, но затягивать с переходом к JavaScript не стоит: именно он определяет, состоится ли путь в frontend или нет.

Что дальше

🍌 JavaScript для начинающих
С чего начать самый важный этап роадмапа
💰 Сколько зарабатывает JS-разработчик
Зарплаты по уровням и что на них влияет
🎯 Как выбрать курс JavaScript
На что смотреть перед покупкой обучения

Готов пройти самый важный этап?

Бесплатный курс JavaScript с практическим заданием после каждого урока — основа всего roadmap, с нуля до уверенного уровня.

🎓 Пройти курс полностью на Udemy ▶️ Попробовать бесплатно на YouTube

Частые вопросы

? Нужно ли сразу учить React или другой фреймворк?
Нет. Фреймворки строятся поверх обычного JavaScript, и без уверенного понимания основ языка учить React будет гораздо сложнее. Сначала стоит закрыть базовый JavaScript, а фреймворк добавить позже.
? Сколько времени занимает весь путь до первой работы frontend-разработчиком?
При регулярной практике (1-2 часа в день) на HTML/CSS и основы JavaScript уходит 2-4 месяца, ещё 3-6 месяцев — на углублённый JavaScript, DOM и первые проекты. В сумме до первой работы обычно 6-12 месяцев.
? Нужна ли математика для frontend-разработки?
Для старта в frontend достаточно арифметики уровня школы. Сложная математика нужна в других направлениях (например, в машинном обучении), но не в типичной работе frontend-разработчика.