HTML, CSS и JavaScript: базовая веб-разработка и работа с DOM

Структура HTML-страницы и базовые теги

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

Из чего состоит HTML-документ

Любая страница в браузере — это документ с предсказуемой базовой структурой.

Тип документа

Корневой элемент документа

Секция метаданных

Секция содержимого

Обычно это описывают через элементы doctype, html, head и body.

!Дерево документа помогает понять, как браузер и JavaScript “видят” страницу

Элемент, тег и атрибут

Важно различать базовые термины:

Тег — запись, которая обозначает начало или конец элемента (например, “тег p”).

Элемент — смысловая единица страницы: заголовок, абзац, ссылка, изображение.

Атрибут — дополнительная информация об элементе (например, идентификатор, адрес ссылки, путь к изображению).

Примеры распространённых атрибутов:

id — уникальное имя элемента на странице.

class — имя группы (класса), которое можно повторять у многих элементов.

href — адрес, на который ведёт ссылка.

src — путь к файлу (например, изображению).

alt — текстовое описание изображения (важно для доступности и случаев, когда картинка не загрузилась).

Роль doctype

doctype сообщает браузеру, по какому стандарту интерпретировать документ. В современной веб-разработке это нужно, чтобы браузер работал в стандартном режиме и одинаково обрабатывал разметку.

Подробно: MDN: doctype

Корневой элемент документа

html — корневой элемент, внутри которого находятся head и body. Он задаёт “контейнер” для всего остального.

Часто у него указывают атрибут языка документа (например, русский). Это помогает поисковикам, переводчикам, скринридерам и другим инструментам корректно обрабатывать текст.

Подробно: MDN: html

head: метаданные и подключения

head — это служебная часть документа. Здесь обычно находится информация, которая важна для браузера, поисковых систем и подключения ресурсов, но не является “видимым содержимым страницы”.

Типичные элементы в head:

title — заголовок вкладки браузера.

meta charset — кодировка документа (часто UTF-8).

meta viewport — настройки отображения на мобильных устройствах.

link — подключение CSS-файлов и других ресурсов.

script — подключение JavaScript-файлов (или встроенный код).

Подробно:

MDN: head

MDN: meta

MDN: link

MDN: title

body: всё видимое содержимое

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

Подробно: MDN: body

Базовые текстовые элементы

С них чаще всего начинается любая страница.

h1–h6 — заголовки (от самого важного к менее важным).

p — абзац.

br — перенос строки (используется точечно, не для “верстки”).

strong — логически важный фрагмент (обычно отображается жирным).

em — фрагмент с акцентом (обычно отображается курсивом).

Подробно: MDN: текстовые элементы

Списки

Списки помогают структурировать информацию.

ul — маркированный список.

ol — нумерованный список.

li — элемент списка.

Подробно: MDN: ul

Ссылки и изображения

Эти элементы встречаются почти на каждой странице.

a — ссылка (адрес задаётся атрибутом href).

img — изображение (путь задаётся атрибутом src, текстовое описание — alt).

Подробно:

MDN: a

MDN: img

Контейнеры и семантические блоки

Чтобы собирать элементы в логические части страницы, используют контейнеры.

div — универсальный контейнер без семантики.

span — универсальный строчный контейнер без семантики.

Но для читаемой структуры страницы лучше использовать семантические элементы (они описывают смысл блока):

header — шапка страницы или секции.

nav — навигация.

main — основное содержимое (обычно один на странице).

section — смысловой раздел.

article — самостоятельный материал (пост, статья, карточка).

aside — боковой блок (дополнительная информация).

footer — подвал страницы или секции.

Подробно: MDN: семантические элементы

Вложенность и порядок: главное правило структуры

HTML-структура похожа на дерево: элементы могут содержать другие элементы. Это называется вложенность.

Практические правила:

Закрывайте элементы в обратном порядке их открытия (так структура остаётся корректной).

Не “пересекайте” элементы (когда один элемент начался внутри другого, но закончился снаружи).

Следите за логикой: заголовок описывает секцию, секция содержит абзацы и списки, список содержит элементы списка.

Именно корректная вложенность позволяет:

CSS точно выбирать нужные части страницы.

JavaScript находить элементы и управлять ими.

Браузеру и вспомогательным технологиям (скринридерам) правильно понимать документ.

DOM: как браузер превращает разметку в объектную модель

Когда браузер загружает страницу, он строит DOM (Document Object Model) — объектное представление документа в виде дерева. Каждый элемент становится узлом, к которому можно обратиться из JavaScript.

Почему это важно для курса:

Чтобы повесить обработчик на кнопку, JavaScript должен найти соответствующий узел DOM.

Чтобы открыть модалку, нужно изменить состояние DOM: добавить/удалить элемент, поменять классы, переключить видимость.

Подробно: MDN: DOM

Мини-шаблон структуры страницы (без кода)

Держите в голове минимальную “формулу” страницы:

В следующих темах вы начнёте оформлять эту структуру стилями (CSS), а затем научитесь выбирать элементы по id и class и управлять ими через JavaScript и DOM.

