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

И главное — среди первых 100 регистраций на эфир разыграем одно бесплатное место на совместную программу.

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

В эфире обсудим программу второго потока: почему Only делает ставку на сильную вёрстку и JavaScript, как проходят стажировки в команде и какие качества помогают новичкам закрепиться в digital-агентстве.

🪻 Зарегистрироваться на эфир

👍 Редакторская рассылка снова с вами!

Мы перезапускаем самую человечную рассылку для айтишников.

Каждую пятницу в вашем инбоксе — свежие материалы, полезные ссылки и немного нашего фирменного юмора.

Никакого спама, никакого AI — только живые тексты, написанные руками.

🔺 Подписаться

Как сделать свой сайт на VPS. Самая простая инструкция
➿➿➿➿➿➿➿➿➿➿➿➿
Женя, похоже, провалился во временную яму: вокруг — двухтысячные и один-единственный веб-сервер — Apache. Чтобы выбраться, он поднял самый простой сервер и записал пошаговую памятку. #vps #linux

Кажется, материал сознательно ограничен базовой настройкой. Домен, SSL, Nginx, а также связки с Node.js и PHP — это логичные следующие шаги.

🌼 Читать статью

Планы на выходные: посмотреть вчерашний эфир с Only

Час разговора с HR-лидом и тимлидом фронтенда о том, как джунам попасть в digital-агентство.
Главный инсайт: навык коммуникации может быть важнее умения программировать.

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

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

🍎 HTML5 уже совсем большой. Угадайте, сколько ему лет

FrontendConf 2025 × HTML Academy

Уже на следующей неделе на FrontendConf — крупнейшей профессиональной конференции фронтенд-разработчиков в России — выступит Александр Першин, сооснователь HTML Academy.

Во время доклада соберём мини-утилиту для «обратного радиуса» на чистом CSS. В процессе разберём линейные и радиальные градиенты, маски, CSS-переменные и магию calc().

0️⃣ FrontendConf 2025
1️⃣ 20–21 октября
2️⃣ Кластер «Ломоносов», Москва

Подробнее о докладе → https://frontendconf.ru/moscow/2025/abstracts/15798

P.S. — говорят, что если пройти тест из двух вопросов на сайте конференции, то можно получить 10% скидку на конференцию.

Как сделать анимированную светящуюся рамку без JavaScript?
➿➿➿➿➿➿➿➿➿➿➿➿
Правильно — на conic-gradient(). Конические градиенты умеют больше, чем кажется на первый взгляд.

Новый выпуск «CSS Боль» про конические градиенты:
✓ От базового синтаксиса до декоративных эффектов
✓ Как работают color stops и параметры from и at
✓ Почему между первым и последним цветом резкий переход
✓ Проверяем всё по спецификации W3C

Внутри — интерактивная демка, где можно поиграться с каждым примером самостоятельно.

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

Как узнать, что юзер кликнул. События мыши в 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().

➿➿➿➿➿➿➿➿

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