Данные из 117вакансий · 12 августа 2026

Как стать frontend-разработчиком: путь от нуля до первого оффера

Не «стань разработчиком за 3 месяца» — реальный путь входа на основе данных по 117 вакансий.

Мурадов ЮрийАвтор·Мурадов Юрий·Аналитик SkillStat
ЧДПроверено·Чернов Денис·Технический редактор·frontend разработчик · опыт 10+ лет
Junior-вакансий сейчас
19
16% от всех 117 вакансий
Сложность входа
Низкая
16% junior-вакансий
Senior / Junior+Intern
1.9x
На каждого junior+intern — 1.9 senior
Навыков / вакансия
14
медиана по вакансиям
Всего вакансий
117
активных в Москве
Можно ли с нуля Короткий план Roadmap Junior-рынок Портфолио Резюме Собеседование Ошибки Обучение Курсы FAQ

Можно ли стать frontend-разработчиком с нуля

Да. По данным SkillStat, 16% вакансий frontend-разработчика — уровня junior или стажёр. Это 19 вакансий прямо сейчас.

«С нуля» у frontend-разработчика — это без коммерческого опыта, но с браузером, который ты уже умеешь ломать и чинить. К первому отклику нужны: семантическая вёрстка, CSS без «поплыло на узком экране», JavaScript и TypeScript на уровне своей логики, один фреймворк с маршрутами и состоянием, и экран, который не разваливается, когда сервер ответил 500. Медиана требований — 14 навыков, и половина списка про то, что происходит после успешного сценария.

Вход трудный не из-за количества технологий. React учится, TypeScript учится. Трудно то, что фронтенд отвечает за чужие ошибки: медленная сеть, ответ не того формата, пользователь нажал дважды, экран 320 точек шириной, клавиатура вместо мыши. На одного junior приходится 1.9 senior-вакансии — берут тех, кто уже разгребал такие экраны.

Как стать frontend-разработчиком: короткий план

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

01
Разметка и CSS
HTML — в 53% вакансий, CSS — в 49.6%. Собери страницу, которая не ломается при длинном тексте, пустом списке и узком экране.
02
JavaScript и DOM
88.9% вакансий требуют JavaScript. События, формы, асинхронный код, отмена запроса, обработка ошибки — до всякого фреймворка.
03
TypeScript
75.2% вакансий — почти столько же, сколько сам JavaScript. Типизируй ответ API, состояние формы и свойства компонента, а не только переменные.
04
Один фреймворк
React — в 59% вакансий, Vue.js — в 23.1%. Бери один и доведи до маршрутов, состояния и обработки ошибок сервера.
05
Качество и сборка
Git есть в 53% вакансий, Vite и Webpack — в 17.9% и 23.9%. Добавь Jest на критичные сценарии, проверь клавиатуру и скорость загрузки.

Что учить frontend-разработчику первым

Не всё сразу. Вот очерёдность по частотности в вакансиях — от самого нужного к менее срочному.

Навык Все вакансии
JavaScript 88.9%
TypeScript 75.2%
React 59%
Git 53%
HTML 53%
CSS 49.6%
REST 35.9%
Java 25.6%
Webpack 23.9%
Vue.js 23.1%

«Все вакансии» — доля из 117 вакансий. Обновлено 12 августа 2026.

Полный список навыков с частотностью, связками и зарплатной премией — навыки frontend-разработчика →

Roadmap frontend-разработчика: от нуля до junior

Порядок опирается на частотность навыков по данным вакансий. Первые 4–5 этапов — минимум для первого оффера.

  1. 01
    JavaScript и TypeScript 88.9% вакансий

    Синтаксис, ES2020+, async/await, типизация в TypeScript — фундамент для любого фронтенд-стека.

    Подробнее →
  2. 02
    Основной фреймворк 59% вакансий

    React, Vue или Angular — компоненты, управление состоянием (Redux, Pinia, NgRx), роутинг.

    Подробнее →
  3. 03
    HTML, CSS и вёрстка 53% вакансий

    Семантический HTML, CSS Grid/Flexbox, адаптивный дизайн, препроцессоры (Sass/Less).

    Подробнее →
  4. 04
    HTTP и REST API 18.8% вакансий

    Fetch/axios, работа с JSON, авторизация (OAuth/JWT), понимание HTTP-кодов.

    Подробнее →
  5. 05
    Инструментарий и CI/CD 23.9% вакансий

    Webpack/Vite, npm/yarn, линтеры (ESLint, Prettier), Git, базовый CI.

    Подробнее →