Формы, ссылки, изображения и семантическая разметка

На предыдущем шаге вы разобрали базовую структуру документа и идею DOM: браузер превращает разметку в дерево узлов, с которыми можно работать из JavaScript. Теперь добавим элементы, без которых сложно представить реальную страницу: ссылки, изображения, формы и семантические блоки. Эти элементы важны сразу для трёх вещей:

Пользовательского сценария (перейти, отправить, увидеть).

Доступности (скринридеры, клавиатурная навигация).

Работы с DOM (найти элемент, повесить обработчик, изменить состояние).

!Каркас страницы с семантическими областями

Ссылки

Ссылка — это элемент навигации. Она может вести:

на другую страницу сайта

на внешний сайт

на секцию внутри текущей страницы

на файл (например, PDF)

Что важно у ссылок

href — адрес назначения.

Текст ссылки должен быть понятным сам по себе.

Плохой текст ссылки:

Жми сюда

Хороший текст ссылки:

Документация по атрибуту href

Абсолютные и относительные адреса

Абсолютный адрес содержит протокол и домен (подходит для внешних сайтов).

Относительный адрес считается от текущего пути (удобно внутри проекта).

Пример (в виде идеи, без разметки):

Ссылки, которые открываются в новой вкладке

Если ссылка открывается в новой вкладке (часто это делают для внешних сайтов), обычно используют:

target со значением _blank

rel со значением noopener

Зачем нужен rel со значением noopener:

он уменьшает риск небезопасного взаимодействия между вкладками

Подробно:

MDN: a

MDN: rel=noopener

Якорные ссылки (переход к месту на странице)

Якорная ссылка ведёт на элемент с нужным id. Это полезно для оглавлений, FAQ, длинных лендингов.

Принцип:

у цели есть id

в ссылке href указывает на #id

Связь с DOM:

JavaScript может находить секции по id и прокручивать страницу программно (позже вы сделаете это в практике).

Изображения

Изображение на странице — это не только визуальный контент, но и часть доступности, скорости загрузки и качества интерфейса.

Главные атрибуты

| Атрибут | Зачем нужен | Практическое правило | |---|---|---| | src | путь к файлу изображения | используйте понятные пути и имена файлов | | alt | текстовая замена изображения | описывайте смысл изображения, а не «картинка» | | width, height | размеры | помогают браузеру зарезервировать место и избежать “прыжков” макета |

Подробно:

MDN: img

MDN: alt

Как писать хороший alt

alt читают скринридеры и показывают браузеры, если файл не загрузился.

Рекомендации:

Если картинка передаёт смысл, опишите смысл.

Если картинка чисто декоративная, alt делают пустым (это отдельная практика доступности, к ней ещё вернёмся в теме про UI).

Примеры хороших описаний:

Фото: команда из трёх человек за ноутбуком

Иконка поиска

Форматы изображений (базовая ориентировка)

JPEG — фотографии, сложные градиенты

PNG — прозрачность, когда нужна без артефактов

SVG — иконки и графика, которые должны масштабироваться

WebP — современный формат, часто меньше по размеру

Подробно:

MDN: Image file type and format guide

Формы

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

!Основные части формы и связь подписи с полем

Из чего состоит форма

контейнер формы form

поля ввода (например, input, textarea, select)

подписи к полям label

кнопка действия button

Ключевая идея: подпись должна быть связана с полем. Тогда:

удобно кликать по подписи (фокус перейдёт в поле)

скринридеру проще объяснить пользователю, что именно вводить

Подробно:

MDN: form

MDN: label

Как форма отправляет данные

У формы обычно есть два важных атрибута:

action — куда отправлять данные (адрес обработчика)

method — как отправлять данные

Чаще всего встречаются методы:

get — данные попадают в адресную строку (удобно для поиска и фильтров)

post — данные отправляются в теле запроса (обычно для логина, регистрации, отправки сообщений)

Важно понимать для практики DOM:

при отправке формы браузер по умолчанию пытается перейти на страницу из action

в JavaScript часто отменяют это поведение и обрабатывают данные сами (валидация, запрос через API, показ модалки)

Подробно:

MDN: method

Поля ввода и их типы

input поддерживает разные типы. Тип влияет на:

клавиатуру на мобильных

встроенную проверку браузера

удобство пользователя

Популярные типы:

text — обычный текст

email — email (браузер может подсказать формат)

password — пароль

number — числа

checkbox — флажок

radio — выбор одного варианта

file — загрузка файла

Подробно:

MDN: input

Имя поля и значение

Чтобы данные поля «имели смысл» при отправке, у поля обычно есть:

name — ключ, под которым уйдёт значение

value — само значение (для текстовых полей пользователь вводит его, а для некоторых элементов оно задаётся заранее)

Связь с JavaScript и DOM:

JS читает значения полей и принимает решения (показать ошибку, открыть модалку, отправить запрос)

чаще всего значения читают при событии отправки формы или при вводе

Подробно:

MDN: HTMLFormElement

Кнопки и их поведение

У button есть важный атрибут type. Он определяет поведение кнопки внутри формы.

