«Мы посмотрели результаты чемпионатов по вёрстке и восхитились» — Михаил Иванычев, технический директор Zionec.

После этого компания запустила совместную с Академией программу обучения фронтенду. Что увидели в чемпионатах и зачем готовить разработчиков именно так — в клипе из подкаста.

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

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

Встроенные стили побеждают любой селектор в каскаде. Переопределить их из внешних стилей — задача нетривиальная: чаще всего приходится тянуться за !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

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