Скрипт молча не работает или страница падает с ошибкой в консоли. Разбираем, как проверить JavaScript на синтаксические ошибки, какие опечатки ломают код чаще всего и чем ошибка синтаксиса отличается от ошибки выполнения.
JSON — это текст, в котором программы передают друг другу данные: пары «ключ — значение», объекты и списки. Разбираем синтаксис на примерах, показываем, чем JSON отличается от XML и YAML, и какие ошибки в нём ломают всё чаще всего.
Когда вы кидаете ссылку в чат, соцсеть показывает карточку с картинкой и текстом. За неё отвечают теги Open Graph. Разбираем, какие теги нужны, каким должен быть og:image и как сбросить кэш превью в Telegram, Facebook и ВКонтакте, если картинку поменяли, а старая всё ещё висит.
Почему иконка сайта до сих пор называется favicon.ico, чем контейнер ICO отличается от обычного PNG, какие размеры действительно нужны и что делать, когда фавикон упрямо не обновляется.
Браузер не копирует вашу разметку в память один в один: он достраивает пропущенные теги, закрывает забытые и выкидывает лишние наружу. Разбираем, где HTML-дерево расходится с DOM-деревом и почему из-за этого молча не работают CSS-селекторы.
Как сделать тень блока и тень текста, чем inset отличается от обычной тени и почему красивая тень получается не из чёрного цвета. Готовый код для карточек, кнопок и наведения.
Разбираем, из чего складываются 100% в Lighthouse, почему половина усилий уходит впустую и какие метрики стоит чинить первыми. С инструментами под каждую задачу.
Освойте CSS псевдоклассы и псевдоэлементы для создания продвинутых интерактивных элементов и визуальных эффектов без JavaScript. Интерактивные примеры и лучшие практики.
Узнайте, как использовать CSS функцию clamp() для создания плавной адаптивной типографики и отступов. Практические примеры, калькулятор и лучшие практики.
Освойте CSS Grid Layout на практических примерах. Узнайте, как создавать сложные макеты с помощью grid-контейнеров, grid-элементов и адаптивных паттернов вёрстки.
Подробное руководство по раскладке CSS Flexbox. Разбираемся с флекс-контейнерами, флекс-элементами, выравниванием и реальными сценариями применения на примерах кода.
Как сделать анимацию в CSS, чем animation отличается от transition и почему движение дёргается. Готовые примеры для копирования и то, что появилось в CSS за последние два года.
Изучите CSS custom properties для создания динамических, поддерживаемых стилей. Узнайте, как создавать темы, отзывчивые дизайны и интерактивные компоненты с CSS переменными.
Разбираемся, как контейнерные запросы делают компоненты по-настоящему адаптивными. Строим макеты, которые подстраиваются под размер контейнера, а не только под ширину экрана.