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

Frontend с нуля проигрывает не из-за HTML. Он проигрывает, когда вместо одного кабинета заказов человек год коллекционирует курсы и «ещё один фреймворк». Рекрутер открывает GitHub и видит пять лендингов без состояния. Ему нужно другое: форма, список, ошибка, адаптив, который не разъезжается, и умение объяснить, почему так.

Этот материал — про вход во frontend в 2026: какой минимум стека, какой один проект вместо десяти, как собрать резюме и куда откликаться. Без обещания оффера за квартал и без зарплатных медиан. Вилку смотрите по живым фильтрам в вакансиях frontend.

Коротко:

• Порядок: HTML/CSS, затем JavaScript, затем один фреймворк. React чаще встречается, Vue и Angular — если под них уже есть слоты, на которые пойдёте.
• Один кабинет с фильтрами, формой и состояниями сильнее портфолио из лендингов.
• TypeScript подключайте, когда JS уже не путает вас на собеседовании, а не «с первого дня, потому что так модно».
• В резюме — ссылка на демо и репозиторий, стек по факту проекта, честный список того, чего нет.
• Junior+remote узкий. Смотрите intern, верстальщика с JS, «frontend developer» без слова middle.

Что делает frontend на первой работе

Первый месяц — не «придумать дизайн-систему». Это верстка кабинета по макету, формы, валидация, запросы к уже существующему API, правки после QA, не сломать соседнюю страницу. Если вам интересны только анимации и не интересны состояния загрузки и ошибки — роль будет раздражать.

Frontend в продукте часто живёт в одном интерфейсе долго: кабинет, лендинг, админка. В аутсорсе чаще прыжки между макетами клиентов. На входе это не выбор «кто круче», это выбор, готовы ли вы читать чужой CSS и не переписывать его с нуля в первый спринт.

Не путайте роль с «умею Figma». Макет читать нужно. Рисовать с нуля — нет, если вы не идёте в дизайн. Не путайте и с fullstack: если API пишете вы же, это уже другая история — как стать fullstack без распыления. Чистый backend — путь backend.

С нуля, из вёрстки, из другой IT-роли

С нуля путь длиннее, чем обещают лендинги курсов. Реалистичный горизонт при 10–15 часах в неделю — полгода до вменяемого кабинета, не «оффер через 90 дней». Если можете 30 часов — быстрее, но только если часы идут в один проект, а не в пять интенсивов.

Если вы уже верстаете лендинги, ваш ход — добавить состояние: логин, список, фильтры, ошибка сети. Именно это отличает frontend-разработчика от верстальщика в глазах вакансии 2026. Если вы QA или поддержка — переведите опыт: вы уже видели, где интерфейс врёт пользователю. Соберите кабинет, который эти грабли закрывает, и ссылайтесь на это в письме.

Без артефакта не спасает ни сопроводительное, ни «очень хочу». Сначала работа, которую можно открыть. Как упаковать отсутствие трудовой: резюме без опыта и поиск работы без опыта.

Стек: что обязательно, что можно не трогать год

Откройте junior-вакансии и выпишите повторяющееся. Каркас, который чаще всего достаточен для первой роли:

• HTML и доступность на базовом уровне. Формы, кнопки, заголовки, не div вместо всего.
• CSS. Flex/Grid, адаптив, состояния. Не обязательно Tailwind в первый месяц, но если вакансии сплошь на утилитах — подключите в проекте.
• JavaScript. DOM, fetch, промисы, отмена запроса хотя бы на уровне «понимаю, зачем abort». Без этого фреймворк — декорация.
• Git. Ветка, осмысленный коммит, PR-описание.
• Один фреймворк. Чаще React. Карта: React roadmap. Vue/Angular — если вы целенаправленно идёте в команды с этим стеком.
• TypeScript. Когда JS уже пишете сами. Roadmap: TypeScript roadmap.

Можно отложить: Next.js как религия, микрофронты, GraphQL, анимационные библиотеки пачками, «свой UI-kit на 40 компонентов». Next имеет смысл, когда кабинет уже живёт и вакансии его просят — см. Next.js roadmap. Навыки по грейдам: что должен знать frontend.

90 дней: один кабинет вместо десяти курсов

1. Дни 1–20. HTML/CSS: две страницы кабинета без фреймворка. Список, карточка, форма. Адаптив до узкой ширины телефона. Если сетка разъезжается — не переходите к React.
2. Дни 21–45. JavaScript: те же страницы с данными из mock API или json-server. Фильтры, валидация, сообщение об ошибке, состояние загрузки.
3. Дни 46–70. Перенос на React (или выбранный фреймворк). Маршруты, форма, список. TypeScript — если JS уже не путает. README: как запустить, что сделано, чего нет.
4. Дни 71–90. Демо (GitHub Pages, аналог, любой стабильный хостинг), резюме, 15 точечных откликов, разбор тестовых.

Критерий готовности не «закончил модуль». Критерий: вы открываете демо, проходите сценарий «залогиниться → отфильтровать → отправить форму → увидеть ошибку валидации», и можете объяснить код без чтения Stack Overflow вслух. Если работаете полный день — растяните план, не выкидывайте этапы.

Пример 1. Учебный кабинет заказов

Вакансия: junior frontend, React, работа с макетами, Git, коммерческий опыт не обязателен.

Кабинет заказов. Список с фильтром по статусу, карточка заказа, форма создания, сообщения об ошибке и пустом списке. Авторизация учебная: мок, не прод-OAuth. Стек: React, TypeScript, CSS-модули, React Router. Демо и репозиторий в шапке README.

