💸 Как стать фронтенд разработчиком в 2025 году
Это пятая часть по вкату во фронтенд.
Если еще не читал предыдущую — лучше будет начать с нее → тык.
Там мы поговорим, как важно подготовить свою жизнь под учёбу
В этом роадмапе я расскажу, как пройти путь от первых шагов в профессии до лидерских позиций.
Если ты новичок — завидую, такой гайд сэкономил бы мне месяцы, а то и годы.
А если уже в профессии — переосмыслишь свой путь и, возможно, вдохновишься на новые свершения.
→ кто вообще такой фронтендер и чем он занимается?
Фронтенд в 2025 — это не:
— Вёрстка лендингов
— Фриланс на дядю Васю
— Колупание в вордпрессе и прочих конструкторах сайтов
B 2025 фронтенд-разработка — это создание веб-приложений на JavaScript, а точнее на его фреймворках.
Хотя вёрстка отошла на второй план, это не значит, что изучать её не обязательно — браузеры все так же понимают только HTML, CSS и JavaScript.
Фронтендер делает всё то, что видит пользователь на сайте или в приложении.
Он верстает страницы, добавляет интерактив (кнопки, формы, слайдеры), подключает данные с сервера и следит, чтобы всё выглядело красиво и работало быстро.
Короче говоря, превращает макет от дизайнера в рабочий интерактивный сайт.
→ как будем учиться
Предлагаю тебе учиться меркантильно.
Это значит, что мы сначала изучаем только те технологии, которые приведут нас к первой работе.
Позволят нам пройти собеседование и базово выполнять рабочие задачи.
Всё остальное мы доучиваем уже работая программистом.
Большинство существующих роадмапов этим мне и не нравятся: туда пихают все и сразу.
Если следовать типичному роадмапу, будешь учиться втрое дольше, чем надо для вката, и половина ещё потом окажется не нужна.
→ сколько нужно денег
Я постарался собрать роадмап преимущественно из бесплатных материалов.
Возможно, в паре мест придётся заплатить около косаря, но это действительно того стоит.
Если нормально относишься к пиратству, то можешь купить подписку на coursehunter.
→ поддержка во время обучения
СhatGpt. Советую тебе начать использовать ИИ, как только ты изучил основы. Тебе он будет особенно полезен, если ты обучаешься самостоятельно без помощи друга или ментора. Только не проси его писать код за тебя, обращайся только в случаях когда реально застрял и не знаешь как подступиться к проблеме.
сообщества. Обучение будет намного эффективней, если вокруг тебя будут такие же заряженные ребята. Но где их получить, если у тебя нет такого окружения? Тут могут помочь сообщества, например ОМ, где есть чаты по всем направлениям, в то числе и фронтенду. Сможешь задавать вопросы, общаться с ребятами из профессии и всё такое.
→ предисловие закончилось, а теперь перейдём к роадмапу и посмотрим, что нам предстоит изучить
Итак, ты начинаешь на этом уровне.
Глава 1. HTML и CSS
Период, когда узнаёшь, что такое фронтенд и делаешь первые шаги.
что нам нужно изучить на этом этапе
— HTML и CSS
— Git и GitHub
— Терминал
— Figma
— Редактор кода VSCode или WebStorm
— npm
результат
Можешь сверстать простенькую страничку, ознакомился со средой разработки, понял флоу работы программиста
сколько нужно времени
На всё про все от двух месяцев
обучение
Первое, что нам нужно сделать — это изучить HTML и CSS. Два кита во фронтенде, которые позволят тебе делать простенькие сайты без интерактива.
С помощью HTML мы строим наш сайт как конструктор лего, но все эти детальки одинаковые, некрасивые, бесцветные. Тут нам уже нужен CSS.
CSS отвечает за то, как элемент выглядит, какого цвета, какого размера, есть ли тень или нет и всё такое — возможностей много.
Обычно, у новичков не возникает трудностей с этими технологиями, всё достаточно просто и понятно, плюс ко всему ещё и весело.
Всё это мы изучаем на HTML Academy. Там есть тренажёры. Если ты понимаешь, что тебе интересно в этом разбираться — смело покупай подписку. Она откроет все уроки на сайте.
Этого сайта нам вполне хватит, чтобы освоить все тонкости этих двух технологий.
За это время ты: изучишь все базовые теги, без проблем сможешь сделать красивую кнопку или ссылку, научишься делать удобные формы, поймёшь какие свойства CSS за что отвечают.
Собственно, после того, как мы прошли всю академию, нам нужно попробовать сверстать первый полноценный макет. Структурировать все полученные знания.
У HTML Academy есть интенсивы.
Тебе нужны «Профессиональная вёрстка сайтов» и «Адаптивная вёрстка и автоматизация». Ищи в интернете.
Лучше материалов по этой теме нет.
На этом интенсиве тебе научат пользоваться всем тем, что я указал выше.
В результате у тебя будет 3-4 готовых полноценных сайта, которые можно будет потыкать в браузере и показать корешам.
Если хочешь учиться на бесплатных материалах и не пиратить, то ниже подобрал хорошие альтернативы.
Верстка сайтов (мастер-классы)
Неплохие игры для подробного изучения CSS Flexbox и CSS Grid:
Терминал - Топ команд, настройки, плагины, хаки (2024)
Основы Git и GitHub. Курс для начинающих. Установка, настройка, основные команды. Git в WebStorm
NPM для начинающих. Полный гайд: установка, команды, флаги, разбор package.json, версионирование
WebStorm настройки для быстрой и удобной работы • Плагины • Git GUI • Шаблоны и сниппеты • Обзор IDE
БЭМ методология за 10 минут | Основы для начинающих
на самом деле его сейчас практически не встретить, про это поговорим в разделе с фреймворками, но желательно все же знать
дополнительные материалы по теме
Если тебе нужно подробнее прочитать про какой-нибудь тег или свойство CSS — лучше сразу иди в doka.guide. Вообще, этот сайт должен стать твоим помощником вплоть до конца обучения.
Когда есть свободное время и ты где-нибудь в дороге, лучше всего начать смотреть доклады. Ниже список, который считаю важным к просмотру:
Фронтенд для новичка. Куда идти и что делать?
Ещё больше ищи на каналах @webstandards_ru, @FrontendChannel и @YandexforFrontend.
Если нравятся подкасты, можешь на фоне слушать Веб Стандарты.
Как придумывать понятные CSS классы
https://github.com/yoksel/common-words
https://github.com/nicothin/idiomatic-pre-CSS/blob/gh-pages/words_and_abbreviations.md
https://www.conventionalcommits.org/ru/v1.0.0/
Переломным моментом становится осознание того, что фронтенд — это профессия, которая тебе интересна.
Если справился — поздравляю с первой ачивкой:
Если бы сейчас был 2015 — можно было пойти искать работу верстальщиком, но увы, учимся дальше.
Глава 2. JavaScript
Период, когда учишься программировать.
что нам нужно изучить на этом этапе
результат
Способен писать простейшую логику, не путаешься в методах массивов и объектов, понимаешь как работает JavaScript в браузере
сколько нужно времени
обучение
Мир вёрстки был довольно дружелюбным и понятным. Мир JS — это особый мир особого программирования, где любая задача может иметь десятки решений, где существуют сотни и тысячи инструментов, библиотек и подводных камней. Добро пожаловать в ад.
Лучший учебник на JavaScript на русском языке — Кантор.
Кантора нужно разнообразить видосами и другими сайтами. Одна и та же вещь, объяснённая много раз разными словами, становится понятнее.
Pet-projects. Какие проекты делать начинающему фронтенд разработчику
дополнительные материалы по теме
Для тренировки алгоритмического мышления можешь решать задачки на CodeWars (7-8 kyu) или на LeetCode.
https://github.com/ryanmcdermott/clean-code-javascript
Не очень люблю книжки по технологиям, потому что они быстро устаревают, но эти стоят твоего внимания. Их не обязательно читать, но опять же, если часто в дорогах и не знаешь чем заняться — можно провести время с пользой. А так, в принципе, можешь отложить. Прочитаешь, когда уже устроишься.
Книга “Идеальный программист. Как стать профессионалом разработки ПО” (Роберт Мартин)
Книга “Чистый код. Создание, анализ и рефакторинг” (Роберт Мартин)
Книга “Чистая архитектура. Искусство разработки программного обеспечения” (Роберт Мартин)
Грокаем алгоритмы. 2-е изд. | Бхаргава Адитья
Если справился — поздравляю со второй ачивкой:
Глава 3. Фреймворки
Период, когда делаешь реальный фронтенд.
что нам нужно изучить на этом этапе
— React.js или Vue.js
— TypeScript
результат
Понимаешь как создаются современные фронтенд приложения, изучил ещё один язык программирования TypeScript
сколько нужно времени
обучение
Пришло время преодолеть разрыв между лёгкими и приятными учебными заданиями и суровой практикой с которой вам предстоит столкнуться на работе.
Первое и единственное решение, которое нужно принять: на какой фреймворк садиться. На текущий момент на выбор 2 стула:
Первый стул — React
Плюсы:
— Высокий спрос на рынке. Вакансий с React больше, чем с любыми другими фреймворками.
— Ориентированность на JavaScript. Работая с React, ты неизбежно глубже понимаете сам язык.
— Огромное количество обучающих материалов. Курсы, статьи, видео — на любой вкус и уровень.
— Сильное сообщество. Активное коммьюнити, где можно быстро получить помощь и обменяться опытом.
Минусы:
— Много ручной работы. React это библиотека, а не фреймворк. Почти всё нужно подключать самому. Вариантов огромное количество. Каждый проект сделан на своих костылях.
— React развивается под нужды Vercel. Поэтому не стоит удивляться, если через полгода придётся серьёзно переписать проект.
— Не оптимален технически. Код в React слишком низкопрофильный. Чтобы получать производительный фронтенд, нужно прикладывать больше усилий.
Второй стул — Vue 3
Плюсы:
— Полноценный набор инструментов из коробки. В отличие от React, не нужно выбирать роутер или стейт-менеджер — есть стандарты.
— Максимальная простота и интуитивность. Легко понять даже новичкам: шаблоны напоминают HTML, реактивность прозрачна, а структура проекта логична.
— Команда. Разработчики Vue сейчас поддерживают всю экосистему фронтенда — Vite, Vitest
Минусы:
— Доедает за React. Все модные фичи сначала появляются в React, только потом переезжают во Vue.
— Меньше вакансий. Работы действительно меньше, но не потому, что Vue хуже как фреймворк, просто React появился на рынке на несколько лет раньше
Я пишу на Vue.js, поэтому роадмап дальше будет по этому фреймворку.
Роадмап по React.js допишу чуть позже.
Лучше всего начать с самой документации Vue.js. Чёткая, дружелюбная, с примерами и объяснениями без «воды» — одна из лучших среди фреймворков.
Из бесплатных курсов можно глянуть такой
Vue 3 для начинающих / Разработка интернет-магазина Vue Sneakers
После понимания фреймворка нам нужно изучить как делать многостраничные SPA приложения с помощью Vue Router.
И как хранить состояние приложение в одном месте с помощью Pinia.
Для изучения всего этого тебе нужно сделать всего один проект — Кинопоиск.
Он затрагивает все-все аспекты современного фронтенд приложения.
После его реализации у тебя не останется вопросов как правильно реализовывать что-то на реальной работе.
Пожалуй, самый популярный и полезный язык программирования, расширяющий возможности ванильного JavaScript.
Пару лет назад стал стандартом разработки и все новые проекты стартуют на нём, поэтому учить обязательно.
Благо, учить нужно всего немного. Глубокие темы нам не нужны, важно лишь понимать как писать типы и интерфейсы на свой код, что такое дженерики.
Тут мне нравится вот такой учебник.
дополнительные материалы
Если справился — поздравляю с третьей ачивкой:
Глава 4. Экосистема
Период, когда разбираемся со своими инструментами
что нам нужно изучить на этом этапе
— ESLint
— Prettier
— Stylelint
— Vite
— husky
— lint-staged
— CI/CD
результат
Понимаешь инструменты с которыми работаешь
сколько нужно времени
обучение
На самом деле для работы не обязательно знать как собирается фронтенд приложение, как работают линтеры. Когда ты придёшь в команду, там это уже всё настроено.
Все фреймворки дают свою CLI, которая сделает шаблон проекта.
Однако, может наступить такой момент, когда тебе нужно будет развернуть проект с нуля или внести доработки в существующие конфиги.
В крупных компаниях для этого выделяют отдельную команду, так называемую FrontOps, но в мелких всё будет зависеть от тебя.
Можешь просто просмотреть курсики, почитать доку, чтобы было понимание.
Vite — лучший сборщик для фронтенда в 2025: почему его выбирают все
Курс по ESLint, Prettier и Stylelint
Линтеры и форматтеры в фронтенде: ESLint, Stylelint и Prettier без боли
Автоматизируем форматирование и проверку линтера на пре-коммит
дополнительные материалы
Если справился — поздравляю с четвёртой ачивкой:
Глава 5. Выходим в мир
Период, где начинаем искать работу.
что нам нужно изучить на этом этапе
— как сделать продающее резюме
— как искать работу
— как выглядит собеседование
— как подготовиться к собеседованию
результат
сколько нужно времени
Пару недель на подготовку, от дня и до бесконечности на поиск первой работы
обучение
ВНУТРЯНКА АЙТИ: Как здесь все проебываются на самом деле
ГАЙД НА СОФТЫ: Как чесать языком на собесе, чтобы дойти до оффера
Как сделать идеальное резюме и сопроводительное письмо
Как успешно пройти испытательный срок в IT | «Ультимативный гайд»
Как пройти собеседование на программиста | Ультимативный гайд
САМОПРЕЗЕНТАЦИЯ: Как продавать свой опыт лучше других
СПАСАЮ РЕЗЮМЕ ПОДПИСЧИКОВ: Как написать резюме, чтобы вас не игнорили
ПРОДАЙ СЕБЯ, ЕСЛИ СМОЖЕШЬ: Как не пролететь мимо оффера
Как накрутить опыт в резюме | «Ультимативный гайд»
ЛЕГЕНДА: Откуда взять опыт, чтобы попасть на собес
Рекомендую смотреть контент с мок собесами или записи реальных собеседований.
Можешь начать с моего плейлиста:
дополнительные материалы
Шпаргалка по прохождению лайвкодинга
Если справился — поздравляю с пятой ачивкой:
Не важно с какой попытки, но тебя заметили — теперь ты гордо носишь звание фронтендера. Важно не вылететь с испытательного срока.
Со временем ты становишься самостоятельнее: глубже вникаешь в ремесло, работа даётся тебе быстрее, чаще общаешься с руководителями и разработчиками.
Учишься обосновывать и отстаивать свои решения. Также тренируешься лучше и дороже продавать себя. Если ты горишь профессией, учишься у старших коллег и рвёшься вперёд — долго на этом уровне не задержишься.
Глава 5. Продвинутый фронтенд
🔒 роадмап в разработке, подпишись на тг, чтобы ничего не пропустить
Я решил сделать свое менторство публичным. Если раньше, ко мне можно было прийти только по знакомству или в личку, то теперь я решил масштабироваться.
Если ты тоже хочешь прокачать свои скиллы во фронтенде и выйти на новый уровень дохода — приходи на моё менторство по фронтенду.
Расскажи о себе и своих целях или проблемах. Если у нас мэтч, мы покорим любого нанимающего 🫰
🥷🏻 • телеграм канал • ютуб • задать вопрос