На чем пишут сайты

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

Короткая схема такая: HTML отвечает за структуру, CSS за внешний вид, JavaScript за интерактивность, backend за серверную логику, база данных за хранение, CMS или фреймворк за удобство разработки и управления сайтом

Содержание

Из чего состоит сайт
Лендинг, блог, магазин и сервис
Минимальный сайт на HTML, CSS и JavaScript
Когда нужен backend
WordPress, конструктор или код
Что выбрать новичку
Проверка готового сайта
Примеры стеков для реальных задач
Когда сайту нужен другой уровень разработки
Частые вопросы
Можно ли сделать сайт только на HTML и CSS?
На каком языке пишут WordPress-сайты?
Нужен ли JavaScript каждому сайту?

Из чего состоит сайт

Уровень	Что делает	Частые технологии
HTML	заголовки, текст, формы, ссылки, структура страницы	HTML5
CSS	сетка, отступы, цвета, адаптив, анимации	CSS, Tailwind, Bootstrap
JavaScript	меню, фильтры, калькуляторы, формы, интерактив	JavaScript, TypeScript
frontend-фреймворк	сложные интерфейсы и веб-приложения	React, Vue, Svelte, Angular
backend	пользователи, заказы, оплата, админка, API	PHP, Python, Node.js, Java, Go, C#
база данных	товары, статьи, заявки, аккаунты	MySQL, PostgreSQL, SQLite
CMS	управление страницами без кода	WordPress, 1C-Bitrix, Joomla, Drupal
хостинг	где сайт физически работает	shared-хостинг, VPS, cloud, static hosting

Если сайт состоит из нескольких HTML-файлов, его можно загрузить на простой хостинг. Если сайт должен принимать заявки и хранить данные, нужна серверная часть или готовая платформа

По этой теме полезно отдельно посмотреть Как сделать сайт-приглашение на свадьбу, чтобы расширить контекст и сравнить подходы

По этой теме полезно отдельно посмотреть Как сделать сайт учителя или педагога, чтобы расширить контекст и сравнить подходы

Лендинг, блог, магазин и сервис

Разные сайты пишут по-разному:

Тип сайта	Практичный стек
лендинг услуги	Tilda, Webflow, WordPress или HTML/CSS/JS
блог или медиа	WordPress, статический генератор, headless CMS
сайт компании	WordPress, Bitrix, Laravel, Django
интернет-магазин	WooCommerce, Shopify, OpenCart, Bitrix, кастомная разработка
личный кабинет	React/Vue плюс backend и база данных
SaaS-сервис	frontend, API, PostgreSQL, авторизация, платежи
документация	Docusaurus, MkDocs, статический сайт

Поэтому вопрос на чем пишут сайты лучше уточнять: нужен сайт-визитка, блог, магазин, сервис или внутренний кабинет

Минимальный сайт на HTML, CSS и JavaScript

Самый простой сайт можно сделать тремя файлами:

index.html
style.css
script.js

Пример структуры index.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ремонт ноутбуков в Казани</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Ремонт ноутбуков с диагностикой за 30 минут</h1>
    <a href="#request">Оставить заявку</a>
  </header>

  <main>
    <section>
      <h2>Что ремонтируем</h2>
      <p>Экраны, клавиатуры, разъемы питания, перегрев, программные ошибки</p>
    </section>

    <section id="request">
      <h2>Заявка</h2>
      <form>
        <input name="name" placeholder="Ваше имя">
        <input name="phone" placeholder="Телефон">
        <button>Отправить</button>
      </form>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>

Такой сайт уже имеет структуру, первый экран, услугу и форму. Но сама форма без backend или сервиса приема заявок не отправит данные владельцу сайта

Когда нужен backend

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

регистрация и вход
личный кабинет
корзина и заказы
онлайн-оплата
комментарии
бронирование
фильтры товаров
интеграция с CRM
админка для менеджера

Типовая схема:

браузер -> frontend -> API -> backend -> база данных

Пример для интернет-магазина:

