Основы фронтенда за один вечер

HTML, CSS и JavaScript —
из чего сделан любой сайт

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

Начать с HTML Сразу в песочницу →

🦴

HTML — скелет

Что вообще есть на странице: заголовки, абзацы, картинки, кнопки, ссылки.

<h1>Привет</h1>

🎨

CSS — внешность

Как это выглядит: цвета, шрифты, отступы, расположение блоков, анимации.

h1 { color: crimson }

⚡

JavaScript — поведение

Что происходит при действиях пользователя: клики, ввод, запросы к серверу.

btn.onclick = () => …

Метафора для запоминания: HTML — это человек (есть голова, руки, ноги), CSS — это одежда и причёска, JavaScript — это умение двигаться и говорить. Человек без одежды выглядит странно, но живёт. Одежда без человека не стоит.

Технология 1

HTML — язык разметки

HyperText Markup Language — «язык разметки гипертекста»

HTML — это не язык программирования. В нём нет вычислений, условий и циклов. Его задача проще и важнее: взять текст и объяснить браузеру, чем является каждый кусок. Вот это — главный заголовок. Это — абзац. Это — картинка. Это — ссылка на другую страницу.

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

<a href="https://ya.ru">Ссылка</a>

Тег — что это за элемент (a = ссылка)
Атрибут — настройка элемента (href = куда ведёт)
Значение атрибута — всегда в кавычках
Содержимое — то, что увидит человек

Скелет любой HTML-страницы

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя страница</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это мой первый сайт.</p>
  <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html> — говорит браузеру: это современный HTML5.
<head> — служебная информация: кодировка, название вкладки, подключение CSS. Пользователь этого не видит.
<body> — всё видимое содержимое страницы.
<meta charset="utf-8"> — без этой строки русский текст может превратиться в «крякозябры».

Теги, которые нужны сразу

<h1>…<h6>Заголовки, от самого главного к мелким

<p>Абзац текста

<a href>Ссылка на другую страницу

<img src alt>Картинка (одиночный тег)

<ul> <li>Список и его пункты

<div>Блок-контейнер без особого смысла

<span>Кусочек внутри строки

<button>Кнопка

<input>Поле ввода

<table>Таблица

<form>Форма отправки данных

<header> <footer>Шапка и подвал — «смысловые» блоки

Частая ошибка новичка. Верстать всё через <div>. Браузеру и поисковикам это ни о чём не говорит. Если это заголовок — пишите <h1>, если навигация — <nav>. Такой подход называется семантической вёрсткой, и он же делает сайт доступным для незрячих людей, которые слушают страницу через скринридер.

Технология 2

CSS — язык стилей

Cascading Style Sheets — «каскадные таблицы стилей»

Голый HTML выглядит как документ из 1995 года: чёрный Times New Roman на белом фоне. CSS отвечает на вопрос «как это должно выглядеть»: цвет, размер, шрифт, отступы, границы, тени, расположение блоков на экране, анимации и адаптация под телефон.

Правило CSS состоит из селектора (кого стилизуем) и блока объявлений (что именно меняем).

.card { color: tomato; padding: 16px; }

Селектор — какие элементы страницы затронуть
Свойство — что меняем (цвет, отступ, шрифт)
Значение — на что меняем

Три главных селектора

style.css

/* 1. По тегу — все абзацы на странице */
p { line-height: 1.6; }

