Кто такой frontend-разработчик и чем он занят

Frontend и backend

Любой сайт можно разделить на две части:

Frontend-разработчика иногда называют фронтендером или верстальщиком — хотя вёрстка (HTML и CSS) лишь часть его работы. Разработчика, который делает обе части, называют fullstack.

Чем занят frontend-разработчик

Дизайнер кофейни «Зерно» нарисовал в Figma макет: меню с карточками напитков, корзина сбоку, форма заказа. Frontend-разработчик:

• верстает страницу — превращает макет в HTML и CSS так, чтобы она выглядела как задумано на любом экране;
• оживляет интерфейс на JavaScript — кнопка «В корзину» добавляет напиток, сумма пересчитывается, форма проверяет телефон;
• получает данные с сервера — меню и цены приходят от backend через API;
• следит за качеством — скорость загрузки, удобство на телефоне, доступность для людей с особенностями зрения.

Три языка браузера

Разберём одну карточку напитка:

<article class="drink">
  <h3>Капучино</h3>
  <p class="price">220 ₽</p>
  <button>В корзину</button>
</article>

.drink { padding: 16px; border-radius: 12px; background: #fff; }
.price { font-weight: 700; color: #6b3e26; }

document.querySelector('.drink button').addEventListener('click', () => {
  alert('Капучино добавлен в корзину');
});

• HTML говорит: «здесь карточка с заголовком, ценой и кнопкой».
• CSS — «у карточки отступы, скруглённые углы и белый фон, цена жирная и коричневая».
• JavaScript — «при нажатии на кнопку покажи сообщение».

Каждому языку посвящён отдельный урок курса, а глубоко их можно изучить в курсах «HTML и CSS» и «Основы JavaScript».

С кем работает

Frontend-разработчик — связующее звено между дизайном и данными. Он получает макет от дизайнера, договаривается с backend-разработчиками о формате данных, отдаёт работу тестировщику и получает от него найденные ошибки. Поэтому умение задавать вопросы и договариваться ценится не меньше, чем знание языков.