HTML Academy

Начинающие верстальщики в своих первых проектах часто задают высоту элементам, чтобы попасть в размеры чётко по макету. Давайте разберёмся, а действительно ли высота везде нужна? Вёрстка макета часто начинается с попытки «задать высоту» элементам — но CSS-свойство height умеет гораздо больше, чем просто фиксировать размер. В статье подробно разбираемся, как работает высота: при указании точного значения блок сохраняет заданный размер независимо от содержимого, а когда применяется относительная запись в процентах, высота рассчитывается от родительского элемента. Это позволяет управлять вертикальным пространством — от декоративных элементов до областей, наполненных контентом. 🎯 Читать статью

Цвет в веб-странице — это не только «чёрный» или «белый», а целая система представления чисел, отражающая интенсивность, оттенок и прозрачность. В статье разбираем основные форматы задания цвета в таблицах стилей: от традиционных шестнадцатеричных записей, через десятичные каноничные значения, до более современных пространств цвета, основанных на восприятии человека. Каждый формат имеет свои сильные стороны и области применения, и понимание этих различий помогает создавать более точные, согласованные и устойчивые визуальные решения. #цвет 📚 Читать статью

Статья «Восхитительный Range Syntax в CSS» Помните сĸазĸу про мальчиĸа, ĸоторый ĸричал «волĸи»? Примерно таĸ же в 2025 году случилось с «программированием на CSS». Вышла фунĸция if() . Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчиĸи пошли читать специфиĸации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею. В ĸонце 2025 года Chrome выĸатил революционный Range Syntax For Style Container Queries. Обновлённый style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наĸонец-то получили мощную условную логиĸу в CSS, но мало ĸто это заметил. В статье мы возрождаем идею программирования на CSS. На примере паттерна — «выделение диапазона дат в ĸалендаре» — разберём, ĸаĸ обычная JS-логиĸа превращается в CSS-логиĸу (спойлер: очень просто). 📚 Читать статью → https://habr.com/ru/articles/1002216/ 👉🏻 Попробовать демку → https://htmlacademy.ru/demos/249

CSS-псевдоклассы задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение. Интерактивные элементы веб-страницы живут не сами по себе, а в зависимости от действий пользователя. В статье разбираем три базовых состояния элементов: при наведении курсора, при фокусе управления с клавиатуры или тач-устройства и в активном состоянии при нажатии. Показываем, как с помощью соответствующих правил стиля управлять внешним видом кнопок и ссылок в каждом из этих случаев, чтобы интерфейс был понятным и удобным в использовании. ⚡️ Читать статью

CSS Masking уже почти Widely Available, а многие до сих пор её игнорируют. В новом выпуске «CSS Боли» разбираем CSS-маски для тех, кто с ними не знаком, с помощью интерактивных визуализаций. — Что такое маскирование и как оно работает. — Главная «киллер-фича» масок. — Принцип работы масок. — 4 свойства, которые закрывают 95% задач. — Классный пример маски в реальном интерфейсе. Попробуйте в демке самостоятельно и смотрите разбор целиком. Если работаете с UI — это надо знать. 🎯 Смотреть в VK 👉🏻 Канал «CSS Боль»

👍 HTML Academy получает паспорт. Сегодня нам — 14 лет! 14 лет кода, первых строчек, успешных выпускников и больших карьерных поворотов. И по такому поводу — подарки для всех. Для тех, кто с нами давно, и для тех, кто только начинает путь в разработке. Заходите на сайт Академии, найдите иконку с подарком и крутите колесо. Внутри — промокоды, скидки, курсы и даже годовая подписка на тренажёры бесплатно. 🎁 Испытать удачу

План на выходные: эфир про вёрстку, AI и рост в студии Директор по развитию и тимлид разработки SimpleUp рассказали, как устроена работа в компании, которая за год выросла втрое: — почему каждого разработчика учат и фронтенду, и бэкенду; — зачем студия растит новичков вместо найма с рынка; — почему вёрстка будет нужна всегда — даже когда нейросети собирают сайты; — как в команде используют AI и почему важнее всего мышление разработчика. Если на неделе было не до контента — самое время включить. 👉🏻 Смотреть в VK 🎯 Программа обучения

Добавляете фичу — и половина приложения ломается. Часто причина — отсутствие архитектуры. На курсе «Паттерны проектирования» разбираем 25 паттернов в контексте JavaScript и фронтенд-разработки. Каждый привязан к практической задаче: Adapter помогает работать с «кривым» API, Observer убирает ручную синхронизацию между компонентами, State упрощает управление состояниями интерфейса. После курса вы начнёте видеть проект как систему: где нужна фабрика, где декоратор сэкономит часы поддержки, а где MV*-подход организует UI. #htmlacademy #levelup ✨ Записаться на курс

День рождения HTML Academy × Колесо Фортуны С 20 по 24 февраля — праздничные дни в Академии! В честь дня рождения на сайте появится настоящее колесо с подарками: одно вращение колеса — и в вашу корзину падает скидка 20, 30 или 50%, выгодное комбо или даже годовая подписка на тренажёры. Не упустите шанс отпраздновать 14-летие вместе с нами и забрать свой подарок. Коротко: 1 вращение • 20–24 февраля • Подарки всем. 🎁 https://htmlacademy.ru

Контент-менеджер прислал фото 1920×1080, а в карточке места 300×200. Без object-fit получается сплющенный кот. Свойство object-fit управляет тем, как <img> или <video> вписывается в свой контейнер. cover заполнит бокс с обрезкой лишнего, contain впишет картинку целиком с сохранением пропорций, fill растянет как есть. В статье разбираем каждое значение на примерах и показываем, зачем добавлять max-width: 100%, чтобы картинки не ломали сетку. #css #html 📕 Читать статью