Один тег img и одно свойство object-fit решают большинство задач с картинками на сайте. Разбираем, что вписать в разметку и стили, чтобы изображения не растягивались и не тормозили загрузку.
Как собрать маркированный, нумерованный и вложенный список, убрать точки для меню и не сломать разметку. Пошагово, с проверкой на каждом шаге.
Почему таблица ломает мобильную вёрстку, не держит sticky-заголовок и растягивает страницу горизонтально — и как это чинить без хаков.
За полчаса соберём три рабочих кнопки: обычную, кнопку-ссылку и disabled-состояние. Разберём, чем button отличается от div, и как не сломать доступность.
Пять способов задать один и тот же цвет в CSS дают разный результат при наведении, в тёмной теме и при расчёте контраста. Разбираем, какой формат выбрать под задачу.
Подключение шрифтов кажется парой строк CSS, пока текст не мигает при загрузке или сайт не тормозит из-за пяти начертаний. Разбираем, как подключить шрифт правильно и что настроить с первого раза.
Иконочный шрифт грузит один файл на весь набор иконок, но ломается на кешах, скринридерах и рендеринге. Разбираем, где иконочные шрифты проигрывают SVG и когда переход себя не оправдывает.
Разберём, чем margin отличается от padding, почему два соседних отступа схлопываются в один и как сделать одинаковые интервалы между блоками. К концу вы сможете расставить отступы осознанно, а не подбором цифр.
Вы поставили width: 300px, а блок занимает 342 пикселя и ломает вёрстку. Разбираем, из чего складывается размер элемента и как box-sizing чинит эту боль за одну строку.
Иконочный шрифт грузит 200 иконок ради двадцати нужных и ломает вёрстку у людей с дислексией. SVG-спрайты и React-компоненты решают это иначе. Разбираем цену каждого подхода на живой вёрстке.
Иконочный шрифт грузит весь набор глифов ради пяти иконок, ломается при сбое загрузки шрифта и плохо дружит со скринридерами. Разбираем, где SVG выигрывает, а где иконочный шрифт всё ещё уместен.
Как за час сделать так, чтобы страница печаталась без меню, баннеров и половины дизайна. Через CSS-медиазапрос print, без отдельного шаблона и серверного рендеринга.