HTML Academy

Пятница 13-е: AI «сломал» сайт — а мы даём скидки до 50%

Наш AI-агент «переписал» сайт. Кнопки съехали, блоки перепутались, логика поплыла. Мы не стали чинить — мы сделали из этого квиз.

Пять вопросов на логику и внимательность. Найдите, где система сломалась, — и получите скидку:

1️⃣ мидл-курсы и тренажёры — 50%,
2️⃣ профессия под работодателя — 20%,
3️⃣ лайт-профессии — две по цене одной за 29 000 ₽,
4️⃣ одна лайт-профессия — 22 000 ₽.

Квиз займёт две-три минуты. Скидки действуют с 13 по 15 февраля.

🎁 Пройти квиз: https://mrqz.me/friday13

text-decoration: none — одна строка, которая убирает подчёркивание ссылки. Но стоит ли это делать?

В статье показываем, как убрать подчёркивание через CSS и через инлайн-стили, когда это уместно — например, для ссылок-кнопок или карточек товаров, и как заменить стандартное оформление на своё: анимация, border-bottom, другой цвет. Отдельно о том, почему полностью убирать подчёркивание без замены — плохая идея для UX. #css #html

🚀 Читать статью

Ставите z-index: 9999, а элемент всё равно прячется под другим? Дело не в числе, а в контексте наложения.

В статье разбираем, как работает z-index: почему он действует только на позиционированных элементах, как локальные контексты наложения мешают элементу «выпрыгнуть» наверх, и что кроме position контекст создают transform, filter и opacity. Плюс практические советы по организации слоёв в проекте. #css #webdev

🎁 Читать статью

CSS scroll-driven animations

Разбираем, как с помощью одного CSS-свойства сделать временную шкалу прокрутки.

Демонстрации:
🎁 Прогрессбар со scroll-анимацией
🎁 Абсолютное позиционирование

Полный выпуск:
🐭 Смотреть на YouTube
🐹 Смотреть в VK

text-align: justify делает текст аккуратным на первый взгляд, но может создать «реки» из пробелов и ухудшить читаемость.

В статье разбираем CSS-свойство text-align и его значения: left, right, center, justify. Отдельно рассматриваем start и end — они работают корректно при любом направлении текста, в отличие от привычных left и right. После теории закрепляем всё на практике в тренажёре. #css #webdev

🎁 Читать статью

clip-path и CSS-маски не меняют форму блока — они её имитируют. Рамка, тень, outline не знают о вырезах и работают как с обычным прямоугольником.

Свойство border-shape работает по-другому. Как border-radius научил рамки скругляться, так border-shape + функция shape() учат их принимать произвольную форму. Рамки повторяют контур, box-shadow и outline тоже.

В спецификации CSS Borders Level 4 уже есть черновик, а в Chrome Canary — первые работающие прототипы. Пока ждём поддержку в браузерах, самое время разобраться с функцией shape().

В новом выпуске «CSS Боли» — как мы дошли от border-radius до произвольных форм и почему маски оказались тупиком для рамок и теней.

🐭 Смотреть на YouTube
🐹 Смотреть в VK

DUMP SPB 2026 × HTML Academy

Весь внешний вид компонента — в CSS-переменных. JavaScript только переключает состояния. Звучит непривычно, но это рабочий подход.

На DUMP SPB 13 февраля Александр Першин выступит с докладом «Реактивный CSS» — про перенос логики отображения из JavaScript в стили. В докладе — сравнение двух реализаций одного компонента: классической на JS и реактивной на CSS. Можно будет оценить разницу в объёме и сложности кода.

Промокод PERSHIN — скидка 10% на билет.

Конференция · О докладе

ИИ-агенты в разработке: костыль или суперсила?

Василий Вишняков, основатель Bquadro, разрешает разработчикам использовать ИИ-агентов в работе. Но с одним условием.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎖 Программа обучения

Cursor, Claude Code, Qwen Code — инструменты есть, а системы нет. Большинство разработчиков используют ИИ от случая к случаю: спросил — получил ответ — забыл.

На курсе «Фронтенд на автопилоте» вы пройдёте полный цикл разработки интернет-магазина вместе с ИИ: настройка окружения, генерация компонентов, тесты, документация, интеграция API. К концу курса — готовый проект и навык, который встраивается в ежедневную работу. #htmlacademy #levelup

🧬 Записаться на курс

Мы учим писать код, а не полагаться на удачу. Но сегодня — исключение.

С 6 по 8 февраля ко Дню науки разыгрываем скидки с помощью удачи.

Как участвовать:

1️⃣ Отправьте в комментарии эмодзи 🎰 — Телеграм сам прокрутит барабан.
2️⃣ Скопируйте ссылку на сообщение с результатом.
3️⃣ Отправьте ссылку нашему менеджеру.

Что выпадет:

🎁 Три семёрки (777) — скидка 40% на любую профессию или курс и второй курс в подарок.
🎁 Два одинаковых символа — скидка 30% на любую профессию или курс.
🎁 Все разные — скидка 20% на любую профессию или курс.

Да, проигравших нет. Да, мы в курсе, что это не совсем научный подход. Но давайте попробуем.

Круглый вырез в карточке — пять обёрток, 20 строчек CSS и сломанный фон на стыках блоков. Знакомо?

Классический подход заставляет «нарезать» карточку на кусочки: колонка для контента, колонка для выреза, внутри — три блока с flex-grow и radial-gradient. И всё ломается, если карточке задать градиентный фон — состыковать части принципиально невозможно.

Одно свойство mask-image с тем же radial-gradient решает задачу без единой обёртки. Карточка остаётся цельной — и корректно тянется, и принимает любой фон. В статье собираем оба варианта пошагово и сравниваем.

Демонстрация: https://htmlacademy.ru/demos/235

Читать статью → https://habr.com/ru/articles/993310/

Qwen Code — AI-агент для VS Code, который генерирует готовый код прямо в терминале.

Создание даже простой портфолио-страницы обычно занимает часы: разметка, стили, адаптивность, тёмный режим.

В статье показываем, как за три запроса к Qwen Code получить готовую страницу с семантическим HTML, CSS-переменными и поддержкой тёмного режима. Разбираем установку расширения Qwen Code Companion в VS Code, запуск через команду qwen и пошаговое взаимодействие: от структуры проекта до финальной стилизации. #ai #tools

🎁 Читать статью

Стандартные ease и ease-in не всегда дают нужный эффект — движение получается слишком механическим или предсказуемым.

Функция cubic-bezier() позволяет задать собственную кривую ускорения через четыре числа. С ней можно сделать анимацию с эффектом инерции, лёгкого залипания при наведении или упругого отскока.

Разбираем, как работают координаты управляющих точек и где это применяется: в модалках, карточках, галереях. #css #animation

🎁 Читать статью

Вывести значение CSS-переменной прямо на страницу — без JavaScript. Звучит как фантастика, но CSS это умеет: две строчки, работает во всех браузерах.
➿➿➿➿➿➿➿➿➿➿➿➿
Связка counter-reset + counter() + content превращает CSS-переменную в текст на экране. Для целых чисел — элементарно. Для дробных — обход через calc(), чтобы подсказать счётчику тип данных. А если в переменной хранятся градусы или пиксели? Тут помогает tan(atan2()) — трюк, который убирает единицу измерения из значения.

В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. Попробуйте в демке самостоятельно и смотрите разбор целиком.

🐭 Смотреть на YouTube
🐹 Смотреть в VK

Видеофон на главной, всплывающий баннер с летающими курицами, кнопка, которая трясётся без причины — всё это раздражает пользователей и ломает UX.

Собрали топ примеров плохой анимации: что тормозит загрузку, что отвлекает от контента, что вызывает дискомфорт и мешает доступности. И да, пришлось отключить адблок ради исследования. #css #a11y

🎁 Читать статью

Сегодня — последний день «Акции-конструктор».

За выходные мы узнали много нового о ваших переговорных навыках. Курс за 500 ₽? Видели. Три профессии по цене половины? Тоже было. Но мы не сдаёмся.

🎁 Скидка на курсы, две профессии вместе, бонус к обучению — напишите свои условия. Обсуждаем до полуночи.

Обсудить условия →

Почему одни джуны уходят через полгода, а другие вырастают в сильных разработчиков?

Василий Вишняков из Bquadro рассказывает, как в студии выстроена адаптация новичков и почему компания сознательно нанимает людей без опыта.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎖 Программа обучения

Мастер анимаций: SVG-анимации

На курсе вы научитесь оживлять векторные изображения — от простых иконок до сложных диаграмм и главных экранов. Разберём три подхода к SVG-анимации: CSS, SMIL и JavaScript, и освоим библиотеки GSAP, Anime.js, Snap.svg и KUTE.js.

Вас ждут 50 пошаговых примеров: кастомные курсоры, морфинг форм, эффект обводки и закрашивания, анимация текста, масок и паттернов. Каждый пример можно повторить и адаптировать под свои задачи.

После курса вы будете готовить и оптимизировать SVG, выбирать подходящий инструмент для каждой задачи и понимать, когда стоит перейти к Canvas. #htmlacademy #levelup

🎁 Смотреть программу