Сайт можно сделать из трёх файлов: index.html хранит структуру, style.css отвечает за вид, а script.js добавляет поведение. JavaScript нужен не для каждой страницы: если посетитель только читает текст и переходит по ссылкам, достаточно HTML и CSS. Ниже вы соберёте маленькую интерактивную страницу и проверите, что она остаётся понятной при ошибке скрипта.
Как разделить HTML, CSS и JavaScript
HTML описывает смысл элементов: заголовок, поле, кнопку, ссылку. CSS меняет расположение, цвет и размеры. JavaScript реагирует на действия и меняет состояние страницы. MDN описывает JavaScript как слой динамического поведения, подключаемый к HTML через элемент script (MDN).
Правило выбора помогает не усложнять проект:
- Текст, изображения, обычные ссылки и простая навигация: JavaScript не нужен.
- Изменение интерфейса после ввода, нажатия или получения данных: JavaScript уместен.
- Отправка письма, хранение заказа, авторизация и секретные ключи: нужен сервер или готовый сервис, одного браузерного JavaScript недостаточно.
- Эффект можно сделать нативным HTML или CSS: сначала используйте нативный вариант.
Добавляйте JavaScript под конкретное действие. Формулировка «сделать сайт современным» не является действием, а «обновить предпросмотр при вводе» является.
Понимания, как это устроено, уже достаточно, чтобы начать. На бесплатном эфире сайт собирают за один вечер и показывают, как его выложить.
Посмотреть, как собратьПодготовьте три файла
Создайте папку проекта и положите в неё index.html, style.css и script.js. Если структура HTML пока непривычна, сначала повторите базовую сборку страницы на HTML. Имена в атрибутах href и src должны точно совпадать с именами файлов, включая регистр букв на хостинге.
- Откройте пустую папку в редакторе кода.
- Создайте три файла на одном уровне.
- Сначала заполните HTML и откройте его в браузере.
- Подключите CSS и убедитесь, что оформление изменилось.
- Последним подключите JavaScript и проверьте одно конкретное действие.
По теме: Как посмотреть, как сделан сайт: DevTools без взлома
Соберите страницу в index.html
Пример показывает поле и живой предпросмотр. Без JavaScript заголовок, пояснение и поле всё равно останутся на странице.
<!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">
<script defer src="script.js"></script>
</head>
<body>
<main class="card">
<h1>Карточка проекта</h1>
<label for="project-name">Название</label>
<input id="project-name" type="text" maxlength="80">
<p>Предпросмотр: <output id="preview">Без названия</output></p>
</main>
</body>
</html>Атрибут defer у внешнего классического скрипта позволяет загрузить файл параллельно разбору HTML и выполнить его после завершения разбора документа. Без async и defer внешний классический скрипт может прервать разбор страницы до загрузки и выполнения. Это поведение закреплено в HTML Standard.
Добавьте понятное оформление
В style.css задайте рабочий макет. Сначала добейтесь читаемости, потом добавляйте украшения.
* { box-sizing: border-box; }
body {
margin: 0;
padding: 24px;
font-family: system-ui, sans-serif;
background: #f6f1ec;
color: #241d19;
}
.card {
max-width: 640px;
margin: 0 auto;
padding: 24px;
border-radius: 20px;
background: white;
}
.card input {
width: 100%;
margin-top: 8px;
padding: 12px;
font: inherit;
}
.card input:focus-visible {
outline: 3px solid #b8471f;
outline-offset: 3px;
}По теме: Как сделать ответы на сайте: FAQ без лишнего JavaScript
Добавьте действие в script.js
Скрипт находит поле и output, затем обновляет текст при каждом вводе. Здесь нет сетевого запроса, базы данных или ключа доступа.
const input = document.querySelector("#project-name");
const preview = document.querySelector("#preview");
input.addEventListener("input", () => {
const value = input.value.trim();
preview.textContent = value || "Без названия";
});Не вставляйте введённую строку через innerHTML, если вам нужен только текст. textContent не превращает введённые символы в HTML-разметку. Это безопасная привычка для простого предпросмотра, хотя полноценная безопасность сайта требует отдельной проверки всех мест, где данные входят, сохраняются и выводятся.
Один собранный сайт учит больше десяти инструкций, потому что ошибки видны сразу. На бесплатном эфире по вайбкодингу показывают, как описать идею словами и получить работающую страницу, а участникам достаётся гайд.
Собрать сайт с ИИПроверьте сайт по слоям
Диагностическая последовательность экономит время, потому что отделяет ошибку файла от ошибки кода:
- Откройте
index.html: заголовок, подпись и поле должны появиться. - Переименуйте
style.cssна минуту: если вид не меняется, путь к стилям уже был неверным. - Введите текст: он должен сразу появиться после слова «Предпросмотр».
- Откройте инструменты разработчика и вкладку Console. Исправьте первую красную ошибку, затем перезагрузите страницу.
- Временно уберите строку
script: содержание должно остаться читаемым, пропадёт только живое обновление. - Проверьте страницу узким окном и клавишей
Tab, чтобы поле получало заметный фокус.
По теме: Как сделать полный скрин сайта: 3 способа в 2026
Частые ошибки и их причины
script.jsне найден: файл лежит в другой папке или имя вsrcне совпадает.Cannot read properties of null: селектор не нашёл элемент, проверьтеidи наличиеdefer.- Код изменён, а браузер показывает старое: выполните жёсткое обновление или откройте приватное окно.
- Работает локально, но не на сервере: проверьте регистр букв и загружены ли все три файла.
- Нужно отправить заявку, но ничего не приходит: клиентская страница не заменяет обработчик формы. Используйте схему формы с местом получения заявок.
Когда пора публиковать
Публикуйте, когда базовый сценарий воспроизводится с чистого открытия: страница загружается, ввод меняет предпросмотр, Console не показывает вашу ошибку, а содержание не исчезает без скрипта. Для размещения файлов используйте инструкцию по загрузке готового сайта. После публикации повторите тот же тест по публичному адресу.
Если проекту нужны аккаунты, платежи, личные данные или API, остановитесь перед вставкой ключей в script.js. Код браузера доступен посетителю. Перенесите секреты и проверку прав на сервер, затем проведите отдельный аудит по чек-листу безопасного сайта.
Частые вопросы
Можно сделать весь сайт только на JavaScript?
Технически интерфейс можно собрать скриптом, но для простой страницы это ухудшает понятность и создаёт лишнюю зависимость. Начните с содержательного HTML.
Куда вставлять JavaScript в HTML?
Для отдельного файла подключите script.js в head с атрибутом defer. Для маленького эксперимента допустим встроенный script, но отдельный файл проще проверять.
Почему JavaScript работает не сразу?
Чаще всего скрипт запускается до появления элемента, путь к файлу неверен или селектор не совпадает с id. Проверьте Console и подключение defer.
Нужен ли фреймворк для первого сайта?
Нет. Для одной страницы и нескольких действий достаточно браузерного JavaScript. Фреймворк имеет смысл, когда повторяющихся компонентов и состояний становится много.
На воркшопе по сайтам с ИИ вы соберёте страницу, добавите нужное поведение и научитесь проверять результат по рабочему сценарию.
Записаться на воркшоп