Ваш первый сайт
Восемь последовательных уроков: создайте HTML-страницу, добавьте стили, подготовьте файлы и опубликуйте сайт.
Проверка состава публикации: какие файлы доступны посетителю
Перед загрузкой выпуска нужно определить, какие файлы действительно должны попасть в публичный каталог. Случайная публикация конфигурации или резервной копии опаснее отсутствующей картинки.
Откат статического сайта: сохранить совместимый набор файлов
Откат должен возвращать согласованный выпуск, а не только старый index.html. Документ и ресурсы связаны путями и версиями, поэтому их нужно рассматривать как единый набор.
Проверка ответа после публикации: статус, тип и кеширование
Проверка HTTP-ответа помогает обнаружить ошибки, которые не видны по одному внешнему виду страницы. Для документа, CSS, JavaScript и несуществующего адреса нужны разные ожидаемые результаты.
Проверка изображения: размер файла, пропорции и размер на странице
Большая картинка может выглядеть маленькой, но всё равно передавать лишние байты. В упражнении нужно различить размер загруженного файла, естественные размеры изображения и его область отображения.
GET-форма: проследить путь от поля до URL
В этом упражнении обычная форма показывает, как браузер превращает пользовательский ввод в строку запроса. Это помогает отлаживать поиск без добавления JavaScript.
Предпросмотр печати: проверить статью до экспорта в PDF
Экранный вид не гарантирует удобную печать. В упражнении проверяются переносы страниц, длинные примеры, поля и читаемость текста в отдельном режиме предпросмотра.
Водопад запросов: найти цепочку поздней загрузки
Водопад Network показывает, когда начинаются и заканчиваются запросы. Его задача в упражнении — обнаружить зависимость загрузок, а не назначить виновника по одной длинной полосе.
Учебные JSON-данные: проверить синтаксис и ожидаемую структуру
Успешный JSON.parse означает только корректный синтаксис JSON. Приложению отдельно нужно проверить, что полученная структура содержит нужные поля подходящих типов.
Цепочка перенаправлений: проследить путь до конечной страницы
Один переход в браузере может включать несколько ответов 3xx до итоговой страницы. Упражнение помогает увидеть лишние шаги, потерю параметров и зацикливание.
Запасной шрифт: понять, чем браузер действительно рисует текст
Список font-family описывает предпочтения, но не доказывает, что первый шрифт доступен. В упражнении нужно определить реально использованный шрифт и оценить страницу при его замене.
Проверка целей нажатия: размер, интервалы и длинные подписи
Небольшие близко расположенные кнопки легко нажать ошибочно, особенно на сенсорном экране. Упражнение проверяет область взаимодействия целиком, а не только размер видимой иконки.
Первый псевдоэлемент: декоративный маркер без лишнего HTML
Псевдоэлемент before позволяет добавить декоративную часть оформления без отдельного узла разметки. В упражнении он используется для небольшой точки перед подписью.
Стили не применились: проверить запрос раньше специфичности
Если страница выглядит неоформленной, причина может находиться до разбора CSS: неверный адрес, ответ HTML вместо файла или блокировка загрузки. Упражнение задаёт последовательность диагностики.
Хранилище браузера: проверить свой учебный ключ без очистки всего сайта
Для знакомства с localStorage достаточно одного специально названного ключа. Не нужно удалять все данные приложения или просматривать значения действующих сессий.
Обработчик события: поймать повторное подключение
Если одно нажатие выполняет действие несколько раз, причиной может быть повторная регистрация обработчиков. Упражнение помогает отличить несколько функций от повторного добавления одной и той же.
Измерение блока: размеры раскладки и прямоугольник на экране
GetBoundingClientRect показывает прямоугольник элемента относительно окна просмотра. Он полезен для диагностики расположения, но не равен всем возможным значениям ширины из CSS.
Страница без JavaScript: проверить доступность основного содержания
Отключение JavaScript помогает увидеть, какие возможности действительно зависят от скриптов. Проверка особенно полезна для навигации и чтения, которые часто можно сохранить обычным HTML.
Preload на практике: проверить пользу и отсутствие лишней загрузки
Preload заранее объявляет браузеру ресурс, который скоро понадобится. Упражнение проверяет, обнаруживается ли файл раньше и используется ли предварительная загрузка последующим запросом.
Тело запроса: отличить JSON от данных формы
Вкладка Payload помогает понять, что браузер действительно отправил серверу. Упражнение отделяет видимые поля интерфейса от фактического формата HTTP-запроса.
Сброс формы: возврат к исходным значениям, а не обязательная очистка
Reset возвращает элементы формы к их исходным значениям. Если разметка задаёт начальный текст или отмеченный переключатель, сброс восстановит их, а не оставит всё пустым.
Горизонтальная прокрутка: найти элемент, расширяющий страницу
Неожиданная горизонтальная прокрутка часто вызвана одним широким элементом. Упражнение помогает найти кандидатов и проверить причину, не пряча весь избыток через overflow:hidden.
Светлая и тёмная схема: проверить системное предпочтение
Предпочтение тёмной темы можно учитывать через CSS-медиазапрос. В упражнении проверяются не только фон и текст, но и поля, ссылки и контуры фокуса.
Исходный HTML и DOM: почему инспектор показывает другую структуру
Исходный ответ сервера и текущее дерево DOM могут различаться. Браузер разбирает разметку, исправляет некоторые ошибки структуры, а скрипты затем могут менять документ.
Урок: найти доступное имя элемента в инструментах браузера
Внешне понятная кнопка или поле может оказаться безымянным для вспомогательной программы. В этом уроке вы проверите вычисленное доступное имя и его источник, а не только внешний вид компонента.
Урок: проверить состояния required без отправки данных
Проверка обязательного поля включает несколько разных состояний: пустое значение, неверный формат и допустимый ввод. Урок учит смотреть конкретные признаки validity, не угадывая причину по одному цвету рамки.
Урок: проследить всплытие одного события
Одно нажатие может вызвать обработчики на кнопке и на её родителе. Урок помогает отличить нормальное всплытие от случайной повторной регистрации одинакового обработчика.
Урок: сохранить несколько значений одного имени поля
Группа выбранных чекбоксов может отправлять несколько значений с одинаковым именем. Простое превращение FormData в объект теряет повторы, поэтому нужно заранее выбрать подходящее представление данных.
Урок: отличить незагруженное изображение от скрытого CSS
Пустое место вместо картинки может быть связано с сетью, декодированием или оформлением. В этом уроке вы последовательно отделите состояние загрузки от размеров и видимости элемента.
Урок: проверить типы значений в dataset
Data-атрибуты удобно связывают разметку с небольшими настройками интерфейса. В этом уроке вы проверите, почему число и логический признак из dataset сначала оказываются строками.
Урок: проверить смену версии CSS-файла в кеше
После публикации пользователь должен получить новые стили, а старые страницы — не потерять совместимые ресурсы. Урок показывает проверку двух разных URL файлов без глобального отключения кеша сайта.