Загрузка...
Шаблон html-страницы с шапкой, подвалом и двумя боковыми панелями по бокам от контента
Классические 3 колонки
Метка: layout
Выстраивание содержимого
Заголовок, описание и изображение равномерно выстраиваются внутри соседних карточек
Стопка блинчиков
Такой html-макет, обычно называемый sticky footer, часто используется как для веб-сайтов, так и для приложений.
Разорванный блинчик
HTML-макет, который растягивается в зависимости от пространства и привязывается к следующей строке минимального размера.
RAM (Repeat, Auto, Minmax)
Адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами
Адаптивная боковая панель
Макет, в котором для боковой панели указаны минимальный и максимальный размеры, а остальной контент заполняет оставшееся пространство.
Центрирование элемента
Центрирование элемента внутри его родителя одной строкой кода: place-items: center
Классическая сетка для 12 колонок
Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat()
aspect-ratio [quirksmode]
Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) – важная, ориентированная на пользователя метрика для измерения визуально-воспринимаемой скорости загрузки страницы
First Input Delay (FID)
Ориентированная на пользователя метрика для измерения реакции на нагрузку, помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта
Отладка сдвигов макета (layout shifts)
Как определять и исправлять сдвиги макета с помощью Layout Instability API и DevTools.
Cumulative Layout Shift (CLS)
Накопительный сдвиг макета – количественный показатель для измерения визуальной стабильности, для оценки, как часто посетители сайта сталкиваются с неожиданными перемещениями контента.
Лучшие практики для измерений Web Vitals
Как измерить Web Vitals с помощью существующих инструментов аналитики.
Web Vitals
Количественная оценка впечатления от web-сайта и поиск возможностей для улучшения качества и удобства для пользователя.
Выезжающая боковая панель (sidebar)
Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах
Календарь с помощью CSS-grid в несколько строк кода
Макет сетки календаря – идеальный кандидат для использования CSS-grid и его свойств: grid-template-columns и grid-column.
Адаптивная CSS-grid сетка в 3 колонки с помощью 3-х CSS-свойств
Как сделать простой адаптивный макет с сеткой в 3 колонки с помощью CSS-grid и всего 3 CSS-свойств grid-area, grid-gap и grid-template-area.
Float-блоки по углам контейнера c текстом вокруг
Как с помощью только CSS расположить картинку или любой float-блок в нижнем углу или по бокам контейнера и текстом вокруг неё.
CSS-свойство aspect-ratio
Применение CSS-свойства aspect-ratio для установки отношения сторон контейнеру вместо использования трюков с помощью padding-top: 56.25% и несколько практических примеров.