Представьте, что вы зашли в ТГ. Все эти кнопки, меню, переписки, поля для ввода — всё, с чем вы взаимодействуете, это и есть фронтенд. Такая штука в вашем телефоне называется приложением. На компьютере — это веб-приложение. Задача фронтенд-разработчика — создать его интерфейс.
Фронтендер не просто «рисует» кнопки, а программируем их логику. Чтобы сообщение не просто появлялось в поле, а отправлялось и мгновенно доставлялось собеседнику. Обычно в проекте есть два основных «лагеря»: фронтенд (то, что видит пользователь) и бэкенд (то, что работает на сервере). Фронтенд-разработчик, неважно, пишет ли он под веб, телефон или даже для умного холодильника, делает так, чтобы у вас был удобный способ «общаться» с бэкендом. Ведь вы же не отправляете HTTP-запросы вручную, чтобы загрузить фото? Всё делается через интерфейс.
А теперь — как это выглядит изнутри, на проекте. Есть такая штука — Jira. Это такая продвинутая система для задач. Представьте себе доску со столбцами: «В плане», «В работе», «На проверке», «Готово». Задача — это карточка. Ты берёшь её из «В плане», перетаскиваешь в «В работе», а по завершении — в «На проверке».
Откуда задачи берутся? Их создают бизнес-аналитики и разработчики. Если бизнес хочет, скажем, «сделать стул», аналитик подробно расписывает, как этот стул должен выглядеть и работать. Все эти задачи складываются в бэклог — большое хранилище идей и планов. Периодически команда проводит груминг — встреча, на которой решают, какие задачи из бэклога готовы к работе. Задачи часто объединяют в Эпики — это большие темы. Например, эпик «Система заказов» может включать в себя десятки задач для дизайнеров, фронтенда и бэкенда.
Допустим, мне нужно «Сделать страницу просмотра заказа». В задаче обычно есть две ключевые ссылки: на дизайн в Figma (где всё показано с точностью до пикселя) и на техническое задание в Confluence (где расписана логика). Сначала я внимательно изучаю дизайн: как страница выглядит при разных состояниях (заказ оформлен, отменен, доставляется). Если что-то непонятно, иду в документацию. Если и там нет ответа — пишу аналитику или тимлиду. Я проверяю, готовы ли на сервере все нужные для страницы данные. Бывает, что бэкенд ещё не доделал свой кусок. Тогда я ставлю его в известность и временно переключаюсь на другую задачу. Когда всё готово, открываю редактор кода и терминал. Первым делом обновляю основную ветку develop (команда git pull), чтобы работать с самой свежей версией проекта. Затем создаю новую ветку для своей фичи (git checkout -b feat/order-view-page). Написал код — сохраняю изменения (коммит) с понятным сообщением, например, «feat: add order view page».
Проверка кода (Code Review). Я загружаю код в общий репозиторий (у нас GitLab) и создаю Merge Request (MR) — запрос на добавление моего кода в develop. В Jira я перемещаю задачу в «В ревью». Коллеги смотрят мой код, оставляют комментарии. Мы обсуждаем, я вношу правки. После одобрения (апрува) код вливается в основную ветку. Потом наступает очередь тестировщиков. Они ищут баги. Если находят — создают новую задачу, и я её исправляю. Готовый код по цепочке выкатывается на тестовые серверы через пайплайн — автоматизированный процесс сборки и развертывания. Если пайплайн «падает», мы ищем причину и чиним.
Какой-то короткий roadmap можно найти в программе нашего курса фронтенд. Сейчас опишем подробней в общих чертах.
1. Как работает Веб. Прежде чем начать разрабатывать сайты, необходимо представление о том, что происходит при открытии сайта в браузере, как работает клиент-серверная модель и что такое HTTP-протокол. Подойдет любая короткая серия статей.
2. Среда разработки. Писать код и разметку можно даже в блокноте, но удобнее использовать специальные редакторы. Наиболее популярные среди фронтендеров:
VSCode — бесплатный быстрый редактор с большим количеством дополнений для разработки;
JetBrains WebStorm — полноценная IDE, есть пробный период и возможность получить доступ по студенческой лицензии;
Если у вас возникает потребность отправить другому человеку фрагмент кода, быстро проверить или сохранить код в сети, можно воспользоваться онлайн-редактором, например, Codepen.
3. Основы HTML. Изучаем структуру HTML-документа, что такое теги и какие они есть, мета-теги, атрибуты, как добавлять изображения, создавать формы. Важными моментами в верстке является семантика и доступность. Подойдет любое руководство или справочник.
4. CSS. Добавление стилей для элементов страницы. Изучаем блочную модель, позиционирование, каскадирование стилей, специфичность селекторов, псевдоэлементы, адаптивную верстку (для компьютеров, планшетов и телефонов). Учимся верстать современные макеты с помощью Flexbox и Grid. Аналогично подойдет любое руководство или справочник.
5. Система контроля версий Git. Поможет вам выйти на новый уровень в процессе написания кода. Это незаменимый инструмент для разработчиков, который позволяет поэтапно сохранять информацию обо всех изменениях в коде, возвращаться к разному состоянию, и многое другое. Желательно научиться работать с Git в терминале, а также попрактиковаться: создать репозиторий на Github или Gitlab и опробовать основные возможности Git на своём тестовом репозитории. Подойдет любой интерактивый тур
На этом этапе я предлагаю побольше попрактиковаться и сделать свой небольшой проект, чтобы запомнить пройденный материал. Необязательно самостоятельно придумывать дизайн сайта, вы можете взять готовый макет. Создайте landing page или, например, сверстайте сайт-портфолио, сохраняйте код на Github в процессе разработки и попробуйте разместить сайт на бесплатном хостинге для статических сайтов — Github Pages. Если вам недостаточно практики, попробуйте посмотреть, как верстают другие, и повторить. На YouTube достаточно видеоуроков на эту тему (например, по запросу «верстка сайта по макету figma»).
Если вы глубоко изучили HTML и CSS, то после прохождения предыдущих пунктов сможете стать верстальщиком сайтов. Но чтобы научиться писать интерактивные веб-приложения и стать профессиональным фронтенд-разработчиком, нужно продолжить свой путь в мире фронтенда и погрузиться в программирование.
6. Язык программирования JavaScript. Не путайте JavaScript с Java. Изучите основы языка: переменные, объекты, типы данных, функции, контекст и замыкания, классы. Сравните отличия спецификаций EcmaScript старых и новых версий. После понимания основ переходите к более сложным вещам: тонкостям асинхронного программирования (коллбеки, промисы, async-await) и выполнению запросов на сервер (XmlHttpRequest, Ajax, Fetch, Cookie). Подойдет любой курс на stepik.
7. DOM (Document Object Model). DOM — это объектная модель документа, дерево, которое строит браузер, чтобы отрисовать вашу страницу на экране. Научившись работать с DOM, вы сможете с помощью JavaScript создавать или изменять элементы на странице, реагировать на клики пользователей и многое другое. Работе с DOM и событиям в браузере посвящена отдельная часть LearnJavascript.
Подробно тема DOM также описана в книге «Выразительный JavaScript», автор Марейн Хавербек.
8. Node.js, NPM
Благодаря программной платформе Node.js язык JavaScript можно использовать не только в браузере. С помощью этого инструмента можно написать консольную программу или серверную часть приложения.
Попробуйте написать свой собственный небольшой сервер.
В своих JavaScript-программах вы можете использовать модули, написанные другими разработчиками. Ознакомьтесь с онлайн-хранилищем пакетов NPM.
9. Babel Js. — компилятор JavaScript-кода, который позволяет использовать последние возможности языка, например, стрелочные функции, классы, optional chaining, не дожидаясь их полной поддержки браузерами. Вам необходимо лишь правильно сконфигурировать Babel под нужную версию EcmaScript или список поддерживаемых вами браузеров, исходный код будет преобразован автоматически.
Попробуйте воспользоваться онлайн-компилятором кода на официальном сайте, чтобы посмотреть, во что превращаются современные конструкции JavaScript. Настройте компиляцию кода для небольшого JavaScript-приложения, подключив Babel как NPM-пакет.
10. Сборщики модулей, Webpack.
При создании приложений разработчики делят код на части (модули), подключают дополнительные обработчики кода, настраивают приложения для различных окружений (development и production). Чтобы это было возможным, а нам не пришлось вручную подключать модули в HTML-файле в нужном порядке и следить за изменениями, в приложениях используются сборщики модулей (бандлеры).
Сборщики подключают и комбинируют модули и их зависимости в один или несколько файлов в правильном порядке, а также позволяют дополнительно преобразовывать код.
Webpack — один из самых популярных сборщиков модулей. Это помощник разработчиков, несмотря на то, что по началу он может показаться достаточно сложным. Его гибкость позволяет настроить сборку с использованием огромного множества плагинов и загрузчиков (пре- и пост- процессоров CSS и HTML, Babel и др.), оптимизировать ресурсы, быстро подгружать изменения в процессе разработки с помощью hot module replacement, и многое другое. Подойдет любое руководство.
11. Препроцессоры CSS.
CSS-препроцессор — это надстройка над CSS, которая предоставляет удобные новые синтаксические конструкции для разработчика, добавляя новые возможности, которые позволяют упростить и ускорить разработку и поддержку стилей.
Наиболее популярные препроцессоры: Sass (SCSS), Stylus;, Less. Советую также на этом этапе ознакомиться с инструментом трансформации стилей PostCSS и, в частности, с плагином Autoprefixer. Этот плагин позволяет автоматически добавлять вендорные префиксы для CSS-свойств вашего кода.
12. Препроцессоры HTML (Шаблонизаторы).
Препроцессоры HTML имеют те же преимущества, что и CSS-препроцессоры. Они позволяют более эффективно писать HTML-разметку, разбивать код на модули, а также использовать условия, циклы, миксины, наследование.
Популярные шаблонизаторы: Pug (ранее Jade), Handlebars. Настройте свой проект, добавив в webpack-конфигурацию загрузчики для обработки CSS- и HTML-кода препроцессорами.
13. Стиль кода (code style) — набор правил, который позволяет сделать код единообразным, максимально удобным для восприятия и читаемым для вас и других разработчиков. Такие правила описывают, где и какие отступы и скобки должны быть, максимальную длину строк, названия переменных, позволяют определить слишком запутанный или лишний код и множество других аспектов.
Некоторые компании придумывают свой стиль кода. Одним из известных наборов правил во фронтенде является стандарт компании Airbnb, советую ознакомиться с ним для повышения качества своего кода.
Существуют специальные инструменты, которые могут проверять ваш код автоматически и позволяют легко поддерживать код в определенном стиле, настроив конфигурацию проекта один раз: Prettier, ESLint, EditorConfig, Husky.
Ознакомьтесь с документацией инструментов, попробуйте подключить их к своему проекту и IDE, следуйте определенному стилю кода в своём проекте, чтобы сделать приложение лучше!
14. React, Angular или Vue? На 2026 год основная борьба идет между этими библиотеками. Вы можете выбрать любую из них. Если вам симпатизирует какая-то конкретная компания, в которой вы хотели бы работать, можете выбрать используемый ими фреймворк.
Я бы советовала начать с React — он имеет огромную популярность среди разработчиков и компаний, продолжает развиваться, прост для понимания начинающими фронтендерами, вокруг него сложилось множество других инструментов и большое сообщество.
Начните изучать React с официальной документации, она достаточно подробная. Если её вам покажется недостаточно, можно найти на Udemy полноценный курс (например, Modern React and Redux — на английском языке, с очень понятным и подробным объяснением для начинающих, практическими заданиями и всем необходимым материалом по React и библиотекам).
Уделите внимание описанию типов входных параметров для React-компонентов (проверка типов с помощью PropTypes), а также написанию комментариев по стандарту JSDoc (цикл статей по использованию JSDoc).
По мере вашего продвижения необходимо будет научиться управлять состоянием приложения. Библиотеки, которые помогают в этом: Redux и Mobx. Начать рекомендую с Redux — это наиболее популярная библиотека в связке с React. Ознакомьтесь с официальной документацией или переводом. Также советую курс от одного из авторов библиотеки (Getting Started with Redux от Дэна Абрамова).
Затем приступайте к изучению библиотеки для удобного выполнения асинхронных действий (например, запросов к серверу). Самая простая библиотека, с которой стоит начать — Redux Thunk (документация).
15. Автоматическое тестирование.
Тестирование — это процесс оценки того, что все модули приложения ведут себя так, как ожидалось. Благодаря тестированию можно избежать большого количества ошибок, которые вы могли бы не заметить. Изучите, что такое тестирование и какие виды бывают (Тестирование для «чайников»). Научитесь писать модульные тесты к вашему коду, используя одну из библиотек для тестирования, например, Jest.
16. Алгоритмы. Как же без них? Только решать их на собесе придется на JavaScript. Кто бы что ни говорил, базовые алгосы — это важно, можно не уметь переворачивать красно-черные деревья, но знать чем массив отличается от списка и зачем нужна хэш таблица — обязан каждый. Эконом вариант: начать с «Грокаем алгоритмы», потом leetcode + лекции Паши Маврина. Но более эффективный вариант присмотреться к нашему курсу по алгоритмам.
Каждый шаг бездонная бочка, поэтому советую осваивать материалы параллельно. Они дадут вам фундамент, с которым смело можно ходить по собесам. Также смотрим всякие конференции по бэкенду, читаем популярные статьи, узнаем популярные вопросы на собесах. Обычно спрашивают баяны из общего информационного поля, потому держим ухо востро!
По этой ссылке в тг собраны тестовые и прочие полезные материалы по фронтенд разработке. Если у вас есть чем подобным поделиться пишите в тг @vice22821, в долгу не останемся!
По этой ссылке в тг собраны собеседования и прочие полезные материалы по фронтенд разработке. Если у вас есть чем подобным поделиться пишите в тг @vice22821, в долгу не останемся!