Junior-вакансии frontend-разработчика: что реально требуют работодатели

Срез построен на 117 активных вакансий.

Junior-вакансий
19
inc. стажировки
Доля junior
16%
от всего рынка
Senior / Junior+Intern
1.9x
соотношение
Навыков / вакансия
14
медиана
Распределение вакансий по грейдам
Intern — 3.4% (3)
Junior — 18.2% (16)
Middle — 29.5% (26)
Senior — 40.9% (36)
Lead — 8% (7)
Что значат эти цифры. 19 вакансий junior-уровня из 117 — вход доступный. Спрос смещён к опытным, потому что интерфейс дешевле поручить тому, кто сразу видит, где поедет вёрстка и где протечёт состояние. Зато вход есть сбоку: вёрстка лендингов, поддержка старых экранов, студии и агентства — там берут за HTML, CSS и JavaScript без фреймворкового собеседования.

Какие проекты сделать для портфолио

Портфолио frontend-разработчика — не галерея красивых экранов. Работодатель открывает проект и ищет: что происходит при загрузке, при пустом списке, при 403 от сервера, при 400 символах в поле имени и при клавиатуре вместо мыши.

Каталог с фильтрами и адресной строкой
Средняя · 1–2 недели
Стек: React или Vue.js, TypeScript, REST API
GitHub: README с запуском, живая ссылка, скриншоты пустого и ошибочного состояния. Фильтры переживают обновление страницы и кнопку «назад»
Ценность: React — в 59% вакансий: показывает маршруты, состояние и работу с сервером в одном проекте
Форма с валидацией и восстановлением ввода
Средняя · 1 неделя
Стек: TypeScript, Redux, Jest
GitHub: Тесты на неверный ввод, ошибку сервера и повторную отправку. В README — список закрытых состояний
Ценность: Redux — в 21.4% вакансий, Jest — в части. Форма — место, где новичок чаще всего теряет данные пользователя
Пересборка чужого экрана под доступность
Лёгкая–средняя · 1 неделя
Стек: HTML, CSS, Sass
GitHub: Было и стало: семантика, порядок фокуса, контраст, полный проход с клавиатуры
Ценность: Sass — в части вакансий. Доступность редко встречается в портфолио новичка и всегда заметна на ревью
Дашборд с длинным списком
Средняя · 2 недели
Стек: JavaScript, Vite, Webpack
GitHub: Замер до и после: размер бандла, время отрисовки, число лишних перерисовок
Ценность: Vite — в 17.9% вакансий, Webpack — в 23.9%. Производительность — зона старших, и junior с замерами выделяется сразу

Как оформить GitHub и резюме

Профиль GitHub
  • Закреплённые репозитории: 2–4 проекта, у каждого рабочая ссылка. Фронтенд смотрят глазами, а не по исходникам
  • Ссылка на живую страницу в первой строке README: Vercel или Netlify бесплатны, а открыть проект должно быть можно в один клик
  • В README — скриншоты состояний: загрузка, пусто, ошибка. Проверяющий не станет специально ронять твой сервер
  • Читаемая история коммитов и ветки: Git есть в 53% вакансий, GitLab — в части, и на историю смотрят
  • Строгий режим TypeScript и типизированные ответы API видны прямо в коде — они убеждают лучше строчки в списке навыков
  • Отдельный репозиторий с компонентами и их состояниями — если целишься в продуктовую команду с дизайн-системой
