HTML Academy
10K subscribers
5.33K photos
172 videos
4 files
3.34K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Media is too big
VIEW IN TELEGRAM
Почему одни джуны уходят через полгода, а другие вырастают в сильных разработчиков?

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

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎖 Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍4🔥3
Сегодня — последний день «Акции-конструктор».

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

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

Обсудить условия →
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥4👍3❤‍🔥2🤣1
Видеофон на главной, всплывающий баннер с летающими курицами, кнопка, которая трясётся без причины — всё это раздражает пользователей и ломает UX.

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

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥75🔥5
Forwarded from CSS Боль
Вывести значение CSS-переменной прямо на страницу — без JavaScript. Звучит как фантастика, но CSS это умеет: две строчки, работает во всех браузерах.

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

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

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍6❤‍🔥3
Стандартные ease и ease-in не всегда дают нужный эффект — движение получается слишком механическим или предсказуемым.

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

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

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍44🔥3❤‍🔥2
Qwen Code — AI-агент для VS Code, который генерирует готовый код прямо в терминале.

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

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

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍117❤‍🔥43🔥2
Forwarded from CSS Боль
Круглый вырез в карточке — пять обёрток, 20 строчек CSS и сломанный фон на стыках блоков. Знакомо?

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

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

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

Читать статью → https://habr.com/ru/articles/993310/
🔥9❤‍🔥33👏1
Мы учим писать код, а не полагаться на удачу. Но сегодня — исключение.

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

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

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

Что выпадет:

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

Да, проигравших нет. Да, мы в курсе, что это не совсем научный подход. Но давайте попробуем.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👏4🤣432❤‍🔥1
Cursor, Claude Code, Qwen Code — инструменты есть, а системы нет. Большинство разработчиков используют ИИ от случая к случаю: спросил — получил ответ — забыл.

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

🧬 Записаться на курс
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤‍🔥3321
Media is too big
VIEW IN TELEGRAM
ИИ-агенты в разработке: костыль или суперсила?

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

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎖 Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
4❤‍🔥22👍1
Forwarded from CSS Боль
DUMP SPB 2026 × HTML Academy

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

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

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

Конференция · О докладе
🔥5❤‍🔥331
Forwarded from CSS Боль
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
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥32👍2🔥221
text-align: justify делает текст аккуратным на первый взгляд, но может создать «реки» из пробелов и ухудшить читаемость.

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

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤‍🔥2
Media is too big
VIEW IN TELEGRAM
CSS scroll-driven animations

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

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

Полный выпуск:
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥32❤‍🔥2
Ставите z-index: 9999, а элемент всё равно прячется под другим? Дело не в числе, а в контексте наложения.

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

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4🤣4❤‍🔥11
text-decoration: none — одна строка, которая убирает подчёркивание ссылки. Но стоит ли это делать?

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

🚀 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍21❤‍🔥1
Пятница 13-е: AI «сломал» сайт — а мы даём скидки до 50%

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

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

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

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

🎁 Пройти квиз: https://mrqz.me/friday13
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥3❤‍🔥1
Макет есть, а мобильной версии нет. Состояния кнопок не прописаны, дизайнер занят — и задача висит.

Курс «Дизайн для фронтендеров» учит решать такие задачи самостоятельно. Восемь разделов: Figma, 8px-сетка и вертикальный ритм, типографика, цвет и контрастность с учётом доступности, адаптив без готовых макетов и UI-анимация. В каждом — теория, разбор кейса и практика с эталонным решением.

Подходит разработчикам с базовым знанием HTML и CSS, которые хотят перестать зависеть от дизайнера в типовых интерфейсных задачах. #levelup #htmlacademy

🎁 Записаться на курс
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥21