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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🎁 С 23 по 25 января мы празднуем Татьянин день и дарим подарок тем, кто учится: месяц индивидуальной работы с наставником при покупке Лайт-профессии.

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

В акции участвуют профессии «Фронтенд-разработчик» и «JavaScript-разработчик» за 29 000 ₽, а также студенческое комбо: обе профессии за 35 000 ₽ — с тем же бонусом.

🎁 Оставить заявку

«Джуны и сеньоры — это позиции, на которых компания не зарабатывает»

Кто тогда приносит деньги? Илья Лебедкин из Addamant раскрывает экономику найма и называет сроки роста от джуна до мидла.

Полный эфир с Addamant — по ссылке:
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪫 Программа обучения