Что делает веб-программист, сколько получает и как получить профессию

Веб-программист — это разработчик, который пишет и поддерживает сайты и веб-приложения: интерфейс в браузере (фронтенд), серверную логику и работу с данными (бэкенд) или обе части сразу (фулстек). Если коротко, что делает web-программист: превращает задачу бизнеса («нужна подписка на рассылку», «нужен личный кабинет») в работающий код, проверяет его и выкатывает на сервер, а потом сопровождает.

Ниже — как это выглядит на одной конкретной задаче, из чего состоит рабочая неделя, от чего на самом деле зависит зарплата и какими путями приходят в профессию. Общий обзор профессии и стека — в статье веб-программист: кто это и как им стать; здесь фокус на практике и деньгах.

Три слова, которые путают

Жесткой официальной границы между «программистом» и «разработчиком» нет: разницу задает не название, а уровень задач и ответственности, который описан в конкретной вакансии.

Что делает веб-программист: одна задача целиком

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

1. Разобрать требования. Что считать верным адресом, учитывать ли регистр, какой текст ошибки показать, нужно ли письмо-подтверждение.
2. Договориться о контракте API. Какой адрес вызывать, какой JSON отправлять, какие коды ответа возвращать в каждом случае.
3. Написать серверную часть. Проверка входа, запись в хранилище, понятные ошибки.
4. Написать клиентскую часть. Форма, отправка через fetch, вывод сообщения по коду ответа.
5. Проверить и отдать на ревью. Хорошие и плохие входы, код-ревью коллегой, затем выкладка.

Во фронтенд-команде человек делает шаг 4 и договаривается с бэкендом о шаге 2, в бэкенд-команде — шаги 2-3, фулстек ведет задачу целиком. Ниже минимальная полная версия шагов 2-4 в одном файле: сервер и клиентский вызов. Проверено на Node.js 24.21 без сторонних пакетов, запуск node subscribe.mjs.

// subscribe.mjs - одна фича целиком: API на сервере + вызов с клиента.
// Запуск: node subscribe.mjs (Node.js 24, без сторонних пакетов)
import http from "node:http";

const subscribers = new Set();             // вместо базы данных - память процесса
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const MAX_BODY = 1024;                      // байт: защита от огромного тела

function send(res, status, data) {
  res.writeHead(status, { "Content-Type": "application/json; charset=utf-8" });
  res.end(JSON.stringify(data));
}

const server = http.createServer((req, res) => {
  if (req.url !== "/api/subscribe") return send(res, 404, { error: "not found" });
  if (req.method !== "POST") {
    res.setHeader("Allow", "POST");
    return send(res, 405, { error: "method not allowed" });
  }
  let body = "";
  req.setEncoding("utf8");
  req.on("data", (chunk) => {
    body += chunk;
    if (Buffer.byteLength(body) > MAX_BODY) {
      res.setHeader("Connection", "close");
      send(res, 413, { error: "body too large" });
      req.destroy();
    }
  });
  req.on("end", () => {
    if (res.writableEnded) return;
    let data;
    try {
      data = JSON.parse(body);
    } catch {
      return send(res, 400, { error: "invalid JSON" });
    }
    if (typeof data?.email !== "string") return send(res, 400, { error: "invalid email" });
    const email = data.email.trim().toLowerCase();
    if (email.length > 254 || !EMAIL_RE.test(email)) {
      return send(res, 400, { error: "invalid email" });
    }
    if (subscribers.has(email)) return send(res, 409, { error: "already subscribed" });
    subscribers.add(email);
    send(res, 201, { ok: true, total: subscribers.size });
  });
});

// Клиентская часть: так форма на странице вызывает API через fetch
server.listen(0, async () => {
  const url = `http://127.0.0.1:${server.address().port}/api/subscribe`;
  const tries = [
    JSON.stringify({ email: "anna@example.com" }),
    JSON.stringify({ email: "Anna@Example.com " }),
    JSON.stringify({ email: "anna(at)example.com" }),
    JSON.stringify({ email: ["bob@example.com"] }),
    "{email: anna}",
  ];
  for (const body of tries) {
    const r = await fetch(url, { method: "POST", body,
      headers: { "Content-Type": "application/json" } });
    console.log(r.status, JSON.stringify(await r.json()));
  }
  const r = await fetch(url);
  console.log(r.status, r.headers.get("allow"), JSON.stringify(await r.json()));
  server.close();
});

Фактический вывод прогона:

201 {"ok":true,"total":1}
409 {"error":"already subscribed"}
400 {"error":"invalid email"}
400 {"error":"invalid email"}
400 {"error":"invalid JSON"}
405 POST {"error":"method not allowed"}

Разбор по строкам вывода:

