JavaScript в браузере
5 минутСписок с кнопкой «Показать ещё»: доступная реализация на HTML, CSS и JavaScript
Создаём список меток с показом и скрытием дополнительных пунктов, сохраняя семантику, клавиатуру и работу без JavaScript.
Архив
Тема: Адаптивность
CSS: каскады и оформление
4 минутыHover-эффекты для кнопок в CSS: состояния без вреда для доступности
Как оформить :hover, :focus-visible и :active у кнопки, добавить плавный переход и учесть сенсорные устройства и reduced motion.
CSS: каскады и оформление
4 минутыЧто такое CSS и с чего начать его изучение
Первые шаги в CSS: подключение файла, синтаксис правила, селекторы, каскад, box model, раскладка и учебный маршрут.
CSS: каскады и оформление
4 минутыСтилизация текста в CSS: шрифт, размер, интерлиньяж и читаемость
Практическое руководство по типографике CSS: семейство, размер, насыщенность, высота строки, длина строки и адаптивный текст.
CSS: каскады и оформление
4 минутыКак скрыть элемент с помощью CSS и не сломать доступность
Сравниваем display, visibility, opacity, hidden и visually-hidden, а также влияние каждого способа на раскладку, фокус и скринридер.
CSS: каскады и оформление
5 минутИзображения в HTML и CSS: адаптивный размер, object-fit и фон
Как выбрать между img и background-image, сделать изображение адаптивным, управлять обрезкой и предотвратить сдвиги макета.
CSS: каскады и оформление
4 минутыЕдиницы измерения CSS: px, rem, em, %, vw и другие
Как выбирать абсолютные и относительные единицы CSS для текста, отступов, контейнеров, viewport и адаптивной сетки.
CSS: каскады и оформление
4 минутыАдаптивная вёрстка на CSS: чем она отличается от фиксированного макета
Принципы адаптивной вёрстки: mobile first, гибкие контейнеры, Grid, Flexbox, медиазапросы, изображения и тестирование.