HTML и оформление сайтов: основы CSS и немного JavaScript для динамики

HTML: структура страницы, семантика и формы

Зачем нужен HTML и что мы считаем страницей

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

Важно разделять роли технологий:

HTML отвечает за структуру и семантику

CSS отвечает за внешний вид

JavaScript отвечает за поведение и динамику

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

Как устроен HTML-документ

У любой страницы есть базовые составляющие:

документ и его тип

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

метаданные страницы

видимое содержимое

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

Основные части документа

head — служебная часть: кодировка, заголовок страницы в вкладке браузера, подключение стилей

body — то, что видит пользователь на странице

Что обычно находится в head:

title — название страницы во вкладке

метаданные, например кодировка

ссылки на CSS-файлы

Что обычно находится в body:

заголовки и текст

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

секции страницы (шапка, меню, основной контент)

формы

> Подробная справка по структуре HTML-документа есть в MDN. MDN: Document and website structure

Семантика: как делать страницу понятной

Семантика в HTML — это выбор таких элементов, которые отражают смысл блока, а не его внешний вид.

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

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

скринридеры лучше озвучивают страницу (доступность)

вам проще поддерживать проект: код читается как логическая схема

Семантические блоки страницы

Чаще всего каркас страницы строят из таких элементов:

header — шапка страницы или шапка секции (логотип, название, верхнее меню)

nav — навигация по сайту или по текущей странице

main — главный уникальный контент страницы (обычно один на странице)

section — крупный смысловой раздел

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

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

footer — подвал страницы или секции (копирайт, контакты, ссылки)

А вот элементы без явного смысла:

div — универсальный контейнер для группировки

span — универсальный строчный контейнер для фрагмента текста

Правило-памятка:

если смысл блока можно назвать одним словом из списка выше — используйте семантический элемент

если это просто техническая обёртка для сетки, отступов или группировки — используйте div или span

!Диаграмма, показывающая типичную семантическую структуру страницы и вложенность блоков

> Официальные описания семантических элементов: MDN: Semantic HTML

Заголовки и иерархия

Заголовки формируют структуру текста. Обычно используются h1–h6.

Практические рекомендации:

h1 — главный заголовок страницы (обычно один)

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

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

Текст, ссылки и списки

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

p — абзац текста

a — ссылка

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

li — пункт списка

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

плохо: жми сюда

хорошо: посмотреть прайс-лист

Что такое атрибуты и зачем они нужны

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

Часто встречающиеся атрибуты:

id — уникальный идентификатор элемента на странице

class — имя класса для CSS и JavaScript (классов может быть несколько)

href — адрес перехода для ссылок

src — источник файла (часто для медиа)

alt — текстовое описание изображения для доступности

Разница между id и class:

| Критерий | id | class | |---|---|---| | Уникальность | обычно один раз на странице | может повторяться много раз | | Назначение | точечная привязка | стилизация и группировка | | Типичный кейс | якорь, конкретный блок | одинаковые карточки, кнопки |

Формы: сбор данных от пользователя

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

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

Обычно внутри form находятся:

label — подпись поля

input — короткое поле ввода

textarea — многострочный ввод

select и option — выбор из списка

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

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

Атрибуты формы и отправка

У формы есть важные параметры:

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

method — каким способом отправлять данные (часто GET или POST)

Упрощённо:

GET добавляет данные в адрес страницы, подходит для поиска и фильтров

POST отправляет данные в теле запроса, подходит для логина, регистрации и любых данных, которые не стоит светить в адресной строке

> Подробнее о формах и отправке данных: MDN: Your first form

Основные типы полей input

Выбор типа влияет на поведение, клавиатуру на телефоне и базовую проверку:

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

email — email с базовой проверкой

password — скрытый ввод

number — числа

checkbox — флажок

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

date — выбор даты

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

Связка label и поля

Правильная связка подписи и поля улучшает доступность и удобство: по клику на подпись фокус переходит в поле.

Как это обеспечивается логически:

у поля есть уникальный id

у подписи label есть ссылка на этот id через атрибут for

Валидация без JavaScript

HTML умеет выполнять базовую проверку ещё до отправки:

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

minlength и maxlength — длина строки

min и max — границы числа или даты

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

Важно: HTML-проверка удобна для пользователя, но не заменяет проверку на сервере.

Пример логической структуры формы без кода

Ниже пример того, как можно спроектировать форму регистрации (это не синтаксис, а схема):

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

Использовать div везде, игнорируя header, nav, main, footer

Делать заголовки не по смыслу, а по размеру

Оставлять поля формы без label

Забывать про name у полей формы, из-за чего данные не отправляются корректно

Считать, что required полностью защищает от неправильных данных

Что дальше по курсу

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

Полезные источники

MDN: HTML elements reference

MDN: Forms

MDN: Client-side form validation

CSS: стили, шрифты, цвета и компоновка блоков

Как CSS дополняет HTML из предыдущей темы

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

Ключевая идея курса:

HTML отвечает за структуру и семантику

CSS отвечает за внешний вид и компоновку

JavaScript отвечает за поведение (к нему вернёмся позже)

Как CSS применяет стили

CSS состоит из правил. Каждое правило отвечает на два вопроса:

кого стилизуем

как именно стилизуем

Селектор, свойства и значения

Селектор выбирает элементы, к которым применится стиль

Свойство — что меняем (например, цвет текста)

Значение — на что меняем (например, чёрный)

Пример CSS-правила:

Как подключают CSS к странице

Обычно стили пишут в отдельном файле, например styles.css, и подключают его в служебной части документа (в той же области, где задаётся заголовок вкладки и метаданные). Так код HTML остаётся читаемым, а оформление — централизованным.

> Справка: MDN: Getting started with CSS

Базовые селекторы, которые нужны постоянно

Селекторы по тегу, классу и идентификатору

По имени элемента: header, nav, main, footer

По классу: .card, .button, .form-field

По идентификатору: #promo, #search

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

id используйте редко и точечно

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

Комбинации: потомок и прямой ребёнок

Иногда важно, где именно находится элемент:

nav a — все ссылки внутри навигации

nav > a — только ссылки, которые являются прямыми детьми навигации

Псевдоклассы для интерактива без JavaScript

Частые псевдоклассы:

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

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

:active — момент нажатия

> Справка: MDN: Pseudo-classes

Каскад, наследование и приоритет

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

Наследование

Часть свойств наследуется от родителя к потомкам, чаще всего это свойства текста:

font-family

font-size

line-height

color

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

Специфичность

Если два правила задают одно и то же свойство одному элементу, побеждает правило с более высоким приоритетом.

Упрощённая памятка:

селектор по элементу обычно слабее

класс обычно сильнее элемента

id обычно сильнее класса

Пример конфликтов:

Практическая рекомендация: старайтесь строить стили на классах, а не на id, чтобы проект было проще расширять.

> Справка: MDN: Specificity

Блочная модель: размеры, отступы и рамки

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

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

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

border — рамка

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

!Схема показывает из каких частей состоит блок и где находятся отступы

Практика: предсказуемые размеры через box-sizing

Частая проблема новичков: задали ширину, добавили padding, и блок неожиданно стал шире. Чтобы размеры были предсказуемыми, обычно включают модель, где ширина включает padding и border.

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

Полезные свойства для блоков

Единицы измерения: px, rem, % и когда что выбирать

В CSS есть разные единицы. На старте достаточно понимать несколько основных.

| Единица | Что означает | Типичный кейс | |---|---|---| | px | условный пиксель | границы, тонкие детали, точные размеры | | rem | размер относительно базового размера шрифта страницы | шрифты, отступы, компоненты | | % | процент от размера родителя | ширины блоков, адаптивность | | vh, vw | процент от высоты или ширины окна | полноэкранные секции |

Практическая рекомендация:

для типографики и отступов часто удобнее rem

для границ и тонких линий — px

для ширин контейнеров — % и max-width

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

Типографика: шрифты и читаемость

font-family и запасные шрифты

Шрифты задают списком: если первый недоступен, браузер возьмёт следующий.

Размер, межстрочный интервал и насыщенность

Главные свойства:

font-size — размер шрифта

line-height — высота строки

font-weight — насыщенность

Значение line-height: 1.5 читается как в полтора раза выше размера шрифта. Это удобно, потому что адаптируется вместе с изменением font-size.

Подключение веб-шрифтов

В реальных проектах часто подключают веб-шрифты и задают их в font-family. Важно помнить:

всегда указывать запасные шрифты

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

> Справка: MDN: Web fonts

