HTML Academy

Сегодня узнаем, как попасть в команду, которая делает сложные проекты

Что на самом деле ждёт новичка в агентстве? Как устроен рост, когда ты работаешь удалённо? И почему одни команды готовы тратить время на джунов, а другие — нет?

В 12:00 (MSK) основатель Bquadro расскажет о реальных задачах, нагрузке и пути от обучения до работы в штате. Без приукрашиваний.

Обсудим:
0️⃣ как выглядит первый год в агентстве;
1️⃣ что даёт система наставничества;
2️⃣ как попасть на совместную программу.

В финале разыграем бесплатное место на программу!

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

Методы findLast() и findLastIndex() делают то же, что find и findIndex, только проходят массив с конца. Если нужный элемент ближе к концу большого массива — это экономит ресурсы.

В статье разбираем оба метода на примерах: когда find и findLast вернут разные результаты, как проверить поддержку в старых браузерах и почему с февраля 2025-го методы безопасны для продакшена. #js

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

❗️Завтра в 12:00 — эфир, который стоит посмотреть

Основатель Bquadro расскажет, сколько на самом деле нужно джуну, чтобы стать полезным агентству. Как выглядит реальная фронтенд-разработка в продакшене: сайты, сервисы и корпоративные системы для крупных клиентов. И почему в Bquadro осознанно инвестируют время и ресурсы в рост новичков.

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

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

Завтра в 12:00 (MSK). Регистрируйтесь — будет честно и по делу.

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

Сложный круговой прогрессбар — простая реализация

Круговой прогрессбар можно сделать на одном div и одном CSS-свойстве. Без SVG, без JavaScript. Приём работает во всех современных браузерах.

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

Наверняка вы видели видео с «невозможной коробкой» — нажимаете на переключатель, а через пару секунд вылезает палец и расщёлкивает кнопку. Наконец-то кто-то сделал это и в вебе.

В статье — 8 демок с CodePen: от стилизации чекбоксов через кастомные свойства до 20+ анимированных кнопок на чистом CSS. Hover-эффекты, светящиеся формы входа, иконки соцсетей со всплывашками — и та самая лапка в финале. #css #html

🌀 Читать статью

В начале 2025-го казалось, что всё кончено: ИИ нас заменит, разработчиков уволят, стартапы будут делать в одиночку люди без опыта, а один джун с агентами закроет работу целой команды.
К концу года паника прошла — наступило нейроотрезвление.
➿➿➿➿➿➿➿➿➿➿
В новом выпуске «CSS Боли» спокойно разбираемся, что на самом деле происходит. Почему ИИ стал удобным прикрытием для увольнений, а не их причиной. Сколько денег сожгли на вайб-кодинге. И главное — ставим эксперимент: даём ChatGPT реальную задачу и смотрим, как он с ней справляется. Спойлер: после долгих препирательств нейросеть призналась — «Я соврал концептуально».

Ролик для всех, не только для программистов: код будет, но понимать его не нужно — всё и так видно. Если тревожно за будущее профессии, самое время посмотреть и выдохнуть.

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

Первый прямой эфир с основателем Bquadro

Поговорим с основателем студии о том, как в агентстве с 20-летней историей и 600+ проектами растят фронтендеров, какие задачи доверяют новичкам и как мы вместе с Bquadro и другими компаниями запускаем совместную программу обучения.

На эфире 22 января в 12:00 (MSK) разберём:

1️⃣ какие проекты в портфолио агентства, с какими клиентами работает и почему им нужны фронтендеры;
2️⃣ как устроено наставничество, что такое план развития и как джуны дорастают до руководителей;
3️⃣ формат работы, оплачиваемую стажировку, удалёнку и что нужно, чтобы пройти путь от обучения до оффера.

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

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

Учитывают ли работодатели участие в чемпионате при найме?

Алексей Кузьмин, технический директор Bauns и член жюри, рассказывает, на что обращает внимание, когда видит чемпионат в резюме.
Это фрагмент из прямого эфира с подведением итогов второго сезона.

📌Алгоритмы и структуры данных: код быстрее, интерфейсы надёжнее

Фронтендеру, который хочет прокачать основы computer science, стоит взглянуть на курс по алгоритмам и структурам данных. Структуры данных и алгоритмы дают предсказуемый код и чёткую архитектуру, а алгоритмические собеседования перестают быть лотереей.

Что разберёте на практике — и где это пригодится прямо в продакшене:

➿ O-большое без теории ради теории — находите «дорогие» циклы ещё до ревью;
➿ Обход деревьев и графов — ускоряете diff-алгоритм шаблонизатора и виртуального DOM;
➿ Хеш-таблицы и Map/Set — убираете дубли среди 100 000 элементов за O(1) вместо O(n);
➿ Поиск и quicksort — «живой» поиск и бесконечный скролл без фризов.

Какой алгоритм в последний раз выручил ваш проект? Делитесь в комментариях.

Grid Layout — одна из самых зрелых технологий в CSS. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.

