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

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

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Одно свойство, два цвета, ноль медиавыражений — light-dark() решает переключение темы в одну строку.

Раньше для поддержки светлой и тёмной темы приходилось дублировать стили через @media (prefers-color-scheme) и заводить отдельную переменную под каждый цвет. Функция light-dark() принимает два значения: первое для светлой темы, второе для тёмной. Браузер подставляет нужное сам.

В статье разбираем, как подключить функцию (без color-scheme: light dark она не заработает), где применять и какие браузеры пока остаются за бортом. #css #baseline

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥83🔥1
Всё ещё не слышали про новую профессию «Нейрофронтендер»?

Первые четыре раздела— классический фундамент: вёрстка, JavaScript, React, TypeScript. Это 720 часов практики с проектами и код-ревью от действующих разработчиков. Пятый раздел — про то, как ускорять работу с помощью GPT и Cursor.

Цена: от 4 290 ₽/мес. Дедлайнов нет.

🎁 Подробнее
🐶 Записаться через Telegram
📲 Записаться через Max
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤‍🔥211
Контейнерные запросы теперь умеют проверять не только размер, но и значения CSS-свойств — например, цвет фона.

Конструкция style() в директиве @container позволяет менять оформление дочерних элементов в зависимости от вычисленных свойств контейнера. При этом container-type: style задан по умолчанию — специально объявлять его не нужно. Выражения от размеров и стилей можно комбинировать в одном условии.

В статье разбираем, как устроен этот механизм, чем он отличается от привычных запросов по размеру и где у него пока границы. #css #tools

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥321
Forwarded from CSS Боль
Цифровой профессиональный след

Яркая новинка HR-сезона 2026 — понятие цифрового профессионального следа. Я начал встречать его упоминания в феврале в HR-каналах и в вакансиях. В чём суть явления?

Эйчары не доверяют опыту, описанному в резюме, или записям в трудовой книжке. Но им надо разбирать отклики от кандидатов, надо на что-то полагаться. Поэтому им нужна хоть какая-то опора.

Цифровой профессиональный след и есть эта опора. По сути, это набор внешних, объективных, достоверных подтверждений (пруфов) либо опыта, либо уровня скилов кандидата. Важно, чтобы кандидат не мог повлиять на этот пруф.

Идеальный пример ЦПС — это доклад на конференции. Описание доклада висит на сайте конференции, и кандидат не может его изменить. По докладу можно понять уровень докладчика, сколько у него лет опыта, где он работал.

Вроде бы идея с цифровым следом здравая. Но есть проблема — хороших источников цифрового следа мало. Что ещё можно исползовать как цифровой след? Накидайте вариантов.

И ещё одна проблема. Теперь каждому разработчику с самого начала карьеры надо вести дневничок и собирать портфолио наград и грамот, как в школе? Вы готовы к этому, дети? Да, капитан!
1❤‍🔥1👍1🔥1
TypeScript ловит ошибки до запуска кода. Но только если типы спроектированы, а не просто расставлены.

Чаще всего проблема не в незнании синтаксиса, а в подходе. as any вместо точного типа. Проверки «на глаз» вместо структуры, которую компилятор понимает. В итоге TypeScript формально есть, а гарантий нет.

Курс «TypeScript: Теория типов» учит проектировать типы так, чтобы компилятор работал на вас. Дженерики, условные и отображаемые типы, брендирование идентификаторов — всё это про контроль над кодом, а не про знание синтаксиса. #htmlacademy #levelup

Записаться на курс
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥1🔥11
Media is too big
VIEW IN TELEGRAM
Бэкендеры, пора учить фронтенд?

Виктор Михайлов из Garage Eight — о том, нужно ли бэкенд-разработчику разбираться во фронтенде. Кросс-функциональные команды стали нормой, но это не значит, что всем нужно знать всё.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
4❤‍🔥1🔥1
Forwarded from CSS Боль
Накрутчики опыта в IT, у вас проблемы. HeadHunter зарелизил систему, после которой фейковые резюме исчезнут из выдачи. Совсем.

Рекрутеры получили инструменты, чтобы отделить реальный опыт от накрученного прямо в списке с откликами. Врал годами? Станешь невидимкой. Честные наконец попадут в поле зрения.

А ещё рекрутёрам дали лёгкий способ банить накрутчиков навсегда. HR-сообщество вычистит платформу за считаные месяцы. Эйчары ждали этого годами.

Как это работает, кто пострадает первым и почему не все платформы могут себе это позволить. Разбираем в новом выпуске CSS Боли.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣19❤‍🔥441
This media is not supported in your browser
VIEW IN TELEGRAM
Перенесли карточку товара из основной колонки в сайдбар — и раскладка поехала. С медиавыражениями так и будет: они смотрят на ширину окна, а не контейнера.

CSS Container Queries работают иначе. Компонент подстраивается под размер родителя — неважно, где он стоит на странице. Одни стили, любой контейнер.

Смотрите в клипе, как @container меняет раскладку на лету.

📲 Мы в MAX
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥54🔥3👍1
Mish — студия №1 по UX сайтов в Рейтинге Рунета. В третьем сезоне Чемпионата по вёрстке участники верстают их макет.

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

Вашу работу оценивают вручную сеньор-разработчики из крупных продуктовых компаний по индустриальным критериям качества. Результаты попадают в публичный рейтинг фронтенд-разработчиков.

