HTML Academy
9.86K subscribers
5.42K photos
181 videos
4 files
3.41K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Forwarded from CSS Боль
Прощай, квадратный веб

Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство border-shape. А спустя два месяца, 7 апреля 2026, фича уже в релизе в Chrome 147.

Напомню, чем так мил border-shape. Свойство позволяет задавать произвольную форму блока с помощью функции shape(), которая уже используется в clip-path, и с которой многие уже знакомы.

Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход border-shape можно смело называть революцией.

И ещё один приятный момент. Сама функция shape() находится в интеропе 2026. А значит, что и border-shape во всех браузерах может появиться быстро.

В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по border-shape.
🔥1062❤‍🔥1
Рекрутёры всё реже верят резюме на слово. Слишком легко приукрасить опыт — и слишком сложно это проверить по тексту.

Поэтому при отборе растёт вес цифрового профессионального следа: публичные проекты, статьи, выступления, победы в чемпионатах. Всё, что подтверждает навыки и что нельзя подправить задним числом.

Разбираем, из чего складывается такой след и как он влияет на решение о найме.

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥22🔥1
HTML Academy
Mish — студия №1 по UX сайтов в Рейтинге Рунета. В третьем сезоне Чемпионата по вёрстке участники верстают их макет. В этом сезоне мы запускаем профессиональный трек для действующих разработчиков. Это способ прокачать цифровой профессиональный след и упростить…
Завершаем знакомство с партнёрами-работодателями третьего сезона чемпионата по вёрстке.

«5 углов» — интегратор Битрикс24, входит в топ-20 интеграторов России.

ОФЭП — агентство интернет-маркетинга. Разрабатывает сайты, занимается SEO, продвижением на маркетплейсах и PR.

Coding Team — разработка сайтов, мобильных приложений и AI-решений. Больше 200 реализованных проектов.

Всего за результатами третьего сезона следят больше 30 компаний. До конца активной части чемпионата осталось несколько дней.

👍 Профессиональный трек
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥2🔥11
Конфиги webpack часто копируют из проекта в проект, а когда что-то ломается — гуглят каждую строку отдельно. Знакомо?

На курсе разбираемся, как устроена сборка изнутри: от entry и output до разделения кода и оптимизации под рабочее окружение. Настраиваете Babel и ESLint, подключаете обработчики и плагины, учитесь разделять окружения и уменьшать размер итоговой сборки.

После курса — сможете собирать и поддерживать конфигурации webpack самостоятельно. #htmlacademy #levelup

🔜 Подробнее
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
21❤‍🔥1
HTML Academy
«Мидлы без ИИ скоро будут грустить» — что ещё прозвучало на эфире с Зионеком Час разговора с техническим директором — про ИИ в разработке, стек и путь от обучения до штата. Несколько моментов, ради которых стоит включить запись: ❤️ Почему техдир раздал Cursor…
Media is too big
VIEW IN TELEGRAM
«Мы посмотрели результаты чемпионатов по вёрстке и восхитились» — Михаил Иванычев, технический директор Zionec.

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

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

🎁 Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥4👍3🔥3
Совместно с Зионек мы запускаем программу «Фронтенд-разработчик» , открываем запись на программу в соответствии с планом найма, а после обучения компания нанимает выпускников.

HTML Academy предлагает 4 гранта на обучение от компании. Это — последняя возможность зайти в этот поток и гарантировать себе место в штате.

Напишите «ГРАНТ» и начните свою карьеру уже сейчас.

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

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

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

💡 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
4❤‍🔥3🔥2
CSS-свойство backdrop-filter применяет фильтры к фону за элементом — размытие, контраст, яркость. С сентября 2024 в Baseline WidelyNewly Available. Работает везде.

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

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥54🔥3
Анимация по кривой раньше требовала JavaScript: getPointAtLength(), requestAnimationFrame, ручной пересчёт координат. Десятки строк кода.

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

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥4🔥43
Вы когда-нибудь настраивали Content-Security-Policy для рабочего проекта? Тема, которую фронтенд-разработчики откладывают — пока в баг-трекере не появится репорт про XSS.

Курс «Протоколы и сети: веб-безопасность» — шесть разделов по конкретным группам уязвимостей. XSS, CSRF, SQL-инъекции, DoS, MitM — каждую разбираете на кейсе, пишете защиту и сверяете с эталонным решением. Отдельные практики: настройка CSP, безопасная работа с cookie, хеширование паролей с солью, корректный CORS.

На выходе — чек-листы безопасности по каждому разделу. Готовый артефакт для проекта. #htmlacademy #levelup

☝️ Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥4🔥33
HTML Academy
«Мидлы без ИИ скоро будут грустить» — что ещё прозвучало на эфире с Зионеком Час разговора с техническим директором — про ИИ в разработке, стек и путь от обучения до штата. Несколько моментов, ради которых стоит включить запись: ❤️ Почему техдир раздал Cursor…
This media is not supported in your browser
VIEW IN TELEGRAM
«Больше работаешь — больше зарабатываешь»


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

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

🎁 Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣8👍3❤‍🔥2🔥1
MediaMint — веб-студия, с 2014 года разрабатывает и продвигает сайты для бизнеса из разных отраслей. Делает современные, удобные и функциональные проекты, помогает компаниям эффективнее работать онлайн.

В четверг 23 апреля в 12:00 (MSK) генеральный директор компании расскажет о совместной программе обучения: как устроена работа в небольшой веб-студии из топ-100 по 1С-Битрикс и почему здесь разработчики растут от вёрстки до фулстека, работая с AI-инструментами.

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

https://htmlacademy.ru/events/live-mediamint
❤‍🔥3🔥32
Какой цвет фона в .selector { background-color: 20px; background-color: red; }?

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

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

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

🔴 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
4❤‍🔥3🔥2
HTML Academy
MediaMint — веб-студия, с 2014 года разрабатывает и продвигает сайты для бизнеса из разных отраслей. Делает современные, удобные и функциональные проекты, помогает компаниям эффективнее работать онлайн. В четверг 23 апреля в 12:00 (MSK) генеральный директор…
Завтра — эфир с CEO. Главные вопросы о нейросетях в работе джуна

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

Что спросим:

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

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

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

https://htmlacademy.ru/events/live-mediamint
Please open Telegram to view this post
VIEW IN TELEGRAM
8❤‍🔥2🔥2
Media is too big
VIEW IN TELEGRAM
Алгоритмы абстрактны, их сложно представить в голове. Поэтому сортировку пузырьком и вставками удобнее посмотреть, чем изучать по тексту.

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

В интерактивных демках из курса можно задать свой массив и прогнать алгоритм заново:

Сортировка вставками — https://htmlacademy.ru/demos/187
Сортировка пузырьком — https://htmlacademy.ru/demos/181
🔥6❤‍🔥32