CSS Grid теперь можно анимировать напрямую — без JavaScript и обходных приёмов. В статье объясняем, что свойства grid-template-columns и grid-template-rows стали анимируемыми во всех современных браузерах, поэтому изменения сетки можно плавно задавать через transition.

Разбираем, где это особенно полезно: для раскрывающихся сайдбаров, акцентирования карточек и интерфейсов, где сетка должна мягко перестраиваться. #css #baseline

🟢 Читать статью

Смежный селектор в CSS, обозначаемый знаком плюс (+), позволяет выбрать элемент, который идёт сразу после другого элемента и находится с ним на одном уровне DOM.

В статье разбираем, как работает селектор A + B, и показываем, где он особенно удобен: когда нужно оформить «следующего соседа» (например, абзац сразу после заголовка) без дополнительных классов. #css #html

✨ Читать статью

Рамки в форме вырезов — без SVG, картинок и костылей
➿➿➿➿➿➿➿➿➿➿
Кажется, CSS-маски умеют всё… пока дизайнер не говорит: «А можно, чтобы рамка повторяла форму выреза?»

В новом выпуске «CSS Боль» рассказываем, почему привычные border и box-shadow внезапно перестают работать, и как современный CSS позволяет решить задачу аккуратно, надёжно и с отличной поддержкой.

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

CSS свойство transform позволяет манипулировать элементами на вашей веб-странице, изменяя их форму, размер и положение. В общем виде свойство transform записывается так: transform: функция(значение);, где функция — это тип преобразования, который вы хотите применить, а значение — параметры этого преобразования.

В статье на практических примерах разбираем базовые функции translate, rotate, scale и skew — как сдвигать, поворачивать, масштабировать и наклонять элементы через transform.

А ещё показываем, как эти преобразования анимировать с помощью transition и @keyframes, и напоминаем важное: transform — для эффектов и анимаций, а для раскладки страницы лучше использовать flexbox или grid. #css #html

📌 Читать статью

«Новогодние канИИкулы — битва за Кексобота» завершилась!

С 1 по 11 января шла настоящая битва: тренажёры были открыты, а jQweny пытался удержать контроль над системой. Все праздники вы проходили задания и испытания, участвовали в викторинах, искали подарки на сайте и набирали баллы — каждый шаг помогал восстановить инфраструктуру и вернуть Кексобота. Человеческий код, внимание к деталям и упорство оказались сильнее автоматической «оптимизации».

Сегодня в 20:00 (MSK) мы подведём результаты Новогодних канИИкул и разыграем призы среди самых активных — тех, кто вложил больше усилий для спасения Кексобота.

🐭 Смотреть в YT
🐹 Смотреть в VK

Статья “Верстаем сложный прогрессбар в 2026 году”

Опубликовал на Хабре текстовую версию свежего выпуска CSS Боли про сложный круговой прогрессбар для тех, кому удобнее читать, а не смотреть:

https://habr.com/ru/articles/983810/

P.S.: Пошаговая демка со всем кодом и пояснениями находится здесь:

https://htmlacademy.ru/demos/251

Запись доклада “Negative border radius — не больно” с FrontendConf 2025

В конце 2025 я рассказал про то, как создавалась и как устроена библиотека nebo.css, которая позволяет делать впуклые углы буквально в пару строчек нативного CSS.

Помимо кода в докладе есть несколько баек из старых времён и общие размышления про современный CSS.

И теперь Дедушка Мороз привёз вам запись доклада под ёлочку. Пока запись есть только на ютюбе:

https://www.youtube.com/watch?v=WmiIvorelhw

В CSS универсальный селектор * (звёздочка) используется для применения стилей ко всем элементам на веб-странице. Этот селектор полезен, когда необходимо установить общие стили для всего документа, например, для сброса стандартных отступов или задания базового шрифта.

В статье показываем, что именно выбирает *, и разбираем базовый пример: обнуляем margin и padding, задаём шрифт для всего документа.

А ещё напоминаем про важную оговорку: если навесить на универсальный селектор слишком много правил, это может замедлить загрузку страницы. #css #webdev

📌 Читать статью

С 1 по 11 января стартует масштабная акция: «Новогодние канИИкулы — битва за Кексобота». Конец 2025-го: ИИ уже смотрит на нас из баннеров и статей — и, похоже, добрался до самого неприкосновенного. Кексобот захвачен, но у нас есть бэкдор и всего 11 дней, чтобы вернуть его домой. В эти дни участникам откроют доступ ко всем тренажёрам: задания, испытания и вызовы, ежедневная фронтенд-викторина и баллы за каждую полезную «попытку чинить систему».

jQweny уверяет, что разработчиков можно заменить, но у него есть слабое место: он не умеет подделывать настоящий прогресс. В телеграм-боте каждый день появится список тренажёров, которым сейчас важнее всего ваша помощь, а в 10:00 (MSK) придут вопросы викторины — ответ нельзя изменить, и на следующий день вопросы исчезнут. Зовите друзей и проходите вместе: каждое действие добавляет баллы в общий прогресс и приближает нас к моменту, когда Кексобот снова будет на своей стороне. 1 января начинается самое главное испытание этой зимы!

👍 Подробнее