| type | Что делает по умолчанию | Когда использовать | |---|---|---| | submit | отправляет форму | кнопка “Отправить”, “Сохранить” | | button | ничего не отправляет | открыть модалку, переключить состояние, запустить JS | | reset | сбрасывает форму | используется редко, может раздражать пользователя |

Подробно:

MDN: button

Встроенная валидация браузера

HTML позволяет задать часть правил без JavaScript:

required — обязательное поле

minlength, maxlength — длина

min, max — диапазон (для чисел и дат)

pattern — шаблон (регулярное выражение)

Практический подход для начинающих:

начните со встроенных атрибутов

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

Подробно:

MDN: Constraint validation

Семантическая разметка

Семантика — это разметка, которая описывает смысл блоков. Это помогает:

поисковым системам лучше понимать страницу

скринридерам строить понятную навигацию

разработчикам быстрее читать структуру

Основные семантические блоки

header — шапка страницы или раздела

nav — блок навигации

main — основное содержание страницы

section — смысловой раздел

article — самостоятельный материал (карточка товара, пост)

aside — дополнительная информация (сайдбар)

footer — подвал

Подробно:

MDN: Semantics

MDN: HTML elements reference

Семантика внутри форм

Для форм тоже есть полезные семантические элементы:

fieldset — объединяет связанные поля (например, “Доставка”)

legend — заголовок группы полей

Это повышает понятность формы и доступность.

Подробно:

MDN: fieldset

MDN: legend

Как всё это связано с DOM и будущим JavaScript

На практике вы будете делать типовые UI-сценарии:

клик по ссылке меняет состояние интерфейса (например, открывает модалку вместо перехода)

кнопка открывает и закрывает модальное окно

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

Чтобы это работало предсказуемо:

выбирайте элементы по id и class осмысленно

используйте правильные типы кнопок (submit и button)

не забывайте о alt у изображений и о связке label с полем

Это создаёт прочную основу для следующих тем курса: CSS-оформления интерфейса и JavaScript-работы с событиями и изменениями DOM.

CSS: селекторы, каскад, Box Model и позиционирование

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

Важная связка для всего курса:

HTML задаёт что находится на странице

CSS задаёт как это выглядит

JavaScript (позже) будет менять состояние интерфейса, часто через добавление и удаление class

Чтобы уверенно верстать и дальше работать с DOM, нужно понять 4 основы:

селекторы

каскад и специфичность

Box Model

позиционирование

Как подключается CSS

CSS обычно подключают отдельным файлом. Тогда браузер применяет стили ко всем подходящим элементам на странице.

Рекомендация для обучения и проектов:

держите стили в отдельном файле

давайте классам понятные имена, которые отражают смысл элемента и состояния

Полезная справка: MDN: начало работы с CSS

Селекторы: как выбрать элемент

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

Базовые селекторы

| Что выбираем | Пример селектора | Когда использовать | |---|---|---| | по тегу | button | быстрые базовые стили для всех элементов одного типа | | по классу | .card | основной способ стилизовать компоненты | | по id | #modal | для уникальных элементов, но обычно осторожно из-за высокой специфичности | | по атрибуту | [type="email"] | удобно для форм и точечных случаев |

Справка: MDN: CSS селекторы

Комбинации и отношения

Часто нужно выбрать элементы в зависимости от их места в структуре HTML.

| Задача | Селектор | Смысл | |---|---|---| | элементы внутри блока | .form input | все input внутри элемента с классом form | | только прямые дети | .list > li | только li, которые являются непосредственными детьми .list | | сосед сразу после | h2 + p | первый p сразу после h2 | | любые соседи после | h2 ~ p | все p, которые идут после h2 на том же уровне |

Псевдоклассы: состояние элемента

Псевдоклассы помогают оформить реакции интерфейса.

:hover — когда навели мышь

:focus — когда элемент в фокусе (важно для клавиатуры)

:disabled — когда элемент отключён

:checked — для отмеченных checkbox и radio

Пример:

Справка: MDN: псевдоклассы

Псевдоэлементы: часть элемента

Псевдоэлементы создают виртуальную часть элемента для оформления.

::before

::after

Пример: добавить маркер перед пунктом:

Справка: MDN: псевдоэлементы

Каскад: почему применился именно этот стиль

CSS расшифровывается как Cascading Style Sheets. Каскад — это набор правил, по которым браузер решает конфликты: что делать, если на один и тот же элемент подходят несколько правил.

!Иллюстрация того, как браузер выбирает итоговый стиль

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

Источник стилей

Специфичность селектора

Порядок следования в коде

На базовом уровне вам достаточно запомнить практическое правило:

если два правила конфликтуют, чаще всего побеждает то, которое более конкретное (специфичнее)

если конкретность одинаковая, побеждает то, которое написано ниже в файле

Справка: MDN: каскад

Специфичность (простыми словами)

Специфичность — это “вес” селектора.

Упрощённая шкала, которая полезна новичкам:

селектор по тегу button — низкая специфичность

селектор по классу .button — выше

селектор по id #saveButton — очень высокая

Практический вывод:

строить стили на классах обычно удобнее