Цвета и фон

Форматы цветов

Чаще всего вы будете встречать:

#RRGGBB (шестнадцатеричный формат)

rgb(…) и rgba(…) (удобно для прозрачности)

hsl(…) и hsla(…) (удобно для подбора оттенков)

CSS-переменные для единого стиля

Запись вида --brand — это CSS-переменная. Её удобно использовать, чтобы:

поддерживать единый стиль на всём сайте

быстро менять тему

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

> Справка: MDN: Using CSS custom properties

Компоновка блоков: от простого к современному

display: block и inline

Базовая логика:

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

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

Для управления этим есть display.

> Справка: MDN: display

Центровка и ограничение ширины через контейнер

Один из самых частых приёмов — общий контейнер:

max-width ограничивает ширину на больших экранах

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

padding добавляет «воздух» по краям на узких экранах

Flexbox для рядов, колонок и выравнивания

Flexbox особенно удобен для:

горизонтальных меню

панели с кнопками

карточек в ряд

выравнивания по центру

Минимальный набор свойств:

display: flex включает режим

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

justify-content управляет распределением по главной оси

align-items выравнивает по поперечной оси

!Подсказка, как работают оси Flexbox и где применяются выравнивания

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

Grid для двумерных сеток

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

галерея

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

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

1fr означает одну долю доступного пространства

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

@media меняет раскладку на разных ширинах экрана

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

Как красиво оформить формы из предыдущей темы

Из прошлой статьи у нас есть поля, подписи и кнопка. В CSS чаще всего улучшают:

расстояния между полями

читаемость текста и подсказок

заметность фокуса

состояние ошибки

Пример стилей для полей:

Если свойство color-mix не поддерживается в некоторых браузерах, можно заменить его на фиксированный цвет обводки.

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

Стилизация по id и слишком длинные селекторы, из-за чего сложно переопределять правила

Попытка «чинить» компоновку случайными margin вместо понятной структуры контейнеров и сетки

Отсутствие стиля :focus, из-за чего интерфейс неудобен с клавиатуры

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

Что дальше по курсу

Теперь у вас есть база, чтобы оформлять семантическую HTML-структуру. Следующий шаг логично сделать таким:

собрать небольшой макет страницы целиком

затем добавить немного JavaScript, чтобы оживить интерфейс: открытие меню, валидация, динамические состояния

Полезные источники

MDN: Learn CSS

MDN: Cascade and inheritance

MDN: Box model

MDN: Styling text

MDN: Flexbox

MDN: Grid

Адаптивность: Flexbox, Grid и медиазапросы

Зачем нужна адаптивность и как она связана с предыдущими темами

В прошлых статьях вы:

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

научились подключать CSS, писать селекторы, управлять типографикой и компоновкой через Flexbox и Grid

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

Адаптивная верстка обычно держится на трёх опорах:

гибкая сетка (Flexbox и Grid)

гибкие размеры (проценты, rem, max-width, min() и подобные приёмы)

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

> Подробнее о подходах к адаптивной вёрстке: MDN: Responsive design

Основа адаптивности: что именно мы “адаптируем”

Размеры и контейнер

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

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

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

Гибкие элементы вместо “жёстких”

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

Вместо этого часто используют:

% для ширин блоков

max-width для ограничений

gap вместо множества margin

Типичный пример для медиа (картинок, видео), чтобы они не “вылезали” из контейнера:

Стратегия: mobile-first и выбор брейкпоинтов

Mobile-first

Mobile-first означает: сначала пишем стили для узкого экрана (по умолчанию), а затем усиливаем интерфейс правилами для более широких экранов.

Плюсы:

проще не забыть про мобильные устройства

меньше конфликтов стилей

часто быстрее загружается на телефоне (меньше переопределений)

Технически это обычно выглядит так:

базовые стили без медиазапросов

затем @media (min-width: ...) для планшета и десктопа

Как выбирать брейкпоинты

Брейкпоинты (точки, где меняется раскладка) стоит выбирать не по “популярным моделям устройств”, а по моменту, когда контенту становится тесно или слишком пусто.

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

Flexbox в адаптивности: когда он особенно полезен

Flexbox лучше всего подходит для одномерной раскладки: ряд или колонка.

Типичные адаптивные паттерны на Flexbox

навигация в строку, которая на узких экранах превращается в колонку