React или шаблон CMS
backend на PHP/Laravel, Node.js или Python
MySQL/PostgreSQL
интеграция оплаты
админка для товаров и заказов

Пример для сайта эксперта:

WordPress
готовая тема или своя верстка
плагины форм и SEO
база MySQL
обычный хостинг

WordPress, конструктор или код

Конструктор подходит, если нужно быстро собрать лендинг, портфолио или простую страницу без разработки. WordPress подходит, если нужен блог, рубрики, страницы услуг, SEO, роли пользователей и регулярная публикация материалов. Чистый код или фреймворк нужен, когда сайт превращается в сервис с нестандартной логикой

Выбор	Когда подходит	Ограничение
Tilda/Webflow	быстро проверить оффер, сделать лендинг	сложная логика и масштабирование
WordPress	блог, услуги, контент, SEO	нужно следить за плагинами и скоростью
чистый HTML/CSS/JS	учебный проект, визитка, статичная страница	нет удобной админки
React/Vue плюс backend	личный кабинет, сервис, сложный интерфейс	дороже разработка и поддержка
Laravel/Django/Next.js	кастомный сайт или продукт	нужен разработчик и процесс обновлений

Что выбрать новичку

Если вы хотите понимать сайты, начните с HTML и CSS. Потом добавьте JavaScript: меню, модальные окна, проверку формы, калькулятор. После этого можно переходить к WordPress, React или backend

Учебный маршрут:

1. HTML: структура страницы
2. CSS: адаптив и внешний вид
3. JavaScript: интерактивность
4. Git и публикация
5. формы и отправка данных
6. WordPress или backend
7. база данных и API

После такого маршрута станет понятно, почему сайт не равен одному языку программирования. Это набор слоев, и каждый слой решает свою задачу

Проверка готового сайта

Перед публикацией проверьте:

сайт открывается на телефоне без горизонтальной прокрутки
у каждой важной страницы есть понятный H1
формы реально отправляют заявку
ссылки ведут туда, куда должны
изображения не весят слишком много
есть HTTPS
страница ошибки 404 не выглядит сломанной
сайт можно открыть в приватном окне
в браузере нет критических ошибок в консоли

Эта проверка полезнее, чем спор о том, какой язык лучше. Пользователь видит не язык, а скорость, понятность, доверие и работающие действия

Примеры стеков для реальных задач

Ситуация	Что выбрать	Почему
мастер услуг хочет заявки из поиска	WordPress или Tilda плюс формы и аналитика	быстро запустить, легко менять тексты
эксперт ведет блог и рубрики	WordPress	удобная админка, категории, SEO-плагины
маленький стартап проверяет идею	Next.js, Supabase или Firebase	быстро сделать интерфейс, вход и данные
интернет-магазин на 200 товаров	WooCommerce, OpenCart или Shopify	не нужно писать корзину с нуля
корпоративный портал	Laravel, Django, ASP.NET или Java/Spring	роли, процессы, интеграции
документация продукта	статический генератор	быстро, безопасно, удобно хранить в Git

Для фрилансера важный навык — не пытаться любой проект писать с нуля. Иногда профессиональный выбор — взять CMS, потому что клиенту нужна админка и регулярные правки. Иногда профессиональный выбор — отказаться от конструктора, потому что проект требует личного кабинета, API и нестандартной логики

Когда сайту нужен другой уровень разработки

Простой стек перестает подходить, если появляются признаки:

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

В этот момент вопрос уже не на чем пишут сайты, а какая архитектура выдержит задачи проекта. Для маленькой визитки это лишнее, для сервиса или магазина — нормальная часть планирования

Частые вопросы

Можно ли сделать сайт только на HTML и CSS?

Да, если это статичная страница без отправки данных, личного кабинета и админки. Для визитки, учебного проекта или простой инструкции этого достаточно

На каком языке пишут WordPress-сайты?

WordPress написан на PHP и использует базу MySQL или MariaDB. Но автор сайта может работать через админку, темы и плагины без постоянного написания PHP-кода

Нужен ли JavaScript каждому сайту?

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