Практика вёрстки
Готовые учебные компоненты и подробные разборы: карточки, меню, формы, таблицы, отладка CSS и проверка сайта перед публикацией.
Как центрировать блок без фиксированных смещений
Размещаем содержимое по центру контейнера с помощью Grid и сохраняем возможность роста.
Подвал внизу короткой страницы без position: fixed
Собираем макет, в котором подвал остаётся после содержимого и не перекрывает текст.
Адаптивные карточки с одинаковым расположением ссылок
Создаём каталог с переменным количеством колонок и аккуратным выравниванием нижних ссылок.
Простое адаптивное меню без скрытых пунктов
Делаем меню, которое переносится на узком экране и остаётся доступным без JavaScript.
Понятная форма: подписи, подсказки и ошибки
Собираем интерфейс формы с видимыми подписями и объясняем границу между HTML и серверной обработкой.
Таблица на телефоне без растягивания всей страницы
Сохраняем структуру табличных данных и помещаем горизонтальную прокрутку в отдельную область.
Блок вопросов и ответов без JavaScript
Используем details и summary для дополнительных пояснений с нативным клавиатурным управлением.
Хлебные крошки: путь от раздела к статье
Строим понятную цепочку навигации, которая отражает структуру сайта, а не историю переходов.
Почему не применяется CSS: последовательная диагностика
Проверяем загрузку файла, селектор, каскад и вычисленные значения без случайного добавления !important.
Изображения без лишнего веса и скачков страницы
Подбираем размеры, резервируем место и отличаем отложенную загрузку от оптимизации файла.
SEO одной страницы: что проверить в HTML
Проверяем заголовок, описание, canonical и доступность текста без обещаний автоматического роста позиций.
Проверка сайта перед публикацией: рабочий чек-лист
Проходим содержимое, ссылки, формы, мобильную версию и резервные копии перед открытием сайта.
Ссылка пропуска меню: быстрый переход к статье
Ссылка пропуска повторяющейся навигации сокращает путь к основному содержимому для пользователя клавиатуры.
Таблица с закреплённой строкой заголовков
Закреплённые заголовки помогают читать длинную таблицу, не теряя связь между колонкой и значениями.
Кнопка с иконкой и понятным именем
Кнопке с графическим значком нужно доступное имя, объясняющее действие независимо от узнаваемости картинки.
Карточка характеристик на dl
Список описаний подходит для характеристик объекта, когда каждая подпись связана со своим значением.
Пропорции видеоблока без скачка раскладки
Место для видео можно зарезервировать заранее через aspect-ratio, чтобы поздняя загрузка не сдвигала соседний текст.
Подсказка поля через aria-describedby
Постоянная подсказка помогает заполнить поле и должна быть программно связана с ним, если важна для понимания ввода.
Две колонки с переходом в одну
Основной текст и дополнительный блок можно разместить в двух колонках, сохраняя логический порядок при переходе на узкий экран.
Длинный URL без горизонтального переполнения
Длинный адрес может растянуть карточку, если в строке недостаточно естественных точек переноса.
Статус, понятный без одного только цвета
Состояние записи лучше передавать текстом и дополнительным оформлением, чтобы различие не зависело только от восприятия цвета.
Горизонтальная навигация в узком контейнере
Короткую навигацию можно оставить в одной строке с локальной прокруткой, если перенос строк неудобен для задачи.
Автоматический отступ: действие у края flex-строки
Автоматический отступ у отдельного flex-элемента позволяет оттолкнуть его от остальных элементов строки.
Карточки разной длины с действиями внизу
Кнопки карточек можно выровнять по нижнему краю строки, не задавая одинаковую фиксированную высоту текстам.
Круглый аватар с сохранением пропорций
Аватар можно вписать в квадратную область и обрезать кругом, сохраняя пропорции изображения.
Вложенное оглавление: списки без потери иерархии
Вложенный список помогает показать разделы и подразделы, сохраняя их связи в HTML.
Сетка формы: подписи и поля без ломких ширин
Форму можно разложить по колонкам, сохраняя каждую подпись рядом со своим полем и удобный порядок Tab.
Разделитель с подписью без лишней разметки
Декоративные линии вокруг короткой подписи можно создать псевдоэлементами, оставляя смысловой текст в HTML.
Оглавление статьи и устойчивые якоря
Оглавление длинной статьи помогает переходить к конкретным ответам и делиться ссылками на отдельные разделы.
Пустой результат: объяснение и следующий шаг
Пустое состояние интерфейса должно объяснять, почему элементов нет и что пользователь может сделать дальше.