/* 2. По классу — элементы с class="card" (главный способ) */
.card { border-radius: 12px; background: #fff; }

/* 3. По id — один-единственный элемент с id="header" */
#header { position: sticky; top: 0; }

В HTML это выглядит так: <div class="card">…</div>. Классов у элемента может быть сколько угодно, id — уникален на всю страницу. На практике 95% стилей пишут через классы.

Блочная модель: почему всё «прыгает»

margin — внешний отступ

border — граница

padding — внутренний отступ

содержимое

Каждый элемент — это прямоугольник из четырёх слоёв. Половина проблем вёрстки («почему тут дырка?») решается пониманием разницы между margin (отталкивает соседей снаружи) и padding (раздвигает содержимое внутри).

Что означает «каскадные»

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

Живая демонстрация — нажимайте кнопки

Я блок

Получившийся CSS:

.box { }

Технология 3

JavaScript — язык программирования

Единственный язык, который браузер понимает без переводчика

Вот здесь начинается настоящее программирование: переменные, условия, циклы, функции. JavaScript оживляет страницу — он умеет реагировать на действия человека, менять HTML и CSS прямо во время работы, запрашивать данные с сервера без перезагрузки страницы, хранить информацию в браузере.

Всё, что на сайте происходит после загрузки — выпадающее меню, слайдер, проверка формы, корзина, чат, карта — это JavaScript.

Минимальный набор понятий

script.js

// Переменные — коробки для данных
let счёт = 0;              // let   — значение можно менять
const имя = "Арсений";     // const — менять нельзя

// Функция — упакованное действие, которое можно вызывать много раз
function поздравить(кого) {
  return "Привет, " + кого + "!";
}

// Условие — развилка
if (счёт > 10) {
  console.log("Много");
} else {
  console.log("Мало");
}

// Цикл — повторение
for (let i = 0; i < 3; i++) {
  console.log(поздравить(имя));
}

Главный навык: DOM и события

Когда браузер читает HTML, он строит из него дерево объектов — DOM (Document Object Model). JavaScript может взять из этого дерева любой элемент и изменить его. А события — это сигналы «пользователь что-то сделал»: click, input, submit, scroll.

Схема почти любого скрипта

// 1. Найти элемент в документе
const кнопка = document.querySelector("#myBtn");
const вывод  = document.querySelector("#out");

// 2. Подписаться на событие
кнопка.addEventListener("click", () => {
  // 3. Что-то изменить
  вывод.textContent = "Кнопку нажали!";
  вывод.classList.add("active");
});

Живая демонстрация — счётчик в шесть строк кода

Число выше меняет не перезагрузка страницы, а JavaScript.

JavaScript ≠ Java. Названия похожи по маркетинговым причинам 1995 года, а языки совершенно разные — примерно как «хомяк» и «хом-стейк». Не путайте на собеседовании.

Итог

Как они работают вместе

Что происходит за те полсекунды, пока грузится страница

Браузер скачивает HTML. Читает его сверху вниз и строит дерево DOM — структуру документа.
Находит <link rel="stylesheet">. Скачивает CSS и вычисляет, как каждый элемент должен выглядеть.
Рисует страницу. Считает размеры и позиции блоков, закрашивает пиксели — вы видите картинку.
Запускает <script>. JavaScript получает доступ к готовому DOM и подписывается на события.
Страница живёт. Клик → JS меняет DOM или классы → CSS перерисовывает → пользователь видит реакцию.

Сравнение в одной таблице

	HTML	CSS	JavaScript
Тип	язык разметки	язык стилей	язык программирования
Отвечает за	структуру и смысл	внешний вид	поведение и логику
Расширение файла	`.html`	`.css`	`.js`
Появился	1991	1996	1995
Обязателен?	да, всегда	формально нет	нет, но почти везде есть
Сложность старта	низкая	средняя	высокая
Пример строки	`<h1>Текст</h1>`	`h1 { color: red }`	`h1.onclick = f`

Практика

Песочница

Меняйте код слева — результат справа обновляется сразу

Результат

Это настоящая мини-версия работы фронтендера: три файла — один результат. Попробуйте поменять цвет в CSS или текст в HTML.

Проверка

Мини-тест

Пять вопросов — понять, что осело в голове

Что дальше

Маршрут новичка

HTML — неделя

Теги, атрибуты, семантика, формы, таблицы. Свёрстайте резюме одной страницей.

CSS — месяц

Селекторы, блочная модель, Flexbox и Grid, адаптивность через media-запросы.

JavaScript — долго

Синтаксис, DOM, события, массивы и объекты, асинхронность и fetch.

Инструменты

VS Code, Git и GitHub, панель разработчика в браузере (F12) — без них дальше никак.

Фреймворки

React, Vue или Svelte. Только после того, как чистый JS перестал пугать.

Где читать: MDN Web Docs — официальная документация; learn.javascript.ru — лучший учебник по JS на русском; HTML Academy — интерактивные тренажёры.

HTML, CSS и JavaScript —из чего сделан любой сайт

HTML — скелет

CSS — внешность

JavaScript — поведение

HTML — язык разметки

Скелет любой HTML-страницы

Теги, которые нужны сразу

CSS — язык стилей

Три главных селектора

Блочная модель: почему всё «прыгает»

Что означает «каскадные»

JavaScript — язык программирования

Минимальный набор понятий

Главный навык: DOM и события

Как они работают вместе

Сравнение в одной таблице

Песочница

Мини-тест

Маршрут новичка

HTML — неделя

CSS — месяц

JavaScript — долго

Инструменты

Фреймворки

HTML, CSS и JavaScript —
из чего сделан любой сайт