Сделано мной: состояния загрузки, валидация, адаптив, обработка 401 с редиректом на логин. Не сделано: реальные платежи, SSR, свои компоненты-дизайн-система, тесты. Это написано в README, чтобы не притворяться интернет-магазином.

Рекрутер за две минуты понимает уровень. «Интернет-магазин на миллион строк» без демо и с README из двух слов работает хуже. Честный объём — это сигнал, что на созвоне вы не развалитесь.

Пример 2. Сопроводительное на junior frontend

Вакансия: вёрстка кабинетов, React, макеты, Git.

Откликаюсь на junior frontend с React.

По вакансии в первый месяц нужно собирать экраны кабинета по макету и не ломать состояния форм. Собрал учебный кабинет заказов: список, фильтры, форма, обработка ошибок. Стек: React, TypeScript. Демо и код: [ссылки]. В README указал, чего нет: авторизация настоящая и тесты.

Коммерческих проектов в команде не было. На созвоне могу разобрать компонент формы. Готов к тестовому 2–4 часа в том же формате, что в объявлении.

Каркас письма без воды: письмо без опыта. Короткая версия в поле комментария — там же по формуле «роль + факт + ссылка + следующий шаг».

Резюме и портфолио: ссылки, которые открывают

В шапке: роль Junior frontend, город/удалёнка как есть, ссылка на демо, ссылка на репозиторий. Не пять соцсетей. В блоке проекта — задача, что сделали вы, стек, ограничение. Не «адаптивная вёрстка» как единственная пуля.

Не кладите в skills то, чем пользовались один вечер. Next, Redux, GraphQL без следа в репозитории на собеседовании становятся ловушкой. Полный разбор: резюме frontend-разработчика, типичные дыры — ошибки в резюме. Перед массовой рассылкой прогоните файл в разборе CV.

Макет в портфолио лучше один, доведённый, чем галерея. Если демо падает — вы сами закрыли воронку. Проверяйте ссылку с телефона и в инкогнито.

Куда откликаться и чего избегать

Ищите формулировки junior frontend, intern, trainee, sometimes «верстальщик» с JS в описании. Читайте задачи. Если ждут сразу middle-архитектуру, дизайн-систему и менторство джунов — это не ваш слот. Каталог: вакансии frontend, плюс junior-слоты вообще.

Удалёнка без опыта бывает, но реже офиса и гибрида. Не отфильтровывайте все города заранее, если вам важна первая роль, а не формат. Про remote-вход: как найти удалённую работу.

Тестовое на выходные в объёме «сделайте клон сервиса» — красный флаг. Короткое тестовое по брифу — норма. Мошеннические «оплатите доступ к практике» отсекайте сразу: проверка вакансии.

Зарплату не выдумывайте. Соберите вилку по фильтрам роли, грейда и формата в каталоге и на скрининге называйте коридор. Как отвечать: ожидания по зарплате.

Собеседование frontend: блоки, а не весь интернет

Готовьте по вакансии: JS (замыкания, this, промисы — в том объёме, который светится в описании), CSS (специфичность, flex), фреймворк (состояние, ключи в списках, когда memo не нужен), живой код небольшой формы. Не учите «все вопросы с GitHub-списков» вместо разбора своего кабинета.

Живой код часто проще, чем кажется: собрать список и форму, не написать идеальный алгоритм. Думайте вслух, спрашивайте про край. Поведенческий блок тот же, что везде: конфликт в команде, ошибка на проде учебного проекта, как принимали фидбек. Разбор блоков: что спрашивают на собеседовании frontend и общий контур вопросов на собеседовании.

Типичные ошибки входа, которые сжигают месяцы

Первая: новый курс каждый раз, когда в кабинете появляется трудность. Трудность — это и есть работа. Вторая: портфолио из лендингов агентства шаблонов. Их видно сразу, и разговаривать не о чем. Третья: десять библиотек в skills и один репозиторий с create-react-app по умолчанию. Четвёртая: отклик на middle, потому что junior «мало платят» — вилку вы всё равно не знаете, пока не собрали её по фильтрам каталога.

Пятая ошибка — бесконечный перфекционизм дизайна. Учебный кабинет может быть визуально скромным. Состояния, адаптив и честный README важнее теней. Шестая — демо, которое открывается только у вас локально. Проверьте ссылку с телефона и из инкогнито в день отклика. Седьмая — сопроводительное про «динамично развивающуюся команду» без названия роли. Восьмая — молчание после тестового: короткое «отправил, вот ссылка, готов ответить на вопросы» нормально, третье сообщение через день — нет.

Если две недели откликов без ответа, не меняйте фреймворк. Снимите скрин своего демо глазами рекрутера: понятно ли за 30 секунд, что это кабинет, а не лендинг? Есть ли в README запуск и ограничения? Совпадает ли заголовок резюме с вакансией? Этот разбор дешевле нового интенсива. Как упаковать файл целиком: как составить резюме.

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

Что сделать сейчас

Откройте пять frontend-вакансий уровня junior. Выпишите стек и первую задачу месяца. Сегодня начните одну страницу кабинета без фреймворка: список и форма. Не новый курс.

Когда появится демо, соберите резюме вокруг него и одно короткое письмо. Проверьте файл в разборе резюме, откликнитесь точечно. Если через две недели тишина — чините кабинет и README, а не добавляйте третий фреймворк.