Встроенные стили побеждают любой селектор в каскаде. Переопределить их из внешних стилей — задача нетривиальная: чаще всего приходится тянуться за !important. А псевдоклассы, псевдоэлементы и медиавыражения в атрибуте style вообще не работают — :hover, ::before, @media мимо.

Зачем тогда их использовать? В вёрстке рассылок другого выхода нет — почтовые клиенты блокируют внешние стили. Ещё атрибут style удобен при отладке и в CMS, где стили задаются через интерфейс.

Разбираем приоритет, ограничения и случаи, когда встроенные стили оправданы. #css #html

💡 Читать статью

CSS-свойство backdrop-filter применяет фильтры к фону за элементом — размытие, контраст, яркость. С сентября 2024 в Baseline WidelyNewly Available. Работает везде.

Одно условие: у элемента должен быть полупрозрачный фон. Без rgba или hsla эффект применится, но визуально вы ничего не увидите.

Где это применять? Модальные окна, карточки с эффектом матового стекла, сайдбары с глубиной. В статье разбираем, как собрать эффект и какие фильтры комбинировать. #css #baseline

⚡ Читать статью

Анимация по кривой раньше требовала JavaScript: getPointAtLength(), requestAnimationFrame, ручной пересчёт координат. Десятки строк кода.

offset-path решает задачу средствами CSS. Задаёте путь через path(), запускаете offset-distance от 0% до 100% — элемент движется по кривой, окружности или произвольной траектории. Как управлять поворотом? Для этого есть offset-rotate.

В статье показываем разные варианты путей и объясняем, где offset-path пригодится в интерфейсах. #css

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

«Больше работаешь — больше зарабатываешь»

Михаил Иванычев, технический директор Zionec, рассказал, какая зарплата ждёт выпускников совместной программы обучения фронтенду. Ответ — в клипе.

Полный эфир: Смотреть на YouTube | Смотреть в VK

🎁 Программа обучения

Какой цвет фона в .selector { background-color: 20px; background-color: red; }?

А если первое значение — var(--not-a-color), и переменная содержит те же 20px? Результат будет другим.

Каскад — один из четырёх этапов обработки значений в CSS. Сначала браузер фильтрует объявления и отбрасывает невалидные, потом через каскад для каждого свойства выбирает одно значение. Если какого-то не хватает — берёт унаследованное или начальное. Дальше три стадии вычислений: вычисленные, используемые и действительные.

Разбираем весь путь CSS-значения: от объявления в файле до значения, с которым браузер отрисовывает элемент. Со схемами, примерами и тестом для самопроверки. #css

🔴 Читать статью

Завтра — эфир с CEO. Главные вопросы о нейросетях в работе джуна

23 апреля в 12:00 (MSK) — один час, чтобы успеть спросить главное у CEO компании, которая год работает с ИИ-агентами в повседневной разработке.

Что спросим:

❤️ Джун и ИИ-агент: ускоряет рост или подменяет его
❤️ Какой вопрос на собеседовании показывает: разобрался сам или ответил через агента
❤️ В каких задачах ИИ ускоряет команду прямо сейчас, а в каких всё портит

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

🎁 Бонус: место на программе обучения разыграем среди первых 100 регистраций. Результат — на эфире.

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

Фронтенд — ваше или не ваше? Проверьте за две недели

28 апреля стартует группа по программе «Фронтенд-разработчик для компании Зионек». На этот набор мы даём две недели пробного периода — чтобы вы проверили профессию на практике, ничем не рискуя.

Как это работает? Бронируете место за 15 000 ₽ и учитесь как все. За две недели успеете сделать первые задачи и поработать с наставником. Этого хватит, чтобы понять — ваше это или не ваше.

💡 Если подошло — продолжаете программу. Впереди месяцы обучения и проекты в портфолио, а на выходе — возможность поработать в компании Зионек.

📎 Если нет — ваши 15 000 ₽ не сгорают. Переведём вас на программу «Верстальщик»: курсы по фундаментальной вёрстке и адаптивной вёрстке, наставник в общем чате.

Записаться в Телеграме
Записаться через MAX

Если в VS Code у вас в ходу одни и те же пять-шесть горячих клавиш — в редакторе есть ещё десятки. Вот четыре, с которых стоит начать:

- F2 переименует переменную сразу во всех местах.
- F12 откроет файл с её объявлением — даже если оно в другом модуле.
- Ctrl + G поможет попасть к строке по номеру.
- Alt со стрелками поменяет строки местами.

Ещё шесть — в статье. #vscode #tools

👾 Читать статью

«Я постою над тобой и не дай бог шаг вправо, шаг влево» — CEO про джуна пять лет назад

Максим Заруцкий из MediaMint это помнит и не скрывает: пять лет назад он бы сказал джуну — полгода в офисе, надо посидеть, познакомиться. Сегодня берёт новичка на удалёнку с первого дня. В эфире объяснил, что изменилось: CRM и метрики показывают, кто как работает, без физического присутствия — и один из верстальщиков за полтора месяца дорос до фулстека и забрал проект целиком.

Если вы джун и боитесь, что вас возьмут только «обратно в офис под присмотр» — послушайте разговор. И посмотрите программу, по которой попадают в команду MediaMint.

🎁 Программа
🐭 Смотреть в YT
🐹 Смотреть в VK

Финишная прямая!

Третий сезон Чемпионата по вёрстке завершён. 29 апреля в 12:00 (MSK) вместе с экспертами из компаний подведём результаты, озвучим оценки и объявим победителя.

🐭 Подключиться в YT
🐹 Подключиться в VK Video

Утро, открываете тикет, кидаете задачу в нейронку: «Напиши компонент карточки товара». Через минуту в редакторе компонент. Классы выдуманные, поля называются как-то по-своему, а эффект при наведении вообще никто не просил.

Знакомо? Дальше — час правок.

Чаще всего проблема в самом запросе. В нём нет типа данных с сервера и списка классов из дизайн-системы — поэтому нейросеть достраивает всё сама. По общим примерам, без оглядки на ваш проект.

В статье — шаблоны запросов на новый компонент и на тесты к нему. Отдельный приём для правки существующих стилей: эффективнее попросить «измени только эту функцию», чем «перепиши файл». А ещё пять приёмов из практики, главный из которых — показать нейросети соседний компонент из проекта вместо описания на словах. #ai #webdev

🔥 Читать статью