Основы веб-разработки
Доступность, скорость, HTTP, отладка и организация фронтенда: понятные инструкции, ограничения и контрольные списки для рабочего сайта.
Семантика страницы: ориентиры для навигации
Как организовать шапку, навигацию, основную область и разделы, чтобы структура помогала чтению.
Навигация клавиатурой: проверка без мыши
Как проверить фокус, порядок переходов и доступность действий только с клавиатуры.
Как писать alt для изображений
Выбираем описание по назначению изображения и не превращаем alt в список ключевых слов.
Контраст и цвет: читаемость интерфейса
Проверяем текст на фоне, состояния элементов и информацию, которая не должна зависеть только от цвета.
Ошибки формы: объяснить и помочь исправить
Как связывать сообщение с полем, сохранять введённое и не выдавать успех до завершения обработки.
Как проверять адаптивную вёрстку
Тестируем промежуточные ширины, длинный текст, увеличение масштаба и реальные сценарии.
Веб-шрифты: загрузка, кириллица и запасной вариант
Как подключать гарнитуру с учётом веса, лицензии и отображения текста до загрузки.
HTTP-кеш: хранение и проверка актуальности
Разбираем Cache-Control, валидаторы и обновление версионированных ресурсов.
Статусы HTTP: 200, 301, 304, 404 и 500
Как читать результат запроса и не принимать красивую страницу ошибки за успешный ответ.
Пути и URL: относительный адрес и корень сайта
Как разрешаются ссылки и почему перенос страницы в подпапку может изменить путь к ресурсу.
UTF-8: как избежать нечитаемых символов
Согласуем кодировку файла, HTML и HTTP-ответа для русскоязычной страницы.
Вкладка Network: что на самом деле загрузил браузер
Находим лишние запросы, ошибки ресурсов, кеширование и неожиданные перенаправления.
Консоль и точки останова: отладка JavaScript
Читаем ошибки, проверяем значения и останавливаем выполнение в нужном месте.
Загрузка JavaScript: обычный script, defer и модули
Как запускать код после разбора HTML и не нарушать порядок зависимостей.
Постепенное улучшение: рабочая основа без JavaScript
Строим страницу, которая сохраняет основные функции при задержке или отказе скриптов.
Уменьшение движения: доступные анимации
Как учитывать prefers-reduced-motion и сохранять смысл интерфейса без декоративного движения.
Стили печати: удобная бумажная версия статьи
Как убрать лишние элементы, сохранить содержание и проверить разрывы страниц.
Скачки макета: как заранее резервировать место
Разбираем изображения, шрифты и динамические вставки, из-за которых элементы неожиданно сдвигаются.
Безопасный вывод текста: textContent и HTML
Почему данные пользователя нельзя без проверки превращать в разметку страницы.
Структура фронтенд-проекта: файлы и ответственность
Как организовать HTML, CSS и JavaScript небольшого сайта, не усложняя его раньше времени.
Content-Type: тип ресурса в HTTP-ответе
Заголовок Content-Type сообщает клиенту тип представления, переданного в теле HTTP-сообщения.
Одинаковый источник: схема, хост и порт
Источник веб-страницы определяется сочетанием схемы, имени хоста и порта и участвует в браузерной модели изоляции.
CORS: разрешение браузеру читать ответ
CORS позволяет серверу явно определить, каким другим источникам браузер может предоставить доступ к определённому ответу.
ETag: условный запрос и повторная проверка кеша
ETag является валидатором версии представления и помогает повторно использовать сохранённое тело ответа после проверки сервера.
private и no-store: кеширование персонального ответа
Директивы Cache-Control помогают отделить персональные ответы от ресурсов, пригодных для общего кеша.
301, 302, 307 и 308: перенаправления и метод запроса
Статус перенаправления сообщает клиенту новый адрес и влияет на постоянство перехода и обработку метода запроса.
URLSearchParams: параметры без ручной склейки
URLSearchParams помогает собирать и читать параметры запроса с учётом кодирования специальных символов.
Цикл событий: синхронный код и микрозадачи
Цикл событий координирует выполнение JavaScript и обработку отложенной работы в браузерной среде.
Готовность DOM: когда искать элементы
Поиск элемента возвращает null, если нужная часть документа ещё не построена или селектор не совпадает с разметкой.
AbortController: отмена устаревшего запроса
AbortController позволяет передать сигнал отмены операциям, которые его поддерживают, включая fetch.