id лучше не использовать для повседневного оформления, иначе позже становится сложно переопределять стили

Справка: MDN: специфичность

Переопределение стилей и состояния через классы

Это напрямую связано с будущим JavaScript и DOM: чаще всего скрипт не меняет отдельные CSS-свойства, а переключает классы состояния.

Пример логики:

есть кнопка и модалка

у модалки есть класс состояния .is-open

JavaScript добавляет или убирает .is-open

CSS для такого подхода:

Box Model: из чего “состоит” элемент

Чтобы уверенно верстать, важно понимать, как браузер рассчитывает размеры.

Box Model — это модель коробки, из которой состоит каждый элемент:

content — содержимое

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

border — рамка

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

!Наглядная схема слоёв элемента в CSS

Справка: MDN: box model

Важные свойства Box Model

width, height — размеры (по умолчанию относятся к области content)

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

border — рамка

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

Пример:

Почему элементы “становятся больше”, чем вы ожидаете

По умолчанию width не включает padding и border. Поэтому блок может занимать больше места, чем указанная ширина.

Чтобы сделать размеры более предсказуемыми, часто используют:

С border-box значение width включает content, padding и border.

Справка: MDN: box-sizing

Margin и схлопывание внешних отступов

У вертикальных margin есть особенность: иногда они “схлопываются” и превращаются в один отступ, а не суммируются. Это чаще встречается у блочных элементов, например у двух соседних абзацев.

На старте курса достаточно помнить практику:

если видите “странные” вертикальные отступы между блоками, проверьте margin соседних элементов

Справка: MDN: margin collapsing

Нормальный поток документа и display

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

блочные элементы (например, секции, абзацы) обычно идут друг под другом

строчные элементы (например, части текста) идут внутри строки

Свойство display управляет тем, как элемент участвует в потоке.

Популярные значения для базового уровня:

block

inline

inline-block

none

Пример:

Справка: MDN: display

Позиционирование: как управлять размещением

Позиционирование отвечает на вопрос: где именно на странице находится элемент и как он смещается относительно других.

Справка: MDN: position

position: static

static — значение по умолчанию. Элемент находится в нормальном потоке, свойства top, left, right, bottom не работают.

position: relative

Элемент остаётся в потоке, но вы можете смещать его визуально.

место под элементом сохраняется

удобно для маленьких “подвинуть на пару пикселей” и для создания “контекста” под absolute

position: absolute

Элемент выпадает из нормального потока и позиционируется относительно ближайшего предка, у которого position не static (обычно relative).

Типовой паттерн: бейдж на карточке.

position: fixed

Элемент фиксируется относительно окна браузера и не двигается при прокрутке.

Пример: закреплённая кнопка.

position: sticky

Комбинация поведения relative и fixed:

пока элемент в пределах родителя, он ведёт себя как обычный

при прокрутке “прилипает” к заданной границе

Частый пример: липкая шапка таблицы или панели фильтров.

Справка: MDN: sticky

z-index и перекрытие элементов

Если элементы перекрываются, порядок по слоям может управляться через z-index, но он работает только у позиционированных элементов (например, relative, absolute, fixed, sticky).

Справка: MDN: z-index

Как это пригодится дальше в JavaScript и DOM

Когда вы перейдёте к JavaScript, вы будете постоянно использовать связку:

найти элемент по классу или id

повесить обработчик события на кнопку

изменить состояние интерфейса, добавив или удалив class

Поэтому уже сейчас полезная привычка:

оформляйте компоненты через классы

делайте отдельные классы для состояний, например .is-open, .is-error, .is-hidden

избегайте избыточной специфичности, чтобы стили легко переопределялись

Следующий шаг курса обычно — отработка верстки компонентов (карточки, шапка, форма) и подготовка структуры классов так, чтобы JavaScript мог удобно управлять DOM.

CSS: Flexbox, Grid и адаптивная вёрстка

В прошлой теме вы разобрали селекторы, каскад, Box Model и позиционирование. Теперь добавим ключевой навык, без которого сложно сверстать современный интерфейс: раскладку элементов.

В CSS есть два основных инструмента для раскладки:

Flexbox — удобен для одномерной раскладки: либо по строке, либо по колонке

Grid — удобен для двумерной раскладки: сразу строки и колонки

А чтобы страница выглядела хорошо на телефоне и на широком экране, мы добавим адаптивную вёрстку: медиазапросы, гибкие размеры и практичные правила.

!Схема: Flexbox управляет одной осью, Grid — двумя

Flexbox

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

Главная идея Flexbox

Есть flex-контейнер (родитель)

Есть flex-элементы (дети)

Контейнер задаёт правила раскладки, а элементы подстраиваются

Справка: MDN: Basic concepts of flexbox

Оси: main axis и cross axis

В Flexbox важнее всего понять две оси:

главная ось зависит от flex-direction

поперечная ось перпендикулярна главной

flex-direction:

row — главная ось слева направо

column — главная ось сверху вниз

Минимальный набор свойств для контейнера

display: flex включает Flexbox

flex-direction задаёт направление главной оси

