Как узнать, что юзер кликнул. События мыши в JS
➿➿➿➿➿➿➿➿➿➿➿➿

Мышь — один из самых привычных способов взаимодействия с веб-страницей, и JavaScript даёт разработчику базовые инструменты, чтобы реагировать на действия пользователя. Мышиные события позволяют «слушать» клики и движения, создавая динамичные и удобные интерфейсы.

В статье разбираем ключевые события: click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave и contextmenu. На примерах показываем, как навешивать обработчики, менять состояние интерфейса при нажатии и отслеживать координаты курсора. В конце даём направление для практики: как подступиться к простому перетаскиванию на связке mousedown → mousemove → mouseup. #js #events

🔶 Читать статью

Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link
➿➿➿➿➿➿➿➿➿➿➿

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

В статье разбираем три псевдокласса: :link для непосещённых ссылок, :visited для уже открытых пользователем и современный :any-link, охватывающий оба состояния. Покажем безопасные приёмы стилизации и разберём порядок правил: от общего (:any-link) к более специфичным (:link, :visited), чтобы стили не конфликтовали. #html #css

🌟 Читать статью

👍 Чемпионат по вёрстке глазами жюри

Это взгляд изнутри финала чемпионата по вёрстке. Автор — Артём Леванов, Front Lead в WebRise, партнёре-работодателе HTML Academy: он показывает, как жюри оценивало работы финалистов в «боевых» критериях — от удобства и адаптивности до анимаций и аккуратной работы с SVG. Это разбор конкретных решений, которые повышали или снижали оценку, и почему один лишь pixel-perfect без «живости» интерфейса уже не впечатляет.

Хочу выразить благодарность HTML Academy за доверие и возможность оценить сильные проекты, которые уже приближаются к уровню middle-разработчика. Это был очень позитивный и вдохновляющий опыт. Важно: финалисты не просто следуют макету, а предлагают собственные — порой более удачные — решения и уверенно идут в ногу с современными подходами к вёрстке.

📕 Читать статью

Уже совсем скоро на FrontendConf 2025 Александр Першин расскажет «Negative border radius — не больно». Чтобы разобраться ещё глубже и спокойно попробовать приёмы в деле, собрали материалы с интерактивными демонстрациями.

1️⃣ Основная демонстрация
Все этапы из презентации; текстовые пояснения добавим после выступления.

2️⃣ Знакомство с nebo.css — CSS-библиотекой для inverted и negative border radius

Утилитарные CSS-переменные + радиальные градиенты и CSS-маски; работает на неоднородных фонах, без дополнительных обёрток и псевдоэлементов.

3️⃣ Круглый вырез: по-старому vs через mask-image с одним radial-gradient()

Современное решение короче в разы; пример маски: radial-gradient(circle at 0 50%, transparent 74.5px, black 75px) — меньше кода, больше гибкости с фонами.

4️⃣ sibling-index() и sibling-count() — «считаем соседей» без батареи :nth-child(...)

Динамические компоненты с вычислениями в calc().

➿➿➿➿➿➿➿➿

Сохраняйте подборку — пригодится при внедрении паттерна в дизайн-системах и продакшн-вёрстке. А на конференции разберём, почему всё это работает именно так.

Зарплата стажёра и джуна на испытательном сроке. Что ждёт выпускников совместной программы обучения с ONLY?

Марианна Воденицкая, HRBP ONLY, рассказала про тестовое задание, интервью и особенности испытательного срока

Полный эфир с ONLY — по ссылке:

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

Прямой эфир с основателем студии разработки WAPP

HTML Academy и компания WAPP запускают синдикатный поток обучения под работодателя. Небольшая группа из 10 человек, четыре модуля за 8,5 месяцев и возможность проектной работы после выпуска — обучение адаптировано под потребности работодателя.

Приходите на эфир 23 октября в 12:00 (MSK), чтобы:

1️⃣ Узнать, как устроен фронтенд в студии разработки: какие задачи решают, с какими клиентами работают и что требуется от новичков.
2️⃣ Разобраться в формате проектной работы: как строится взаимодействие, что влияет на рост и когда пересматривается оплата.
3️⃣ Понять путь от обучения к первым заказам: что проверяют на собеседовании и как проходит адаптация.

Бонус: разыграем одно бесплатное место на программу среди первых 100 зарегистрировавшихся. Победителя объявим в конце трансляции.

Регистрируйтесь по ссылке — пришлём напоминание перед началом и расскажем, как попасть на обучение.

https://htmlacademy.ru/events/live-wapp

Голограммы без шейдеров и JavaScript — это вообще реально?
➿➿➿➿➿➿➿➿➿➿➿➿
Да, и в новом выпуске «CSS Боль» мы это доказываем.

Три слоя, конический градиент и два режима смешивания mix-blend-mode — вот и весь секрет переливающегося эффекта. Никакого WebGL, никаких библиотек. Только conic-gradient(), @property и правильное наложение слоёв.

Самое интересное: можно менять цвета, скорость вращения и параметры градиента прямо в интерактивной демке. Один эффект превращается в десятки вариантов — от тёплого свечения до холодного льда.

Разбираем на примере карточки заклинания из «Героев 3». Потому что ностальгия.

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

👍 Напоминаем: завтра в 12:00 (MSK) — прямой эфир HTML Academy × WAPP о синдикатном потоке программы «Обучение под работодателя».

И главное — среди первых 100 регистраций разыграем одно бесплатное место на совместную программу. Это 8,5 месяцев обучения с наставником и возможность проектной работы после выпуска.

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

1️⃣ Зарегистрируйтесь по ссылке ниже.
2️⃣ Подключитесь к трансляции — победителя объявим в финале.

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

https://htmlacademy.ru/events/live-wapp

Как понять, что юзер нажал клавишу: события клавиатуры в JavaScript

События keydown и keyup помогают обрабатывать взаимодействие с клавиатурой: когда срабатывают, чем отличаются и где применяются — от горячих клавиш до форм и простых игр. Плюс коротко о безопасности и доступности, чтобы решения были надёжными и удобными для всех.

В статье разбираются сами события, их работа при нажатии и отпускании клавиши, почему keypress считать легаси, и чем отличаются event.key и event.code: первое зависит от раскладки, второе — от физической клавиши. Есть мини-примеры и практические советы. #js #a11y

✅ Читать статью

Разбираем ограничения при трудоустройстве с ONLY

Предпочитаете работать дома или в офисе? Как вливаться в мир разработки до 18 лет? Марианна Воденицкая, HRBP ONLY, рассказала про удалёнку, возрастные и другие ограничения.

Полный эфир с ONLY — по ссылке:

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

Запись вчерашнего эфира с WAPP — на выходные

400₽/час на старте, пересмотр через 3-6 месяцев, проектная работа. Максим Ермилов рассказал про реальную экономику студии: почему нет постоянной занятости, как растут ставки и зачем нужна «скамейка запасных» из 30 человек.

Плюс — как клиенты продавили переход с Vue.js на React и что такое «собеседование по вайбу».

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