Сайт на JavaScript: простой интерактивный пример без фреймво

Сайт на JavaScript обычно не означает «только JavaScript». Страница все равно состоит из HTML, CSS и JS: HTML дает структуру, CSS оформляет, JavaScript добавляет поведение. Для первого проекта можно сделать маленький сайт с карточками, которые добавляются по кнопке

Структура:

mini-site/
  index.html
  style.css
  script.js

Содержание

index.html
style.css
script.js
Что здесь делает JavaScript
Почему не начинать с React
Как улучшить проект
Вариант с начальными данными
Как проверять проект
Частые ошибки
Думать, что сайт делается только на JS
Забыть defer
Создавать HTML через длинные строки
Мини-задание
Что почитать дальше по JavaScript

index.html

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Сайт на JavaScript</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <main class="page">
    <h1>Мини-сайт на JavaScript</h1>
    <button id="addCard">Добавить карточку</button>
    <section id="cards" class="cards"></section>
  </main>
</body>
</html>

style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f4f6f8;
}

.page {
  max-width: 760px;
  margin: 40px auto;
  padding: 24px;
}

.cards {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.card {
  padding: 16px;
  background: white;
  border: 1px solid #d5dbe3;
}

script.js

const cards = document.querySelector("#cards");
const addCard = document.querySelector("#addCard");

let counter = 1;

function createCard(number) {
  const card = document.createElement("article");
  card.className = "card";

  const title = document.createElement("h2");
  title.textContent = `Карточка ${number}`;

  const text = document.createElement("p");
  text.textContent = "Эта карточка создана через JavaScript.";

  card.append(title, text);
  return card;
}

addCard.addEventListener("click", () => {
  const card = createCard(counter);
  cards.append(card);
  counter++;
});

Откройте index.html в браузере и нажмите кнопку. На странице должны появляться карточки

Что здесь делает JavaScript

JavaScript находит элементы:

document.querySelector("#cards")

создает новые HTML-элементы:

document.createElement("article")

добавляет текст:

title.textContent = "Карточка 1"

и вставляет карточку на страницу:

cards.append(card)

Это базовая логика многих интерфейсов: данные, создание элементов, добавление на страницу, реакция на действие пользователя

Почему не начинать с React

React, Vue и другие фреймворки полезны, но первый сайт лучше сделать без них. Так вы поймете DOM, события, querySelector, createElement, append и textContent. После этого фреймворки станут понятнее

Как улучшить проект

Добавьте:

кнопку удаления карточки;
поле ввода для текста карточки;
массив начальных карточек;
счетчик количества карточек;
сохранение в localStorage.

Не добавляйте все сразу. Делайте одно улучшение, проверяйте, потом следующее

Вариант с начальными данными

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

const initialCards = [
  "HTML создает структуру",
  "CSS отвечает за внешний вид",
  "JavaScript добавляет поведение"
];

initialCards.forEach((text, index) => {
  const card = createCard(index + 1);
  card.querySelector("p").textContent = text;
  cards.append(card);
});

Такой пример показывает важную идею: данные отдельно, отображение отдельно. Позже этот же принцип пригодится в React, Vue и других фреймворках

Как проверять проект

После каждого изменения проверяйте три вещи:

Страница открывается без ошибок в Console.
Кнопка добавляет новую карточку.
Верстка не ломается после нескольких кликов.

Если карточка не появляется, временно добавьте:

console.log(cards, addCard, counter);

Если cards или addCard равны null, проблема в id или порядке загрузки скрипта. Если элементы найдены, но карточки нет, проверяйте функцию createCard

Частые ошибки

Думать, что сайт делается только на JS

JavaScript не заменяет HTML и CSS. Он управляет поведением, но структура и оформление остаются важными

Забыть defer

Если script.js подключен в head без defer, элементы могут не найтись

Создавать HTML через длинные строки

Для первого проекта безопаснее createElement и append, чем большой innerHTML

Мини-задание

Добавьте input, чтобы пользователь вводил текст карточки сам. Если поле пустое, выводите карточку со стандартным текстом. Это закрепит value, условия и работу с DOM