• 201 — адрес принят и сохранен.
• 409 — второй запрос с Anna@Example.com тоже распознан как дубль, потому что сервер приводит адрес к нижнему регистру и обрезает пробелы. Без trim().toLowerCase() в базе оказались бы два «разных» подписчика — типичный баг, который находят только на граничных входах.
• 400 трижды — неверный адрес, адрес не строкой (массив ["bob@example.com"]) и сломанный JSON. Проверка typeof ... !== "string" нужна потому, что String(["bob@example.com"]) дает строку bob@example.com, и без нее сервер принял бы массив как нормальный адрес. Клиент по коду понимает, что именно показать пользователю.
• 405 с заголовком Allow: POST — метод GET для этого адреса запрещен. Отдельно отбрасывается слишком большое тело запроса (код 413): при отправке 5000 символов сервер отвечает 413 {"error":"body too large"} и закрывает соединение.

Граница примера: это учебная модель. Подписчики живут в памяти и пропадут при перезапуске, регулярное выражение отсекает только грубые ошибки, а в рабочем проекте нужны база данных, письмо-подтверждение адреса, защита от массовых запросов (rate limit) и HTTPS. Ответ 409 здесь для наглядности: в публичной форме он позволяет любому проверить, подписан ли чужой адрес, поэтому в продакшене обычно на новый и на уже подписанный адрес отвечают одинаково («проверьте почту»), а различие видно только в письме. Именно эту разницу между «работает у меня» и «работает в продакшене» веб-программист и закрывает в реальной работе.

Из чего состоит рабочая неделя

Пропорции сильно зависят от компании и роли, поэтому таблица — ориентир, а не норма.

Фронтендер больше времени проводит в браузере и DevTools, бэкендер — в логах, SQL и API, фулстек переключается между ними.

Сколько получает веб-программист

Точную сумму «для всех» назвать нельзя, и числа из старых статей (в том числе из прежней версии этой) быстро устаревают. Честнее понимать, какие факторы двигают зарплату, и проверять цифры на свежих вакансиях.

Как получить свою цифру, а не чужую:

1. Возьмите 20-30 свежих вакансий по своему стеку и грейду в своем городе или на удаленке.
2. Выпишите только те, где указана вилка, и отметьте, это сумма до вычета налога или «на руки».
3. Считайте медиану, а не среднее: одна вакансия с огромной вилкой сильно сдвигает среднее.
4. Сравните с опубликованными обзорами зарплат профильных сайтов за последний полугодовой период.

Для новичка важнее не стартовая цифра, а скорость роста: рост джуна до мидла обычно дает больший прирост, чем выбор между двумя стартовыми предложениями.

Как получить профессию: пути и их цена

Диплом для веб-разработки не обязателен по закону и чаще всего не требуется работодателем, но способ обучения влияет на скорость и на то, что вы сможете показать на собеседовании.

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

Дорожная карта до первого оффера

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

1. Сверстать страницу проекта на HTML и CSS так, чтобы она нормально выглядела на телефоне.
2. Добавить JavaScript: форма, отправка через fetch, обработка ошибок по кодам ответа, как в примере выше.
3. Написать сервер на одном языке (JavaScript на Node.js, Python или PHP) с двумя-тремя адресами API.
4. Подключить настоящую базу данных (например, PostgreSQL) вместо хранения в памяти.
5. Добавить регистрацию и вход: хеширование паролей, проверка прав на каждый запрос.
6. Написать несколько автотестов на API и выложить проект на хостинг по HTTPS.
7. Оформить README: что умеет проект, как запустить, какие решения принимали и почему.

Если не получилось

Выводы

• Веб-программист превращает задачу бизнеса в работающий сайт или сервис: разбирает требования, пишет клиент и (или) сервер, проверяет и выкатывает.
• Фронтенд, бэкенд и фулстек различаются тем, какую часть одной и той же задачи человек ведет.
• Кроме нового кода, заметная часть работы — исправление ошибок, код-ревью, согласования и выкладка.
• Зарплата сильнее всего зависит от грейда, затем от города, работодателя и домена; свою цифру надежнее считать медианой по свежим вакансиям.
• Путь в профессию может быть любым, но на входе оценивают проект в портфолио, доведенный до работающего состояния.

Где применяется / связь с практикой

FAQ

Нужно ли веб-программисту знать математику?
Для большинства задач хватает школьной математики и логики. Алгоритмы и структуры данных нужны на собеседованиях и в высоконагруженных проектах.

Можно ли начать с фриланса?
Можно, но без опыта сложнее: заказчику нужны примеры работ, а оценку сроков, договор и поддержку придется вести самому. Многие начинают с найма и уходят во фриланс позже.

Заменят ли веб-программистов конструкторы сайтов и ИИ-помощники?
Типовые лендинги часто собирают на конструкторах, а ИИ ускоряет написание кода. Но постановку задачи, проверку, безопасность и сопровождение по-прежнему ведет разработчик.