Коротко: frontend — всё, что видно и нажимается в браузере; backend — то, что считает и хранит на сервере. Ребёнку проще начинать с frontend: результат каждого действия виден сразу на экране.
Frontend — это всё, что человек видит и нажимает на сайте: кнопки, текст, картинки, формы. Backend — это то, что обрабатывает данные «за кулисами»: считает, хранит, проверяет пароли, отдаёт нужную информацию на страницу. Простыми словами: frontend — зал ресторана, backend — кухня. Посетитель видит только зал, но без кухни на столе ничего не появится.
Из чего состоит frontend конкретно
Frontend строится на трёх технологиях, каждая отвечает за своё: HTML — структура страницы (заголовки, текст, кнопки, формы), CSS — внешний вид (цвета, шрифты, расположение блоков), JavaScript — поведение (клик по кнопке что-то запускает, форма проверяет данные, страница обновляется без перезагрузки).
На курсе «Frontend Старт: перший сайт» (10–14 лет) ребёнок проходит именно эту тройку последовательно: сначала структура страницы, потом цвета и шрифты, Flexbox и CSS Grid для расположения блоков, адаптивность под телефон, и только во второй половине курса — JavaScript, DOM и первый интерактив на кнопках.
А где здесь backend — и нужен ли он фронтенд-разработчику?
На младшем уровне (10–14 лет) backend вообще не появляется — и это осознанное решение программы, а не пропуск. Подросток сначала должен уверенно почувствовать, как устроена страница в браузере, прежде чем подключать к ней сервер.
Backend появляется на старшем уровне «Frontend Pro» (14–18 лет) — и то как осознанное знакомство, а не отдельная специальность. Модуль «Основи Node.js та Express» в этом курсе — тот момент, когда фронтенд впервые «разговаривает» с собственным сервером: подросток пишет простой backend-сервер на Node.js и видит, как данные передаются в обе стороны.
HTML — это язык программирования или нет?
Нет. HTML — язык разметки: он описывает структуру страницы (где заголовок, где абзац, где кнопка), но не умеет считать, сравнивать или принимать решения. Логика и «умное» поведение страницы — это уже JavaScript. Путаница возникает потому, что оба языка работают в браузере рядом, но назначение у них совсем разное.
Что ребёнок умеет делать после каждого уровня
| Курс | Возраст | Технологии | Финальный проект |
|---|---|---|---|
| Frontend Старт: перший сайт | 10–14 лет | HTML5, CSS3, Flexbox, Grid, основы JS | Сайт-портфолио, опубликованный на GitHub Pages |
| Frontend Pro: сучасна веб-розробка | 14–18 лет | ES6+, React, TypeScript, Node.js, Express | Проект для портфолио на React |
Дизайн или код: кто делает frontend, а кто — макет?
Frontend-разработчик сам рисует дизайн сайта?
Нет, обычно нет. Макет и цветовую композицию создаёт UI/UX-дизайнер в Figma, а frontend-разработчик переносит готовый макет в рабочий код HTML/CSS/JS. Это два разных навыка: первый ближе к графическому дизайну, второй — к логике и коду. Если ребёнку интереснее именно рисовать макет, а не писать код, это скорее направление дизайна, чем frontend.
Сколько времени до первого сайта, который можно показать
На уровне «Frontend Старт» первый заметный результат — не финальный проект, а мини-проекты во второй половине курса: фотогалерея с сеткой карточек и эффектом при наведении, затем рабочий калькулятор и переключатель светлой и тёмной темы на JavaScript. Это уже готовые страницы, которые можно открыть в браузере и показать, а не учебные упражнения в тетради.
До финального проекта уровня — сайта-портфолио из нескольких секций — ребёнок доходит, когда уже знает HTML, CSS, Flexbox, Grid и базовый JavaScript, а публикует его через Git и GitHub Pages, то есть получает настоящий адрес в интернете, а не файл на рабочем столе.
Нужно ли знать английский, чтобы учить HTML и CSS?
Нет, углублённый английский не нужен. Теги и свойства CSS — это фиксированный набор английских слов (например color, margin, flex), который изучается как часть синтаксиса, а не как иностранный язык. Ребёнку достаточно школьного уровня, чтобы распознавать эти слова в коде.
Что происходит, когда вы нажимаете «Отправить»
Проще всего увидеть границу между фронтендом и бэкендом на обычной форме заявки. Представим страницу, где нужно вписать имя и телефон.
- Фронтенд показывает форму. HTML создаёт поля и кнопку, CSS делает их аккуратными, а JavaScript проверяет, действительно ли в поле телефона цифры, и подсвечивает ошибку ещё до отправки.
- Данные летят на сервер. После нажатия кнопки браузер отправляет введённое по определённому адресу. Пользователь этого не видит.
- Бэкенд принимает и решает. Сервер ещё раз проверяет данные (фронтенду доверять нельзя — его легко обойти), сохраняет заявку в базу и, возможно, отправляет уведомление администратору.
- Ответ возвращается. Сервер говорит браузеру «всё в порядке», и фронтенд показывает «Спасибо, мы перезвоним».
Интересная деталь для подростка: проверка данных происходит дважды. На фронтенде — для удобства человека, чтобы он сразу видел ошибку. На бэкенде — для безопасности, потому что злоумышленник может отправить что угодно в обход формы. Это хороший пример того, почему разработчику полезно понимать обе стороны, даже если работает он только с одной.
А кто такой fullstack-разработчик
Так называют человека, который пишет и фронтенд, и бэкенд. В небольших командах и на собственных проектах это привычная ситуация: кто-то один делает сайт от страницы до базы данных.
Для ребёнка или подростка «fullstack» — не цель на старте, а скорее естественное следствие любопытства. Сначала уверенный фронтенд, потом знакомство с сервером и базой. В программе старшего уровня «Frontend Pro» это видно: после React появляются основы Node.js и Express, а сразу за ними — первое знакомство с базами данных. Этого достаточно, чтобы собрать маленькое приложение полностью самостоятельно и понять, куда двигаться дальше.
Как понять, что ближе ребёнку
Ориентиры простые, и их видно ещё до курса.
Фронтенд обычно нравится тем, кто любит, чтобы результат был виден: поменял цвет — кнопка стала другой, добавил анимацию — страница ожила. Таким детям важно показать сделанное друзьям.
Бэкенд ближе тем, кому интересно, как оно работает: откуда берутся данные, как считается рейтинг в игре, почему сайт помнит вход. Таких детей часто тянет к логическим задачам, и им не скучно, когда на экране только текст.
Хорошая новость в том, что выбирать на старте не нужно: любая веб-разработка начинается с HTML и CSS. О том, как выглядит этот путь с нуля, мы писали в статье «Веб-разработка для подростков с нуля», а о реальных заработках в профессии — в материале «Сколько зарабатывает frontend-разработчик».
Главное о frontend и backend коротко
Frontend — то, что видно и можно нажать. Backend — то, что считает и хранит данные под капотом. На курсе «Frontend Старт» ребёнок 10–14 лет осваивает именно frontend без отвлечения на сервер, а на «Frontend Pro» в 14–18 лет впервые касается backend через Node.js — осознанно, а не случайно.
Полное сравнение, с чего ребёнку лучше стартовать — с HTML/CSS или сразу с JavaScript — в статье «HTML, CSS чи одразу JavaScript: з чого дитині краще починати вивчати веб-розробку». Подробное описание программы — на странице курса веб-разработки.
