Коротко: 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 | SPA-застосунок на React із власним API |
Дизайн чи код: хто робить 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), який вивчається як частина синтаксису, а не як іноземна мова. Дитині достатньо шкільного рівня, щоб розпізнавати ці слова в коді.
Головне про frontend і backend коротко
Frontend — те, що видно й можна натиснути. Backend — те, що рахує і зберігає дані під капотом. На курсі «Frontend Старт» дитина 10–14 років опановує саме frontend без відволікання на сервер, а на «Frontend Pro» у 14–18 років вперше торкається backend через Node.js — усвідомлено, а не випадково.
Повне порівняння, з чого дитині краще стартувати — з HTML/CSS чи одразу з JavaScript — у статті «HTML, CSS чи одразу JavaScript: з чого дитині краще починати вивчати веб-розробку». Детальний опис старшого рівня — на сторінці курсу Frontend Pro: сучасна веб-розробка.