панель кнопок, которая переносится на новую строку

карточки, которые “упаковываются” с переносом

Ключевые свойства для адаптивности:

flex-wrap: wrap — разрешает перенос элементов

gap — расстояние между элементами (обычно удобнее, чем margin)

flex: 1 или flex: 0 1 ... — как элемент растёт и сжимается

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

> Справка по концепциям: MDN: Basic concepts of flexbox

Пример: ряд карточек, который сам переносится

Как это читается:

display: flex делает контейнер гибким

flex-wrap: wrap разрешает перенос на новую строку

flex: 1 1 240px означает:

1. 1 — карточка может расти и занимать свободное место 2. 1 — карточка может сжиматься, если места мало 3. 240px — желаемая стартовая ширина карточки

Пример: меню меняет направление на узком экране

Здесь на широком экране меню идёт в ряд, а на узком — становится колонкой, и ссылки растягиваются по ширине.

Grid в адаптивности: сетка в двух измерениях

Grid лучше всего подходит, когда вы раскладываете элементы сразу по строкам и колонкам: каталоги, галереи, страницы с сайдбаром.

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

Самый практичный приём: auto-fit и minmax

Очень частая задача: “Сделай столько колонок, сколько влезет, но чтобы карточки не становились уже определённого минимума”.

Что происходит:

minmax(220px, 1fr) задаёт диапазон ширины колонки: минимум 220px, максимум — “доля свободного места”

auto-fit говорит сетке: “создавай столько колонок, сколько поместится в контейнер”

Это часто позволяет сделать адаптивность почти без медиазапросов.

!Схема показывает, как Grid сам меняет число колонок

Пример: “контент + сайдбар” и переключение в одну колонку

На больших экранах есть две колонки, на маленьких — одна.

Медиазапросы: как включать стили по условиям

Медиазапрос — это правило вида “применяй эти стили, только если условие выполняется”. Чаще всего условие связано с шириной окна браузера.

> Справка по синтаксису: MDN: Using media queries

min-width и max-width

Два основных подхода:

@media (min-width: ...) — mobile-first: улучшаем для больших экранов

@media (max-width: ...) — “сжимаем” десктопную версию под маленькие экраны

Для обучения и большинства интерфейсов удобно начать с mobile-first.

Пример mobile-first для карточек

Медиазапросы не только про ширину

Можно адаптироваться под предпочтения пользователя и возможности устройства.

Уменьшение анимаций для тех, кому тяжело от движения:

> Справка: MDN: prefers-reduced-motion

Тёмная или светлая тема (если вы решите добавить темы позже):

> Справка: MDN: prefers-color-scheme

Проверка, есть ли “наведение мышью” (полезно, чтобы не переусердствовать с :hover на тач-устройствах):

> Справка: MDN: hover media feature

Практический рецепт: как собрать адаптивную страницу из семантики, Flexbox, Grid и медиазапросов

Ниже пример “мышления слоями” — без привязки к конкретному макету:

HTML задаёт семантическую структуру: шапка, навигация, основной контент, секции, карточки, форма.

CSS задаёт базовую типографику, цвета, контейнер, отступы.

Раскладку делаем через:

1. Flexbox для “полос” интерфейса (навигация, панели действий) 2. Grid для основной сетки (каталог, галерея, “контент + сайдбар”)

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

1. там, где автоматической адаптации (например, через auto-fit) недостаточно 2. там, где нужна смена сценария (например, меню в колонку)

Частые ошибки в адаптивной верстке

Фиксированные ширины “везде”, из-за которых страница ломается на узких экранах.

Слишком много брейкпоинтов без причины, когда проблема решается flex-wrap или minmax.

Использование Flexbox там, где нужна полноценная двумерная сетка (лучше Grid).

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

Что дальше по курсу

После адаптивности логично добавить немного JavaScript для динамики:

открытие и закрытие мобильного меню

переключение темы (с сохранением выбора)

более умная работа с формой: подсказки, сообщения об ошибках, состояние отправки

Полезная база для следующих шагов:

MDN: Flexbox

MDN: Grids

MDN: Using media queries

JavaScript: основы и интерактивность через DOM

Как JavaScript дополняет HTML и CSS из прошлых тем

В предыдущих статьях вы научились:

собирать семантическую структуру страницы на HTML

оформлять её стилями CSS

