Основы HTML, CSS и JavaScript для новичков

Любой сайт, от визитки до интернет-магазина, строится на трёх языках. Они отвечают за разное, и понять эту разницу — половина успеха на старте.

Язык	За что отвечает	Аналогия с домом
HTML	Структура и содержимое: заголовки, текст, картинки, ссылки	Стены и перегородки
CSS	Внешний вид: цвета, шрифты, отступы, расположение	Отделка и мебель
JavaScript	Поведение: реакции на клики, формы, анимации, данные	Электричество и сантехника

Без HTML нет страницы. Без CSS она выглядит как документ 90-х. Без JavaScript она ничего не делает в ответ на действия человека.

Что понадобится

Дорогих программ не нужно:

Браузер: Chrome, Firefox или любой другой.
Редактор кода, например VS Code. Он бесплатный.
Папка на компьютере, в которой будут лежать ваши файлы.

Откройте в папке три файла: index.html, style.css и app.js. Сейчас они пустые, но скоро мы их заполним.

HTML: структура страницы

HTML состоит из тегов. Тег обычно парный: открывающий <p> и закрывающий </p>, а между ними находится содержимое. Теги можно вкладывать друг в друга, так получается дерево страницы.

Вставьте в 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>
    <h1>Привет, мир!</h1>
    <p>Это <strong>моя</strong> первая страница.</p>
    <a href="https://developer.mozilla.org/ru/">Учиться дальше</a>
    <script src="app.js"></script>
  </body>
</html>

Откройте файл в браузере двойным щелчком, и страница уже работает. Разберём главное:

<head> хранит служебную информацию: кодировку, заголовок вкладки, подключаемые стили. На странице всё это не видно.
<body> — то, что видит посетитель.
<h1> — главный заголовок. Он должен быть один на странице, дальше идут <h2>, <h3> и так далее.
<p> — абзац, <a> — ссылка, <strong> — важный текст.
Скрипт подключён в конце <body>, чтобы к моменту его запуска вся страница уже была загружена.

Полезные теги, которые вы будете использовать постоянно: <img> для картинок, <ul> и <li> для списков, <button> для кнопок, <div> как нейтральный контейнер и <header>, <main>, <footer> для смысловых частей страницы.

Выбирайте тег по смыслу, а не по внешнему виду. Заголовок должен быть <h2>, даже если вам кажется, что он слишком крупный: размер потом легко поправит CSS.

CSS: оформление

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

Добавьте в style.css:

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  background: #f9fafb;
}

h1 {
  color: #0f766e;
}

.card {
  max-width: 420px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
}

Здесь три вида селекторов:

body и h1 выбирают элементы по названию тега;
.card выбирает всё, у чего есть атрибут class="card" (класс отмечается точкой);
#menu выбирал бы элемент с id="menu", но идентификаторы для стилей используют реже.

Классы — основной инструмент CSS. Вы даёте элементу имя в HTML (<div class="card">), а в CSS описываете, как выглядит всё с этим именем.

Блочная модель

Каждый элемент — прямоугольная коробка из четырёх слоёв: содержимое, внутренний отступ (padding), рамка (border) и внешний отступ (margin). Добавьте в начало файла эту строку, и размеры перестанут вас удивлять:

* {
  box-sizing: border-box;
}

С ней width включает отступы и рамку, а не прибавляет их сверху.

Расположение элементов

Чтобы выстроить элементы в ряд, используйте flexbox:

.row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

Три свойства покрывают большинство задач: display: flex включает режим, gap задаёт расстояние между элементами, justify-content и align-items выравнивают их по главной и поперечной осям.

JavaScript: поведение

JavaScript работает со страницей, пока она открыта. Вот основы, без которых не обойтись.

Переменные хранят значения:

const name = "Аня";   // не изменится
let count = 0;        // можно менять
count = count + 1;

Используйте const по умолчанию и let, только если значение действительно меняется.

Функции — это именованные наборы действий:

function greet(person) {
  return "Привет, " + person + "!";
}

console.log(greet(name)); // Привет, Аня!

console.log выводит значение в консоль браузера. Откройте её клавишей F12 на вкладке Console: это ваш главный помощник при поиске ошибок.

Условия и циклы позволяют принимать решения и повторять действия:

if (count > 5) {
  console.log("Много");
} else {
  console.log("Мало");
}

for (let i = 1; i <= 3; i++) {
  console.log("Шаг " + i);
}

DOM и события

Браузер превращает HTML в дерево объектов, которое называется DOM. JavaScript может найти любой элемент, изменить его и отреагировать на действия пользователя.

Практика: кнопка со счётчиком

Соберём всё вместе. Замените содержимое <body> в index.html, оставив подключение скрипта в конце:

<body>
  <div class="card">
    <h1>Счётчик</h1>
    <p>Нажатий: <strong id="value">0</strong></p>
    <div class="row">
      <button id="plus">Ещё раз</button>
      <button id="reset">Сбросить</button>
    </div>
  </div>
  <script src="app.js"></script>
</body>

Добавьте в style.css оформление кнопок:

button {
  padding: 10px 18px;
  font: inherit;
  color: #ffffff;
  background: #0f766e;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background: #115e59;
}

И напишите логику в app.js:

const value = document.querySelector("#value");
const plus = document.querySelector("#plus");
const reset = document.querySelector("#reset");

let count = 0;

function render() {
  value.textContent = count;
}

plus.addEventListener("click", () => {
  count = count + 1;
  render();
});

reset.addEventListener("click", () => {
  count = 0;
  render();
});

Что здесь происходит:

document.querySelector("#value") находит элемент по селектору, точно как в CSS.
addEventListener("click", …) говорит браузеру: «когда по этой кнопке щёлкнут, выполни функцию».
Функция меняет переменную и вызывает render(), которая записывает новое число в textContent.

Обновите страницу и нажимайте кнопки. Вы только что написали интерактивную страницу из трёх файлов, каждый из которых отвечает за своё.

Частые ошибки новичков

Забытый закрывающий тег. Страница «едет», а причину не видно. Ищите пропущенный </div>.
Опечатка в имени класса или файла. Стили не применяются, а ошибок нет. Проверьте, что class="card" совпадает с .card и что style.css лежит рядом с index.html.
Скрипт не находит элемент. Ошибка вида Cannot read properties of null обычно значит, что скрипт запустился раньше страницы или в селекторе опечатка.
Копирование без понимания. Набирайте код руками и меняйте значения: так вы быстрее увидите, за что отвечает каждая строка.

Что учить дальше

Не пытайтесь выучить всё сразу. Двигайтесь по кругу «прочитал, сделал, сломал, починил»:

Сверстайте страницу-визитку о себе: только HTML и CSS.
Освойте flexbox и grid, а также адаптивность: как страница выглядит на телефоне.
Сделайте несколько мини-проектов на JavaScript: список дел, калькулятор, викторину.
Научитесь пользоваться DevTools: инструментами разработчика в браузере (F12).
Изучите Git и выложите проекты на GitHub.

Лучший справочник по всему перечисленному — MDN Web Docs. Он бесплатный, точный и на русском.