gap задаёт расстояние между элементами без "магии" с margin

Справка: MDN: gap

Выравнивание и распределение

Два ключевых свойства:

justify-content — распределяет элементы вдоль главной оси

align-items — выравнивает элементы вдоль поперечной оси

Пример: элементы в строку, с разносом по краям и выравниванием по центру:

Полезные значения justify-content:

flex-start

center

space-between

space-around

space-evenly

Справка: MDN: justify-content

Перенос на новую строку

По умолчанию элементы стараются уместиться в одну линию. Для переносов:

Справка: MDN: flex-wrap

Управление размером элементов: flex-grow, flex-shrink, flex-basis

Частая задача: один элемент должен занимать всё свободное место, а другие быть по содержимому.

Пример:

flex — сокращение для трёх параметров:

flex-grow — может ли элемент расти

flex-shrink — может ли элемент сжиматься

flex-basis — базовый размер до распределения пространства

Справка: MDN: flex

Когда Flexbox — лучший выбор

навигация в шапке

горизонтальный ряд кнопок

выравнивание иконки и текста

список карточек с переносом

раскладка "лейбл слева, значение справа"

Grid

Grid отвечает на вопрос: как построить сетку из колонок и строк и разложить элементы по ячейкам.

Справка: MDN: Basic concepts of grid layout

Главная идея Grid

Есть grid-контейнер

Вы задаёте колонки и строки

Элементы автоматически попадают в ячейки или размещаются по правилам

Минимальный пример сетки из трёх колонок:

1fr — доля свободного пространства

repeat(3, 1fr) — три одинаковые колонки

Справка: MDN: grid-template-columns

Адаптивная сетка без точных брейкпоинтов

Один из самых практичных паттернов для карточек:

Что это значит:

minmax(220px, 1fr) говорит: колонка не меньше 220px, но может растягиваться

auto-fit говорит: браузер сам решит, сколько колонок поместится

Справка:

MDN: minmax()

MDN: repeat()

Размещение элементов и области (areas)

Grid удобен, когда у макета есть понятные зоны: шапка, контент, сайдбар, подвал.

Справка: MDN: grid-template-areas

Когда Grid — лучший выбор

страница с сайдбаром и основной колонкой

галерея или каталог карточек

сложные сетки, где важны и строки, и колонки

раскладки, похожие на таблицу, но без табличной разметки

Flexbox или Grid: как выбрать

| Задача | Лучше подходит | Почему | |---|---|---| | выровнять кнопку и иконку в одну линию | Flexbox | один ряд и выравнивание по центру | | разложить карточки в адаптивную сетку | Grid | удобно управлять колонками и шириной ячеек | | сделать шапку с логотипом слева и кнопками справа | Flexbox | простое распределение пространства | | сделать макет страницы с сайдбаром | Grid | явные области и две оси | | сделать список с переносом по строкам | Flexbox или Grid | зависит от требований к ширине ячеек |

Адаптивная вёрстка

Адаптивность означает, что интерфейс подстраDо выглядит и работает на разных ширинах экрана.

Практическая цель для базового уровня:

контент не вылезает за экран

текст читается

элементы управления не слишком маленькие

сетки перестраиваются

Справка: MDN: Responsive design

Базовые правила, которые почти всегда нужны

max-width для ограничение ширины контента

гибкие внутренние отступы

сетки, которые умеют перестраиваться

Пример контейнера страницы:

max-width не даёт строкам становиться слишком длинными

margin: 0 auto центрует контейнер

padding даёт отступы на маленьких экранах

Медиазапросы (media queries)

Медиазапрос позволяет применить стили только при определённой ширине.

Справка: MDN: @media

Типичный подход к брейкпоинтам

Не пытайтесь угадать "идеальные" числа. На базовом уровне работает практическое правило:

выбирайте брейкпоинт там, где интерфейс начинает выглядеть плохо

сначала делайте просто читаемо и функционально

Гибкие единицы измерения

Для адаптивности часто используют:

% для ширин контейнеров

fr в Grid

rem для размеров, зависящих от базового размера шрифта

Справка: MDN: CSS values and units

Частая проблема: переполнение

Если карточка или картинка "раздвигает" макет, проверьте:

есть ли у блоков ограничение ширины

не задана ли фиксированная ширина больше контейнера

Практичное правило для медиа внутри контента:

Связь с JavaScript и DOM

Вы уже видели идею классов состояния в прошлой статье. Она особенно полезна для адаптивных и интерактивных компонентов:

CSS описывает как выглядит состояние

JavaScript переключает класс состояния

Типовые классы:

.is-open

.is-hidden

.is-active

Пример (идея):

Адаптивность обычно делается через @media, а интерактивность через классы. Это две независимые оси, которые хорошо сочетаются.

Практические рекомендации по стилю кода

выбирайте Flexbox для простых рядов и выравнивания

выбирайте Grid для сеток и макетов страницы

используйте gap, чтобы управлять расстояниями между элементами

делайте классы понятными по смыслу, чтобы потом удобно работать с DOM

избегайте лишней специфичности, чтобы медиазапросы и состояния легко переопределяли стили

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