делать раскладку адаптивной через Flexbox, Grid и медиазапросы

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

Важно держать разделение ролей:

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

CSS отвечает за внешний вид

JavaScript управляет поведением и динамикой

Что такое DOM и почему он нужен

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

!Упрощённая схема DOM-дерева и вложенности элементов

Практический смысл DOM:

вы кликаете по кнопке, а JavaScript добавляет блоку класс is-open

вы вводите текст, а JavaScript показывает подсказку или ошибку

вы меняете переключатель темы, а JavaScript сохраняет выбор

Справка: MDN: Introduction to the DOM

Как «подключается» JavaScript к странице

Чаще всего JavaScript пишут в отдельном файле, например app.js, и подключают так, чтобы код выполнялся после того, как HTML уже разобран браузером.

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

загрузить скрипт так, чтобы он не блокировал разбор страницы (обычно используют режим defer)

либо запускать код после события готовности DOM

Если вы не уверены, что элементы уже существуют в DOM, используйте событие DOMContentLoaded.

Справка: MDN: DOMContentLoaded

База JavaScript, необходимая для DOM

В этом курсе нам не нужно изучать JavaScript «целиком». Для интерактива на странице достаточно нескольких фундаментальных вещей.

Переменные и типы данных

Основной инструмент для объявления переменных — const и let.

const — значение нельзя переassign (подходит по умолчанию)

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

Типы данных, которые вы будете видеть постоянно:

строки, например "Hello"

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

логические значения, true и false

объекты, например { isOpen: true }

массивы, например ["a", "b"]

Функции

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

В DOM-сценариях функции часто используются как обработчики событий.

Условие и ранний выход

Для интерфейсов полезен «ранний выход»: если элемента нет, не продолжаем.

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

Чтобы управлять интерфейсом, нужно сначала получить ссылку на элементы DOM.

Самый универсальный способ: querySelector

document.querySelector('селектор') возвращает первый подходящий элемент или null

document.querySelectorAll('селектор') возвращает список элементов

Памятка по популярным методам

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

Справка: MDN: Document.querySelector

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

Текст и разметка

Для изменения текста используйте textContent.

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

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

Справка: MDN: Node.textContent

Классы как основной механизм переключения состояний

Чаще всего JavaScript не «рисует» интерфейс напрямую, а переключает классы, а внешний вид уже описан в CSS.

открыть модальное окно: добавить is-open

показать ошибку: добавить is-error

включить тёмную тему: добавить theme-dark

Справка: MDN: Element.classList

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

Иногда удобнее хранить «настройку» прямо на элементе в виде data-....

Справка: MDN: HTMLElement.dataset

События: как страница реагирует на пользователя

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

Основной способ подписаться на событие — addEventListener.

Справка: MDN: EventTarget.addEventListener

Объект события

Обработчик часто получает параметр event.

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

Справка: MDN: Event.preventDefault

Делегирование событий для списков и карточек

Если у вас много похожих элементов (например, карточки каталога), можно повесить обработчик на контейнер и проверять, по чему кликнули.

Справка: MDN: Element.closest

Практические мини-сценарии для сайта

Ниже сценарии, которые естественно продолжают предыдущие темы курса: вы уже умеете верстать шапку, меню, формы и адаптивные сетки, а теперь оживим их.

Открытие и закрытие мобильного меню

Идея:

в CSS есть класс is-open, который показывает меню

в JavaScript по клику переключаем этот класс

Что важно в этом примере:

код ждёт готовности DOM

мы проверяем, что элементы найдены

интерфейс управляется через классы, а не через ручные стили в JavaScript

Переключение темы и сохранение выбора

Идея:

на корневом элементе страницы переключаем класс theme-dark

сохраняем выбор в localStorage

при загрузке читаем сохранённое значение

Справка: MDN: Window.localStorage

Улучшение формы: сообщение об ошибке без перезагрузки

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

показать единое сообщение об ошибке в удобном месте

подсветить конкретные поля

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

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

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

слушаем событие submit

при ошибке отменяем отправку через event.preventDefault()

показываем текст ошибки и добавляем класс для стилей

Справка: MDN: HTMLFormElement submit event

Отладка: как понять, почему «не работает»

Мини-набор приёмов для новичка:

console.log(...) в ключевых местах

проверка, что querySelector нашёл элементы и вернул не null

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

чтение ошибок в консоли браузера

Справка: MDN: Console

Частые ошибки при работе с DOM

Пытаться искать элементы до готовности DOM, из-за чего querySelector возвращает null.

Менять стили напрямую из JavaScript вместо переключения классов, из-за чего растёт хаос между CSS и JS.

Вешать обработчики на множество элементов, когда удобнее делегирование на контейнер.

Забывать про preventDefault() там, где вы хотите контролировать отправку формы или переход по ссылке.

Куда двигаться дальше

Вы уже можете собрать полноценную учебную страницу:

семантический HTML

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

базовая интерактивность: меню, темы, формы

Следующий логичный шаг в практике — собрать небольшой мини-проект (лендинг или портфолио) и добавить 2–3 сценария интерактива через классы и события.

Полезные материалы:

MDN: JavaScript Guide

MDN: Document Object Model (DOM)

MDN: Introduction to events

Мини‑проекты и хорошие практики: доступность, оптимизация, публикация

Зачем эта тема и как она связывает весь курс

Вы уже умеете:

делать семантическую структуру на HTML

оформлять страницу CSS (включая Flexbox и Grid)

добавлять базовую интерактивность JavaScript через DOM

Теперь важно перейти от «получилось на моём компьютере» к «это удобно людям, быстро загружается и не стыдно опубликовать». В веб‑разработке это обычно означает три направления:

доступность: чтобы сайтом могли пользоваться люди с разными возможностями и разными способами ввода

оптимизация: чтобы страница быстро загружалась и работала плавно

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

!Диаграмма показывает, как текущая тема завершает цепочку навыков курса

Мини‑проекты, которые закрепляют навыки курса

Ниже три небольших проекта. Они специально подобраны так, чтобы вы использовали всё из курса: HTML‑семантику, CSS‑оформление, адаптивность и немного JavaScript.

Мини‑проект: лендинг услуги или события

Что сделать:

шапка, навигация, основной блок с призывом

2–3 секции с преимуществами и отзывами

форма заявки

подвал с контактами

Что потренируете:

семантические секции и правильную иерархию заголовков

сетку карточек через Grid или Flexbox

состояния :hover и :focus для кнопок и ссылок

Маленькая интерактивность:

мобильное меню: кнопка переключает класс is-open

Мини‑проект: каталог карточек (товары, статьи, фильмы)

Что сделать:

панель фильтров (хотя бы один фильтр)

сетка карточек

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

Что потренируете:

адаптивную сетку через repeat(auto-fit, minmax(...))

делегирование событий в JavaScript (клик по кнопкам внутри карточек)

Маленькая интерактивность:

добавление в «избранное»: переключение класса is-favorite на карточке

Мини‑проект: страница профиля или мини‑портфолио

Что сделать:

блок «о себе», список навыков, блок проектов

контактная форма

Что потренируете:

типографику (читаемость, интервалы, ширина строки)

тёмную тему через класс и CSS‑переменные

Маленькая интерактивность:

переключатель темы с сохранением в localStorage

Доступность: что это и как улучшать без усложнения

Что такое доступность

Доступность (часто говорят a11y) — это когда сайтом можно пользоваться:

с клавиатуры (без мыши)

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

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

при сниженной чувствительности к анимациям

Важная мысль: доступность почти всегда начинается не с «сложных техник», а с правильной семантики HTML и аккуратных состояний фокуса в CSS.

Справка:

MDN: Accessibility

MDN: Semantic HTML

Практика: базовая чек‑линия доступности

#### Семантика и заголовки

Проверьте:

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

навигация находится в логическом «контейнере навигации» (семантически)

основной уникальный контент страницы находится в «главной области»

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

так структура страницы «читается» не только глазами, но и программами

#### Формы: подписи и понятные ошибки

Проверьте:

у каждого поля есть подпись, связанная с полем

ошибки формулируются конкретно: что не так и что сделать

ошибка не показывается только цветом (например, добавьте текстовое сообщение)

Справка:

MDN: Your first form

MDN: Client-side form validation

#### Фокус и клавиатура

Правило: любой интерактивный элемент должен быть достижим клавишей Tab и иметь заметное состояние :focus.

Проверьте:

можно пройтись Tab по всем ссылкам, кнопкам и полям

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

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

Справка:

MDN: :focus

