Из чего сделан сайт
Урок 3 из 26 курса «Вайбкодинг: курс с нуля». Бесплатно, с анимациями и тестом.
Фронтенд: что ты видишь
Фронтенд: всё, что загружается в браузер, то есть то, что ты видишь и нажимаешь. Он стоит на трёх языках. HTML: структура, то есть заголовки, кнопки, картинки. CSS: внешний вид, то есть цвета, шрифты, расположение. JavaScript (JS): поведение, то есть что случится, когда нажмёшь кнопку. Короче: HTML скелет, CSS одежда, JS движения.
Бэкенд: проверки и ключи
Бэкенд, или сервер: код, который работает не у тебя в браузере, а на компьютере в облаке, то есть в дата-центре, большом здании с серверами. Посетитель этот код не видит. Поэтому там делают всё важное: проверяют пароль при входе, считают сумму заказа, общаются с платными сервисами по секретным ключам. Фронтенд просит, бэкенд проверяет и отвечает.
База данных: память проекта
База данных: место, где хранятся данные, как огромная таблица. Пользователи, заказы, рекорды в игре, твоя серия дней в трекере. Закрыл вкладку, и фронтенд всё забыл, а база помнит. Обычно с ней говорит бэкенд: он решает, кому что можно читать и менять. На картинке это цилиндр справа, так базы данных рисуют по традиции.
Хостинг, домен и DNS
Хостинг: компьютер, который круглосуточно отдаёт твой сайт всем, кто его открыл. Домен: человеческое имя вроде mysite.com, чтобы никто не запоминал цифровой адрес сервера. Связывает их DNS, телефонная книга интернета: браузер спрашивает «где живёт mysite.com?» и получает адрес хостинга. Свой домен покупают у регистратора и продлевают, обычно раз в год.
Сайт или приложение
Статичный сайт: только фронтенд, у всех одинаковые страницы. Лендинг, портфолио, калькулятор: им не нужны ни сервер, ни база. Приложение: фронтенд плюс бэкенд и база данных. Пример: трекер привычек. Кнопки «сделал» и экран статистики: фронтенд. Вход по паролю: бэкенд. Сохранённая серия дней: база данных. Статичный сайт проще и собрать, и разместить.
Зачем это знать
Когда знаешь части, понятно, какой сервис нужен и что просить у ИИ. Код хранят на GitHub. Публикуют сайт хостинги вроде Cloudflare или Vercel. Базу данных дают сервисы вроде Supabase. Об этом в следующих уровнях. У многих есть бесплатный тариф, лимиты смотри на сайте сервиса. И сразу говори ИИ: «это статичный сайт» или «нужны вход и база».
Проверь себя
- Где правильно проверять пароль пользователя?
Правильный ответ: На бэкенде, то есть на сервере. Код фронтенда может прочитать любой посетитель. Проверки и секреты живут на сервере, который никто не видит. - Что делает DNS?
Правильный ответ: Находит адрес хостинга по имени домена. DNS работает как телефонная книга: по имени mysite.com браузер узнаёт, на каком компьютере лежит сайт. - Портфолио из трёх страниц с работами. Что ему нужно?
Правильный ответ: Только фронтенд и хостинг. Все видят одно и то же, ничего не сохраняется: это статичный сайт. Сервер и база тут лишние.