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