JavaScript основы: переменные, функции, условия и циклы

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

Практическая цель этого урока — научиться писать простую логику, которая позже будет управлять интерфейсом через DOM:

хранить данные (например, открыта ли модалка)

описывать действия (например, открыть модалку)

принимать решения (например, если поле пустое — показать ошибку)

повторять действия (например, пройти по списку карточек)

Как JavaScript попадает на страницу

Обычно JavaScript подключают отдельным файлом и выполняют в браузере.

Практическое правило для старта:

пишите код в отдельном файле

подключайте его так, чтобы он выполнялся после загрузки HTML (позже в DOM-теме вы разберёте это подробнее)

Справка: MDN: JavaScript

Переменные и значения

Переменная — это имя, под которым вы храните значение (число, строку, объект и так далее).

В современном JavaScript чаще всего используются два способа объявить переменную:

const — значение нельзя переназначить

let — значение можно переназначить

const

const подходит, когда вы не планируете присваивать переменной новое значение.

Важно: const запрещает переназначение переменной, но не делает значение “замороженным”. Например, объект можно менять по свойствам (это отдельная тема, к ней ещё вернёмся).

let

let подходит для состояния, которое меняется.

Справка: MDN: let, MDN: const

Типы данных (то, с чем вы работаете)

На базовом уровне вам важны следующие типы:

string — строка, например "Привет"

number — число, например 42

boolean — логическое значение true или false

null — “значение отсутствует намеренно”

undefined — “значение не задано”

object — объект (включая массивы)

Справка: MDN: Data types

Преобразование в boolean: truthy и falsy

В условиях JavaScript часто приводит значения к true или false автоматически.

Часто встречающиеся falsy значения (при проверке в if дают false):

false

0

"" (пустая строка)

null

undefined

NaN

Почти всё остальное — truthy.

Пример, который позже пригодится при проверке формы:

Справка: MDN: Truthy, MDN: Falsy

Операторы: как строится выражение

Операторы — это “действия” над значениями.

Присваивание

= присваивает значение

Сравнение

В реальной разработке почти всегда используйте строгие сравнения:

=== строго равно (сравнивает и тип, и значение)

!== строго не равно

Справка: MDN: Equality comparisons

Логические операторы

&& И

|| ИЛИ

! НЕ

Пример типовой проверки:

Справка: MDN: Logical operators

Функции: действия, которые можно переиспользовать

Функция — это кусок кода, который можно вызвать по имени, передать ему данные и получить результат.

Это ключ к взаимодействию с DOM: позже вы будете писать функции вроде openModal(), closeModal(), validateForm().

Объявление функции

a и b — параметры

return возвращает результат (и завершает выполнение функции)

Справка: MDN: Function

Функциональное выражение

Функцию можно сохранить в переменную.

Стрелочная функция

Часто используется в обработчиках событий и коротких колбэках.

Если тело состоит из одного выражения, можно короче:

Справка: MDN: Arrow function expressions

Область видимости (scope)

Область видимости отвечает на вопрос: где доступна переменная.

переменные, объявленные внутри блока { ... } с let и const, видны только внутри этого блока

переменные, объявленные внутри функции, видны только внутри функции

Справка: MDN: Scope

Условия: как принимать решения

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

!Визуальная схема ветвления if/else

if / else

else if

Тернарный оператор

Короткая форма, когда нужно выбрать одно из двух значений.

Справка: MDN: Conditional (ternary) operator

Циклы: как повторять действия

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

перебрать список элементов и навесить обработчики

собрать данные формы

обновить текст в нескольких местах

for

Когда известно, сколько раз повторять.

Здесь:

let i = 0 — старт

i < 3 — условие продолжения

i += 1 — шаг после каждой итерации

Справка: MDN: for

while

Когда количество повторений заранее неизвестно.

Справка: MDN: while

Перебор массива: for...of

Удобный вариант, чтобы пройти по значениям массива.

Справка: MDN: for...of

break и continue

break завершает цикл полностью

continue пропускает текущую итерацию и продолжает цикл

Справка: MDN: break, MDN: continue

Мини-подготовка к DOM: состояние и “классы состояния”

В CSS-части курса вы уже использовали идею классов состояния вроде .is-open, .is-hidden. В JavaScript вы обычно:

храните состояние в переменной

в зависимости от состояния выполняете действия

Пример логики (пока без реального DOM):

В следующей теме вы сделаете то же самое, но вместо console.log будете реально:

находить DOM-элементы

добавлять и удалять классы

реагировать на клики по кнопкам через события

Ключевые выводы

const — по умолчанию, let — когда нужно переназначение

функции помогают переиспользовать действия и строить интерфейсную логику

if / else и тернарный оператор позволяют принимать решения

циклы (for, while, for...of) позволяют повторять действия и обходить массивы

эти основы напрямую понадобятся для работы с DOM: обработчики кликов, модалки, валидация форм и переключение классов

DOM: поиск элементов, изменение, атрибуты и стили

DOM (Document Object Model) — это объектное представление страницы, которое браузер строит на основе HTML. В прошлых темах вы уже заложили основу:

HTML описывает структуру

CSS описывает внешний вид и состояния через классы вроде .is-open

JavaScript описывает логику

В этой теме вы соедините всё вместе: научитесь находить элементы на странице, менять их содержимое и состояние, работать с атрибутами и управлять классами и стилями.

!Дерево DOM и типовые операции: поиск узла и переключение класса состояния

Как JavaScript получает доступ к DOM

В браузере у вас есть глобальный объект document. Через него обычно и начинается работа:

поиск элементов

создание новых элементов

чтение и изменение атрибутов

управление классами и стилями

подписка на события

Важно, чтобы код выполнялся после того, как нужные элементы уже существуют в DOM. Для базового уровня есть два практичных подхода:

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

Или дождаться события DOMContentLoaded.

Пример ожидания DOM:

Документация: DOMContentLoaded

Поиск элементов

Самые полезные методы поиска

Чаще всего используют селекторы CSS — это напрямую связывает DOM с тем, что вы уже прошли в CSS.

| Задача | Метод | Что возвращает | |---|---|---| | найти первый элемент по CSS-селектору | document.querySelector() | элемент или null | | найти все элементы по CSS-селектору | document.querySelectorAll() | коллекцию NodeList | | найти по идентификатору | document.getElementById() | элемент или null |

Документация:

querySelector

querySelectorAll

getElementById

querySelector и querySelectorAll

querySelector ищет первое совпадение.

querySelectorAll возвращает список совпадений.

querySelectorAll возвращает NodeList. Его можно перебрать циклом for...of.

Поиск внутри элемента

Можно искать не только от document, но и от конкретного узла. Это делает код точнее.

Практическое правило: сужайте область поиска, когда это логично.

Проверка результата поиска

Если элемент не найден, методы вернут null (или пустой NodeList). Поэтому перед использованием полезно проверять.

Изменение содержимого элементов

Текст: textContent

Самый безопасный способ поменять текст — textContent.

textContent вставляет именно текст, а не разметку, поэтому он удобен для сообщений, статусов, ошибок формы.

Документация: textContent

Значения полей формы

У элементов ввода есть свойство value.

Частые сценарии:

прочитать значение при отправке формы

очистить поле после успешного действия

Документация: HTMLInputElement.value

Создание и вставка элементов

Когда нужно добавить что-то на страницу (например, новую карточку или сообщение об ошибке), элементы создают через document.createElement.

Полезные методы вставки:

append добавляет в конец

prepend добавляет в начало

remove удаляет узел

Документация:

createElement

append

remove

Атрибуты и data-атрибуты

Атрибуты в HTML и DOM-свойства в JavaScript — связанные вещи, но не одно и то же. На базовом уровне запомните практику:

для произвольных атрибутов используйте getAttribute и setAttribute

для специальных сценариев используйте удобные свойства (например, value, disabled)

getAttribute и setAttribute

Документация:

getAttribute

setAttribute

dataset: удобный доступ к data-атрибутам

data-* атрибуты полезны, когда нужно хранить на элементе небольшие данные для скрипта: идентификатор, тип, состояние, цену.

В JavaScript они доступны через element.dataset.

Документация: dataset

Классы и состояния: лучший способ управлять UI

В предыдущих темах по CSS вы уже использовали идею классов состояния:

.is-open

.is-hidden

.is-active

.is-error

Это ключевой паттерн для работы с DOM: CSS описывает состояние, JavaScript переключает класс.

classList

Основные методы:

add добавить класс

remove убрать класс

toggle переключить

contains проверить наличие

Документация: classList

Связка с событиями

Типовой сценарий кнопка открывает модалку выглядит так:

Документация: addEventListener

Стили: когда нужны, а когда лучше класс

Есть два основных подхода:

Переключать классы и держать стили в CSS.

Менять инлайн-стили через element.style.

Практическое правило:

для интерфейсных состояний почти всегда лучше классы

инлайн-стили полезны для динамических чисел, которые сложно заранее описать в CSS (например, позиция, размеры в пикселях, рассчитанные скриптом)

element.style

Важно:

свойства пишутся в формате camelCase

инлайн-стили имеют высокий приоритет и могут мешать каскаду

Документация: HTMLElement.style

Чтение вычисленных стилей

getComputedStyle возвращает итоговый стиль, который применился после каскада.

Документация: getComputedStyle

Мини-набор практик, чтобы код был устойчивым

Проверяйте результат querySelector, если элемент может отсутствовать.

Старайтесь не завязываться на сложные селекторы, используйте понятные классы.

Для UI-состояний переключайте классы, а не отдельные CSS-свойства.

Работайте с текстом через textContent, когда вам не нужна разметка.

Храните небольшие данные на элементах через data-* и dataset.

В следующей логичной практике после этой темы обычно идут компоненты интерфейса, где DOM используется постоянно: модальные окна, валидация форм, вкладки, выпадающие меню и интерактивные списки.

События, кнопки, модальные окна и мини-проекты интерфейса

