Media is too big
VIEW IN TELEGRAM
Почему одни джуны уходят через полгода, а другие вырастают в сильных разработчиков?
Василий Вишняков из Bquadro рассказывает, как в студии выстроена адаптация новичков и почему компания сознательно нанимает людей без опыта.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎖 Программа обучения
Василий Вишняков из Bquadro рассказывает, как в студии выстроена адаптация новичков и почему компания сознательно нанимает людей без опыта.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍4🔥3
Сегодня — последний день «Акции-конструктор».
За выходные мы узнали много нового о ваших переговорных навыках. Курс за 500 ₽? Видели. Три профессии по цене половины? Тоже было. Но мы не сдаёмся.
🎁 Скидка на курсы, две профессии вместе, бонус к обучению — напишите свои условия. Обсуждаем до полуночи.
Обсудить условия →
За выходные мы узнали много нового о ваших переговорных навыках. Курс за 500 ₽? Видели. Три профессии по цене половины? Тоже было. Но мы не сдаёмся.
Обсудить условия →
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥4👍3❤🔥2🤣1
Видеофон на главной, всплывающий баннер с летающими курицами, кнопка, которая трясётся без причины — всё это раздражает пользователей и ломает UX.
Собрали топ примеров плохой анимации: что тормозит загрузку, что отвлекает от контента, что вызывает дискомфорт и мешает доступности. И да, пришлось отключить адблок ради исследования. #css #a11y
🎁 Читать статью
Собрали топ примеров плохой анимации: что тормозит загрузку, что отвлекает от контента, что вызывает дискомфорт и мешает доступности. И да, пришлось отключить адблок ради исследования. #css #a11y
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥7❤5🔥5
Forwarded from CSS Боль
Вывести значение CSS-переменной прямо на страницу — без JavaScript. Звучит как фантастика, но CSS это умеет: две строчки, работает во всех браузерах.
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Связка
В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. Попробуйте в демке самостоятельно и смотрите разбор целиком.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Связка
counter-reset + counter() + content превращает CSS-переменную в текст на экране. Для целых чисел — элементарно. Для дробных — обход через calc(), чтобы подсказать счётчику тип данных. А если в переменной хранятся градусы или пиксели? Тут помогает tan(atan2()) — трюк, который убирает единицу измерения из значения.В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. Попробуйте в демке самостоятельно и смотрите разбор целиком.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍6❤🔥3
Стандартные
Функция
Разбираем, как работают координаты управляющих точек и где это применяется: в модалках, карточках, галереях. #css #animation
🎁 Читать статью
ease и ease-in не всегда дают нужный эффект — движение получается слишком механическим или предсказуемым.Функция
cubic-bezier() позволяет задать собственную кривую ускорения через четыре числа. С ней можно сделать анимацию с эффектом инерции, лёгкого залипания при наведении или упругого отскока.Разбираем, как работают координаты управляющих точек и где это применяется: в модалках, карточках, галереях. #css #animation
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4 4🔥3❤🔥2
Qwen Code — AI-агент для VS Code, который генерирует готовый код прямо в терминале.
Создание даже простой портфолио-страницы обычно занимает часы: разметка, стили, адаптивность, тёмный режим.
В статье показываем, как за три запроса к Qwen Code получить готовую страницу с семантическим HTML, CSS-переменными и поддержкой тёмного режима. Разбираем установку расширения Qwen Code Companion в VS Code, запуск через команду
🎁 Читать статью
Создание даже простой портфолио-страницы обычно занимает часы: разметка, стили, адаптивность, тёмный режим.
В статье показываем, как за три запроса к Qwen Code получить готовую страницу с семантическим HTML, CSS-переменными и поддержкой тёмного режима. Разбираем установку расширения Qwen Code Companion в VS Code, запуск через команду
qwen и пошаговое взаимодействие: от структуры проекта до финальной стилизации. #ai #toolsPlease open Telegram to view this post
VIEW IN TELEGRAM
👍11 7❤🔥4❤3🔥2
Forwarded from CSS Боль
Круглый вырез в карточке — пять обёрток, 20 строчек CSS и сломанный фон на стыках блоков. Знакомо?
Классический подход заставляет «нарезать» карточку на кусочки: колонка для контента, колонка для выреза, внутри — три блока с
Одно свойство
Демонстрация: https://htmlacademy.ru/demos/235
Читать статью → https://habr.com/ru/articles/993310/
Классический подход заставляет «нарезать» карточку на кусочки: колонка для контента, колонка для выреза, внутри — три блока с
flex-grow и radial-gradient. И всё ломается, если карточке задать градиентный фон — состыковать части принципиально невозможно.Одно свойство
mask-image с тем же radial-gradient решает задачу без единой обёртки. Карточка остаётся цельной — и корректно тянется, и принимает любой фон. В статье собираем оба варианта пошагово и сравниваем.Демонстрация: https://htmlacademy.ru/demos/235
Читать статью → https://habr.com/ru/articles/993310/
🔥9❤🔥3 3👏1
Мы учим писать код, а не полагаться на удачу. Но сегодня — исключение.
С 6 по 8 февраля ко Дню науки разыгрываем скидки с помощью удачи.
Как участвовать:
1️⃣ Отправьте в комментарии эмодзи 🎰 — Телеграм сам прокрутит барабан.
2️⃣ Скопируйте ссылку на сообщение с результатом.
3️⃣ Отправьте ссылку нашему менеджеру.
Что выпадет:
🎁 Три семёрки (777) — скидка 40% на любую профессию или курс и второй курс в подарок.
🎁 Два одинаковых символа — скидка 30% на любую профессию или курс.
🎁 Все разные — скидка 20% на любую профессию или курс.
Да, проигравших нет. Да, мы в курсе, что это не совсем научный подход. Но давайте попробуем.
С 6 по 8 февраля ко Дню науки разыгрываем скидки с помощью удачи.
Как участвовать:
Что выпадет:
Да, проигравших нет. Да, мы в курсе, что это не совсем научный подход. Но давайте попробуем.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👏4🤣4 3⚡2❤🔥1
Forwarded from Как стать мидлом
Cursor, Claude Code, Qwen Code — инструменты есть, а системы нет. Большинство разработчиков используют ИИ от случая к случаю: спросил — получил ответ — забыл.
На курсе «Фронтенд на автопилоте» вы пройдёте полный цикл разработки интернет-магазина вместе с ИИ: настройка окружения, генерация компонентов, тесты, документация, интеграция API. К концу курса — готовый проект и навык, который встраивается в ежедневную работу. #htmlacademy #levelup
🧬 Записаться на курс
На курсе «Фронтенд на автопилоте» вы пройдёте полный цикл разработки интернет-магазина вместе с ИИ: настройка окружения, генерация компонентов, тесты, документация, интеграция API. К концу курса — готовый проект и навык, который встраивается в ежедневную работу. #htmlacademy #levelup
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤🔥3 3⚡2❤1
Media is too big
VIEW IN TELEGRAM
ИИ-агенты в разработке: костыль или суперсила?
Василий Вишняков, основатель Bquadro, разрешает разработчикам использовать ИИ-агентов в работе. Но с одним условием.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎖 Программа обучения
Василий Вишняков, основатель Bquadro, разрешает разработчикам использовать ИИ-агентов в работе. Но с одним условием.
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from CSS Боль
DUMP SPB 2026 × HTML Academy
Весь внешний вид компонента — в CSS-переменных. JavaScript только переключает состояния. Звучит непривычно, но это рабочий подход.
На DUMP SPB 13 февраля Александр Першин выступит с докладом «Реактивный CSS» — про перенос логики отображения из JavaScript в стили. В докладе — сравнение двух реализаций одного компонента: классической на JS и реактивной на CSS. Можно будет оценить разницу в объёме и сложности кода.
Промокод PERSHIN — скидка 10% на билет.
Конференция · О докладе
Весь внешний вид компонента — в CSS-переменных. JavaScript только переключает состояния. Звучит непривычно, но это рабочий подход.
На DUMP SPB 13 февраля Александр Першин выступит с докладом «Реактивный CSS» — про перенос логики отображения из JavaScript в стили. В докладе — сравнение двух реализаций одного компонента: классической на JS и реактивной на CSS. Можно будет оценить разницу в объёме и сложности кода.
Конференция · О докладе
🔥5❤🔥3 3❤1
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
Свойство border-shape работает по-другому. Как border-radius научил рамки скругляться, так border-shape + функция shape() учат их принимать произвольную форму. Рамки повторяют контур, box-shadow и outline тоже.
В спецификации CSS Borders Level 4 уже есть черновик, а в Chrome Canary — первые работающие прототипы. Пока ждём поддержку в браузерах, самое время разобраться с функцией shape().
В новом выпуске «CSS Боли» — как мы дошли от border-radius до произвольных форм и почему маски оказались тупиком для рамок и теней.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥3❤2👍2🔥2 2⚡1
text-align: justify делает текст аккуратным на первый взгляд, но может создать «реки» из пробелов и ухудшить читаемость.В статье разбираем CSS-свойство
text-align и его значения: left, right, center, justify. Отдельно рассматриваем start и end — они работают корректно при любом направлении текста, в отличие от привычных left и right. После теории закрепляем всё на практике в тренажёре. #css #webdevPlease 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
Разбираем, как с помощью одного CSS-свойства сделать временную шкалу прокрутки.
Демонстрации:
Полный выпуск:
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3❤2❤🔥2
Ставите
В статье разбираем, как работает
🎁 Читать статью
z-index: 9999, а элемент всё равно прячется под другим? Дело не в числе, а в контексте наложения.В статье разбираем, как работает
z-index: почему он действует только на позиционированных элементах, как локальные контексты наложения мешают элементу «выпрыгнуть» наверх, и что кроме position контекст создают transform, filter и opacity. Плюс практические советы по организации слоёв в проекте. #css #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4🤣4❤🔥1❤1
text-decoration: none — одна строка, которая убирает подчёркивание ссылки. Но стоит ли это делать?В статье показываем, как убрать подчёркивание через CSS и через инлайн-стили, когда это уместно — например, для ссылок-кнопок или карточек товаров, и как заменить стандартное оформление на своё: анимация,
border-bottom, другой цвет. Отдельно о том, почему полностью убирать подчёркивание без замены — плохая идея для UX. #css #htmlPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍2❤1❤🔥1
Пятница 13-е: AI «сломал» сайт — а мы даём скидки до 50%
Наш AI-агент «переписал» сайт. Кнопки съехали, блоки перепутались, логика поплыла. Мы не стали чинить — мы сделали из этого квиз.
Пять вопросов на логику и внимательность. Найдите, где система сломалась, — и получите скидку:
1️⃣ мидл-курсы и тренажёры — 50%,
2️⃣ профессия под работодателя — 20%,
3️⃣ лайт-профессии — две по цене одной за 29 000 ₽,
4️⃣ одна лайт-профессия — 22 000 ₽.
Квиз займёт две-три минуты. Скидки действуют с 13 по 15 февраля.
🎁 Пройти квиз: https://mrqz.me/friday13
Наш AI-агент «переписал» сайт. Кнопки съехали, блоки перепутались, логика поплыла. Мы не стали чинить — мы сделали из этого квиз.
Пять вопросов на логику и внимательность. Найдите, где система сломалась, — и получите скидку:
Квиз займёт две-три минуты. Скидки действуют с 13 по 15 февраля.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4🔥3❤🔥1
Forwarded from Как стать мидлом
Макет есть, а мобильной версии нет. Состояния кнопок не прописаны, дизайнер занят — и задача висит.
Курс «Дизайн для фронтендеров» учит решать такие задачи самостоятельно. Восемь разделов: Figma, 8px-сетка и вертикальный ритм, типографика, цвет и контрастность с учётом доступности, адаптив без готовых макетов и UI-анимация. В каждом — теория, разбор кейса и практика с эталонным решением.
Подходит разработчикам с базовым знанием HTML и CSS, которые хотят перестать зависеть от дизайнера в типовых интерфейсных задачах. #levelup #htmlacademy
🎁 Записаться на курс
Курс «Дизайн для фронтендеров» учит решать такие задачи самостоятельно. Восемь разделов: 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❤🔥2 1