#### Контраст и читаемость

Проверьте:

текст читается на фоне, особенно мелкий

ссылки отличаются от обычного текста не только цветом (часто помогает подчёркивание)

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

WebAIM Contrast Checker

#### Изображения: когда нужен alt

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

если изображение передаёт смысл, alt должен описывать смысл

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

Справка:

MDN: alt

#### Уважение к настройкам «меньше анимаций»

Если вы добавляете анимации и плавные переходы, поддержите режим пользователя уменьшить движение.

Справка:

MDN: prefers-reduced-motion

Оптимизация: как сделать сайт быстрее и «легче»

Что обычно замедляет учебные проекты

Чаще всего тормоза дают:

тяжёлые изображения

слишком большие шрифты и много начертаний

«лишние» эффекты (особенно анимации) на слабых устройствах

отсутствие базовой проверки качества

Изображения: главный источник «веса»

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

выбирайте подходящий формат: чаще всего современный формат даёт меньший размер при похожем качестве

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

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

Справка:

web.dev: Serve images in next-gen formats

Шрифты: меньше — обычно лучше

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

начинайте с системных шрифтов: это быстро и без лишних загрузок

если нужен веб‑шрифт, ограничьте количество начертаний

Справка:

MDN: Web fonts

CSS и JavaScript: держите код «простым и предсказуемым»

Правила, которые реально помогают:

для состояний интерфейса используйте классы, а не ручную установку множества CSS‑свойств из JavaScript

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

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

Справка:

MDN: Element.classList

MDN: Document.querySelector

Быстрая диагностика качества: Lighthouse

Lighthouse — это отчёт в Chrome DevTools, который показывает подсказки по:

производительности

доступности

лучшим практикам

SEO

Как использовать:

Откройте DevTools в браузере.

Найдите раздел Lighthouse.

Запустите проверку.

Исправляйте сначала то, что даёт наибольший эффект: изображения, контраст, подписи форм.

Справка:

Chrome for Developers: Lighthouse

!Иллюстрация показывает, какие разделы качества стоит проверять

Публикация: как выложить проект и дать ссылку

Что значит «опубликовать» статический сайт

Ваши проекты из этого курса — это чаще всего статический сайт:

набор файлов (например, index.html, styles.css, app.js, изображения)

без серверной логики

Такой сайт легко публикуется на хостинге, который раздаёт статические файлы.

GitHub Pages: простой путь для учебных проектов

Подходит, если вы храните проект в репозитории GitHub и хотите бесплатную публикацию.

Общая логика процесса:

Создать репозиторий и загрузить файлы проекта.

В настройках репозитория включить публикацию через Pages.

Получить ссылку вида https://...github.io/....

Справка:

GitHub Docs: GitHub Pages

Netlify и Vercel: публикация через перетаскивание или подключение репозитория

Плюсы:

быстро получить ссылку

удобные обновления при пуше в репозиторий

Официальные гайды:

Netlify Docs

Vercel Documentation

Мини‑чеклист перед публикацией

Проверьте:

все пути к файлам работают (картинки, стили, скрипт)

страница адаптивна: ничего не «вылезает» на узком экране

фокус виден, формы имеют подписи

изображения не слишком тяжёлые

в консоли нет ошибок JavaScript

Хорошие практики, которые стоит сделать привычкой

Именование классов и структура файлов

Полезный минимальный порядок:

имена классов описывают роль в интерфейсе, а не внешний вид

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

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

.button как компонент

.button.is-loading как состояние

.card как компонент

.card.is-favorite как состояние

Работа со «состояниями» через классы

Почему это хорошая практика:

CSS отвечает за внешний вид

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

код проще тестировать и расширять

Прогон по сценариям

Сделайте короткий прогон каждый раз, когда добавили фичу:

Пройти страницу клавишей Tab.

Проверить мобильную ширину.

Открыть консоль и убедиться, что ошибок нет.

Запустить Lighthouse и исправить самые явные пункты.

Что дальше

Теперь у вас есть полный цикл:

собрать структуру на HTML

оформить и адаптировать на CSS

добавить интерактивность на JavaScript

довести качество: доступность и оптимизация

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

Следующий шаг для роста — собрать один мини‑проект полностью и довести его до состояния «можно показывать», а затем повторить то же на втором проекте, но уже быстрее и чище.