В прошлой теме вы научились находить элементы (querySelector, querySelectorAll), менять текст (textContent), управлять классами (classList) и атрибутами (getAttribute, setAttribute). Теперь добавим ключевой механизм, который превращает страницу из статичной в интерактивную: события.

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

клик по кнопке меняет состояние блока

отправка формы обрабатывается без перезагрузки страницы

модальное окно открывается и закрывается разными способами

небольшие мини-проекты, где DOM, CSS-классы и события работают вместе

!Схема, показывающая, как событие проходит через элементы и почему работает делегирование

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

Событие в браузере — это сигнал о том, что что-то произошло.

пользователь кликнул мышью

нажал клавишу

ввёл текст

отправил форму

страница загрузила DOM

JavaScript может подписаться на событие и выполнить функцию-обработчик.

Ключевые термины:

источник события: элемент, с которым взаимодействовали

обработчик: функция, которая выполнится

подписка: связь «когда произошло X, выполни Y»

Документация: Event

addEventListener: базовый способ подписки

Основной инструмент: addEventListener.

Практические правила:

обработчик лучше писать функцией, а не большим куском кода внутри

проверяйте, что элемент найден, если разметка может меняться

чаще всего для UI вы будете менять классы состояния

Документация: addEventListener

Объект события: что именно произошло

В обработчик можно принять параметр, обычно его называют event или e.

Что полезно знать на базовом уровне:

event.type — тип события (например, click)

event.target — элемент, где событие возникло (часто «реальная цель» клика)

event.currentTarget — элемент, на который повесили обработчик

Документация: EventTarget

Кнопки и формы: частая ловушка с отправкой

Кнопка внутри формы может вести себя неожиданно, если не учитывать type.

type="submit" отправляет форму

type="button" ничего не отправляет и удобна для UI-действий

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

вы кликаете по кнопке

форма пытается отправиться

страница перезагружается или уходит по адресу из action

ваш JS «как будто не работает», потому что всё прерывается

preventDefault: отмена поведения по умолчанию

Если вам нужно обработать форму JavaScript-ом, отменяйте стандартную отправку.

Документация: preventDefault

Всплытие событий и делегирование

События в DOM обычно всплывают: сначала событие возникает на вложенном элементе, а потом «поднимается» вверх по дереву.

Почему это важно:

можно повесить один обработчик на общий контейнер вместо множества обработчиков на каждую кнопку

это полезно для списков, которые пополняются динамически

Делегирование событий

Идея: слушаем клики на контейнере и проверяем, куда кликнули.

Пояснение логики:

обработчик один и живёт на контейнере

closest помогает найти «нужную кнопку», даже если клик был по иконке внутри

после нахождения кнопки мы находим родительский элемент задачи и удаляем его

Документация: Element.closest

Модальные окна: состояние, слои и закрытие

Модальное окно — это UI-слой поверх страницы, который временно забирает внимание пользователя.

Технически модалка почти всегда делается так:

есть контейнер модалки

есть подложка (overlay, backdrop)

у модалки есть состояние «открыто» и «закрыто», которое описано CSS-классом

JavaScript переключает это состояние

!Анатомия модалки: подложка, контент и места, откуда обычно приходит закрытие

CSS-идея модалки через классы состояния

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

JS: открыть и закрыть модалку

Сделаем функции, чтобы код был читаемым и переиспользуемым.

Закрытие по Escape

Это важная часть удобства.

Документация: KeyboardEvent.key

Практика доступности для модалки (базовый уровень)

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

после открытия модалки перевести фокус на первый элемент управления внутри

закрывать по Escape

не скрывать критически важные действия только за мышью

Фокус можно перевести так:

Документация: HTMLElement.focus

Мини-проекты интерфейса: что собрать для практики

Ниже несколько мини-проектов, которые тренируют связку HTML-структуры, CSS-состояний и JavaScript-событий. Каждый проект опирается на одни и те же приёмы.

Мини-проект: переключатель темы

Сценарий:

есть кнопка «Тема»

при клике добавляется класс, например .theme-dark, на общий контейнер страницы

Мини-проект: вкладки

Сценарий:

сверху кнопки вкладок

снизу панель, которая меняется

активная кнопка и активная панель отмечаются классами .is-active

Подход:

хранить соответствие через data-*

использовать делегирование на контейнере кнопок

Ключевая техника тут: один обработчик, работа через dataset, переключение классов.

Мини-проект: список задач с добавлением

Сценарий:

форма добавляет задачу в список

каждая задача имеет кнопку удаления

удаление работает через делегирование

Подход:

на submit отменяем стандартное поведение

создаём элемент через createElement

добавляем в список через append

Итоговые практические выводы

интерактивность в браузере строится вокруг addEventListener

почти всегда выгодно управлять UI через классы состояния и classList

у форм и кнопок есть поведение по умолчанию, которое часто нужно контролировать через type и preventDefault

всплытие позволяет делать делегирование и писать меньше обработчиков

модалка в базовом варианте: класс .is-open, закрытие по кнопке, по подложке и по Escape

Эти же приёмы вы будете использовать дальше в любых интерфейсах: меню, аккордеоны, фильтры, подсказки, уведомления и простые компоненты.