Резюме без коммерческого опыта
  • Раздел «Проекты» вместо «Опыт работы»: у фронтенда результат можно открыть, а не только описать
  • По каждому проекту: что за экран, какие состояния закрыл, какой фреймворк и почему именно он
  • Навыки — только рабочие: JavaScript, TypeScript. «Знаком с React» без развёрнутого проекта читается как ноль
  • Не смешивай вёрстку и разработку: если делал только лендинги — так и пиши. Это отдельный вход, а не слабость
  • Java в требованиях фронтенд-вакансий — сигнал корпоративной команды. Целишься туда — упомяни опыт с REST API и чужими контрактами
Слабое резюме

«Изучил HTML, CSS и JavaScript, знаком с React, умею вёрстку по макету»

Сильное резюме

«Собрал каталог на React и TypeScript: маршруты, фильтры в адресной строке, обработка 500 и пустого ответа, 14 тестов на Jest. Бандл сократил с 900 до 320 КБ ленивой загрузкой, экран проверен с клавиатуры. Демо и код: [ссылка]»

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

Самостоятельно
Результат видно в браузере с первого дня; вёрстку и JavaScript можно разбирать на чужих сайтах через инструменты разработчика
Никто не скажет, что твой компонент разрастётся через месяц, — сам ты это увидишь только на третьем проекте
Если готов сам ставить себе задачи и не бросать проект после первого красивого экрана
Курсы с ментором
Ревью кода чужими глазами — то немногое, что реально ускоряет во фронтенде
Дорого; многие программы заканчиваются на React и молчат про доступность, производительность и TypeScript
Если проекты доходят до «работает у меня» и дальше не растут
Вуз / колледж
База по алгоритмам и сетям пригодится в сложных интерфейсах и на собеседованиях в крупные команды
Четыре года; фронтенд в программах либо устарел, либо его нет вовсе
Если выбираешь первое образование и не готов ставить всё на один трек
Ловушка фронтенда: фреймворк вместо базы. React ставится за минуту и создаёт ощущение прогресса, но JavaScript требуют в 88.9% вакансий, а TypeScript — в 75.2%, и это не название библиотеки. Симптом простой: экран сломался, а ты не знаешь, где смотреть — в компоненте, в CSS или в ответе сервера. Это не пробел в React, это пробел в базе.
Курсы · подобрано по данным рынка

Курсы для frontend-разработчика

Сопоставили программы с реальным стеком из 117 вакансий — оценка соответствия рассчитана автоматически, это не реклама.

Все курсы →
Соответствие = доля ключевых навыков вакансий, которые закрывает программа курса. На основе 117 вакансий, обновлено автоматически.

Что спрашивают на собеседовании

JavaScript и браузер
Типовые вопросы
  • ·Всплытие событий и делегирование
  • ·Промисы, асинхронный код, отмена запроса
  • ·Замыкания и контекст вызова
  • ·Что происходит от ввода адреса до первой отрисовки
Как показать проектом

Любой проект: покажи обработку ошибки запроса и повторную попытку

CSS и вёрстка
Типовые вопросы
  • ·Flexbox против Grid: когда что
  • ·Схлопывание отступов и контекст наложения
  • ·Как сделать адаптив без фиксированных высот
  • ·Почему макет поехал только в одном браузере
Как показать проектом

Экран без библиотеки компонентов: покажи сетку, адаптив и поведение при длинном тексте

React или Vue.js
Типовые вопросы
  • ·Состояние компонента против глобального: где граница
  • ·Зачем ключи в списках и что ломается без них
  • ·Почему компонент перерисовывается лишний раз
  • ·Как разложить экран на компоненты и не получить один большой файл
Как показать проектом

Каталог на React: покажи структуру компонентов и объясни, почему граница проходит здесь

TypeScript и контракты
Типовые вопросы
  • ·Зачем типизировать ответ API, если сервер уже вернул JSON
  • ·Разница типов и интерфейсов на практике
  • ·Как типизировать состояние формы с необязательными полями
  • ·Что делать, когда серверная команда поменяла формат ответа
Как показать проектом

Типы ответов API в проекте: покажи, где они живут и кто их обновляет

Производительность и доступность
Типовые вопросы
  • ·Как найти лишние перерисовки
  • ·Что сделать с длинным списком на 5000 строк
  • ·Как проверить экран с клавиатуры
  • ·Зачем семантика, если можно всё собрать на div