Полностью онлайн, две недели в спокойном ритме, не мешает работе. Старт 30 марта. Для начинающих разработчиков есть стартовый трек.

🎁 Записаться на профессиональный трек
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5🤣533❤‍🔥1😱1
Одни и те же стили для h1, h2, p и li — и для каждого отдельное правило? CSS так можно не мучить.

Список селекторов через запятую позволяет записать один блок стилей вместо четырёх. В статье разбираем, где это удобно: сброс отступов, общие стили для кнопок и ссылок, единое оформление заголовков. И объясняем, когда вместо группировки лучше использовать классы. #css #html

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

Макет оказался очень интересным, сроки на выполнение были комфортные, на все вопросы оперативно отвечали. По результатам чемпионата был лайв, где жюри разбирали работы финалистов. Я победила, и в скором времени куратор сообщил, что мной интересуется партнер-работодатель чемпионата.


Чемпионат стал для неё первым шагом в профессию. Третий сезон стартует 30 марта — записаться можно уже сейчас.

🐶 Читать отзыв
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥1042
Параллакс, прогресс-бар чтения, появление элементов при прокрутке — раньше для всего этого нужен был JavaScript и обработка события scroll. Код получался хрупким, а анимации дёргались на каждом рендере.

CSS Scroll-Driven Animations меняют подход: одно свойство animation-timeline: scroll() привязывает обычные @keyframes к позиции скролла. Без JS, без библиотек, с рендерингом вне основного потока. В статье разбираем два типа таймлайнов — scroll() и view() — и показываем, как привязать анимацию к странице, контейнеру или видимости элемента. #css #baseline

🚀 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👏3❤‍🔥21
Макет для третьего сезона чемпионата подготовила студия Mish — №1 по UX сайтов в Рейтинге Рунета. В портфолио — ВТБ, Сбер, Яндекс, x5Group, а среди наград — Awwwards и «Золотое приложение».

За пять лет Mish выросли из пары человек в команду из 150+ специалистов с офисами в нескольких странах. Их подход к дизайну — исследования, аналитика, проверка гипотез — это то, как работают сильнейшие продуктовые команды. И именно их макет участники будут верстать на чемпионате.

Профессиональный трек чемпионата по вёрстке стартует 30 марта. Две недели, онлайн, не мешает работе.

🎁 Записаться на профессиональный трек
Please open Telegram to view this post
VIEW IN TELEGRAM
6❤‍🔥3🔥3
Неделю назад вышел Vite 8 — самое крупное обновление архитектуры со второй версии. Два бандлера (esbuild + Rollup) заменил один — Rolldown, написанный на Rust. У Linear продакшен-сборка упала с 46 до 6 секунд.

Под капотом Vite теперь целый Rust-стек: Rolldown для сборки, Oxc для парсинга и трансформации, встроенная поддержка tsconfig paths без сторонних плагинов. @vitejs/plugin-react v6 перешёл на Oxc и выкинул Babel из зависимостей. В пятом разделе курса подключаем плагин oxlint — он в 50–100 раз быстрее ESLint и ловит ошибки прямо при сборке.

Курс «Vite» написан с нуля под восьмую версию. Шесть разделов: от vite.config и Lightning CSS до тестирования с Vitest, деплоя через GitHub Actions и готовых сценариев миграции с Webpack и Gulp. #htmlacademy #levelup

🎁 Смотреть программу

Резервный канал в MAX
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
3❤‍🔥331😱1
Forwarded from CSS Боль
От резюме к доказательному найму

Рынок найма сломан двумя кризисами: экономическим и кризисом доверия. Они наложились друг на друга и бьют даже по сильным специалистам.

Новый дефолт рынка — нулевое доверие к кандидатам. И это надолго.

Резко выросла ценность цифрового профессионального следа — пруфов, которые подтверждают опыт и уровень навыков. Рынок движется к доказательному найму.

У большинства разработчиков таких доказательств нет. А нарабатывать их долго и дорого.

Поэтому появляются форматы, которые дают достоверное подтверждение уровня, сопоставимое по силе с докладом на технической конференции.

Один из таких форматов — чемпионат по вёрстке для мидлов от @htmlacademy. Он изначально строился как доказательный формат и включает:

– сложное задание с высоким потолком скила;
– двухнедельный формат, в котором можно показать свой максимум;
– ручную проверку работ;
– сильных проверяющих — синьоров из бигтеха и крупных продуктовых компаний;
– публикацию результатов в публичном рейтинге качества фронтенд-разработки.

Старт — 30 марта. Если у вас есть коммерческий опыт в разработке, это способ получить публичный пруф своего уровня.

Записаться на чемпионат
🔥4❤‍🔥33🤣2
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
Больше 30 компаний-работодателей будут смотреть на результаты чемпионата по вёрстке. Среди них — AGIMA, №1 в Рейтинге Рунета. Рассказываем о партнёрах третьего сезона.

AGIMA — крупнейший интегратор цифровых решений в России. 551 сотрудник, 800+ проектов. Среди клиентов — Сбер, ВТБ, Мегафон, X5 Group.

Рядом — Oxem, №1 веб-дизайн студия Москвы по версии Рейтинга Рунета 2024. 300+ проектов и топ-5 разработчиков на React.

А в div. работают 190+ специалистов: дизайн, фронтенд, motion, 3D. И они тоже ищут верстальщиков.

Старт 30 марта. Две недели, полностью онлайн.

🎁 Записаться на профессиональный трек
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥4❤‍🔥2