Как показать проектом

Дашборд: замеры до и после — размер бандла и время отрисовки

Сколько времени нужно, чтобы стать frontend-разработчиком

Минимум
6–9 мес
Если уже верстал или писал код: остаются JavaScript, TypeScript и один фреймворк с настоящим проектом
Медиана
12–18 мес
С нуля, 2–4 часа в день: разметка, CSS, JavaScript, TypeScript, фреймворк и 3–4 доведённых экрана
Реалистично
18–24 мес
При совмещении с работой и без ревью со стороны: дольше всего добираешься до состояний и ошибок

Почему «вёрстка за 3 месяца» — правда, а «фронтенд за 3 месяца» — нет. Статичную страницу собирают за месяц. Дальше начинается то, за что платят: состояние, API, ошибки, типы, сборка, тесты, чужой код. Между «страница выглядит как макет» и «экран не падает у пользователя» — примерно год.

Скорость решают три вещи: пишешь ли ты код каждый день, показываешь ли его кому-то на ревью и доводишь ли проекты до работающей ссылки. Четвёртый учебный туториал не двигает ни один из трёх.

Ошибки новичков

Учат React раньше JavaScript

Почему мешает: Компонент падает — и непонятно, дело в библиотеке, в асинхронном коде или в типах. Отладка превращается в перебор

Как исправить: JavaScript до фреймворка: события, промисы, ошибки, DOM. React ложится сверху за пару недель

Портфолио из красивых статичных страниц

Почему мешает: Такой экран не отвечает на вопрос «что будет, если сервер вернёт ошибку» — а спрашивают именно это

Как исправить: В каждый проект: загрузка, пустой список, ошибка сервера, повторная отправка

Игнорируют TypeScript

Почему мешает: TypeScript в 75.2% вакансий — почти вровень с самим JavaScript. Без него отсеивают на первом фильтре

Как исправить: Переведи один готовый проект целиком: свойства компонентов, ответы API, состояние формы

Проверяют только в своём браузере на своём ноутбуке

Почему мешает: Кроссбраузерность и адаптив — базовое требование роли, и ломается это ровно там, куда ты не смотрел

Как исправить: Открывай каждый проект на телефоне и во втором браузере до того, как назовёшь его готовым

Учат Vue.js и React одновременно

Почему мешает: Оба остаются на уровне туториала, а на собеседовании спросят про границы состояния в одном

Как исправить: React — 59% вакансий, Vue.js — 23.1%. Возьми один и доведи до проекта с маршрутами и API

Считают доступность необязательной

Почему мешает: Клавиатура, фокус и семантика — часть требований роли, а не благотворительность. Сильный интервьюер проверяет это первым

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

Пропускают Git и сборку

Почему мешает: Git — 53% вакансий, Vite и Webpack — 17.9% и 23.9%. Без них ты не запустишь чужой проект в первый рабочий день

Как исправить: Собери проект руками: конфиг сборки, ветки, ревью, история коммитов без «fix2»

Не показывают живую ссылку

Почему мешает: Фронтенд оценивают, открыв, а не прочитав. Код без демо смотрят единицы

Как исправить: Деплой на Vercel или Netlify бесплатный, а ссылка идёт в первую строку резюме

Как SkillStat считает данные

Источник: 117 вакансий в московском сегменте. Навыки и грейды извлекаются автоматически из текста каждой вакансии.

Грейды: определяются по требованиям вакансии — уровню опыта, упоминанию «junior», «intern», «стажёр». Это рыночная оценка объявления.

Сложность входа: рассчитывается по доле junior-вакансий и медиане навыков на junior-уровне. Это индикатор, а не гарантия.

Обновление: данные пересчитываются регулярно. Текущий срез — 12 августа 2026.

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

Можно ли стать frontend-разработчиком с нуля?
Да. 19 вакансий из 117 — уровня junior или стажёр, вход доступный. Смотрят не на диплом, а на работающие экраны: JavaScript, TypeScript, React и 2–3 проекта, которые можно открыть по ссылке.
Что нужно знать, чтобы стать frontend-разработчиком?
Для первого отклика достаточно базового стека. По данным 117 вакансий: JavaScript (88.9%), TypeScript (75.2%), React (59%), Git (53%), HTML (53%). Полная частотность — на странице навыков.
С чего начать путь frontend-разработчика?
С порядка JavaScript → TypeScript → React → Git. Каждый шаг доводи до экрана, который работает в браузере, а не до конспекта.
Чем фронтенд-разработчик отличается от верстальщика?
Верстальщик превращает макет в страницу: разметка, CSS, адаптив. Фронтенд-разработчик отвечает ещё и за поведение: состояние, маршруты, запросы к API, ошибки сервера, типы и тесты. Вёрстка — законный вход в профессию с меньшим порогом, но потолок там ниже.
React или Vue.js — что учить?
По срезу: React — 59% вакансий (69 из 117), Vue.js — 23.1% (27). React открывает больше дверей, Vue.js быстрее осваивается и держится в командах, которые его уже выбрали. Учить надо один — второй потом читается за неделю.
Почему в вакансиях фронтенда так часто Java?
Java встречается в 25.6% вакансий frontend-разработчика — 30 из 117. Это не требование писать на Java: так выглядят корпоративные команды, где интерфейс живёт рядом с Java-сервером, плюс часть попаданий — шум нормализации между Java и JavaScript. Читай текст вакансии, а не список тегов.
Нужен ли TypeScript junior-фронтендеру?
Да. TypeScript — в 75.2% вакансий (88), почти вровень с JavaScript (88.9%). Минимум: типизировать свойства компонентов, ответы API и состояние формы.
Нужен ли Docker фронтенд-разработчику?
На входе — нет. Docker есть в 21.4% вакансий, CI/CD — в 22.2%, но это про то, как команда собирает и катит проект. Достаточно уметь запустить проект в контейнере и понимать, что происходит на сборке.
Нужно ли фронтендеру знать серверную часть?
Писать серверный код — нет. Понимать контракт — обязательно: REST API есть в 18.8% вакансий, REST как термин — в 35.9%, Node.js — в 18.8%. Нужно читать JSON, различать 4xx и 5xx, договариваться о формате ответа и объяснять пользователю, что пошло не так.
Нужны ли алгоритмы на собеседовании?
В большинстве фронтенд-команд спрашивают не сортировки, а браузер: события, промисы, перерисовки, CSS-раскладку и структуру компонентов. Алгоритмические секции встречаются в крупных корпорациях — целишься туда, готовь их отдельно, но не вместо базы.
Сколько проектов нужно в портфолио?
Три-четыре доведённых экрана лучше десяти учебных. В каждом: JavaScript, TypeScript, React, работа с API, состояния загрузки и ошибки, живая ссылка. Клон популярного сервиса без своей логики читается как туториал.
Нужно ли уметь рисовать макеты?
Рисовать не нужно, читать макет — нужно. Фронтенд получает готовый дизайн и отвечает за то, чтобы он выжил при длинном тексте, узком экране и пустых данных. Умение спорить с дизайнером про состояния — рабочий навык, а не конфликт.
Что писать в резюме без коммерческого опыта?
Проекты как опыт: что за экран, какой фреймворк, какие состояния закрыл, ссылка на демо и код. Инструменты — только рабочие: JavaScript, TypeScript.
Когда начинать откликаться на вакансии?
Когда есть два проекта с API и обработкой ошибок, ты можешь объяснить их устройство и открыть с телефона. Прямо сейчас на junior — 19 вакансий из 117. Ждать «пока выучу ещё одну библиотеку» бессмысленно: их прибавляется быстрее, чем ты учишь.
Сколько зарабатывает начинающий Фронтенд-разработчик?
Ориентир для junior — 83 250–120 250 ₽ при медиане рынка 185 000 ₽. Разбивка по грейдам — на странице зарплат frontend-разработчика.
Где посмотреть навыки frontend-разработчика?
На странице навыков — частотность по 117 вакансий, разбивка по грейдам и связки технологий.