HTML Academy

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.

В статье разбираем, какие есть способы оживить интерфейс: CSS- и SVG-анимации и JavaScript. Показываем на примерах, в каких ситуациях достаточно свойств animation и transform, когда пригодятся возможности SVG и логика на JavaScript, а ещё вместе собираем простую анимацию прыгающего мячика и обсуждаем, как не превратить сайт в медленную «карусель». #css #js

🔔 Читать статью

Сети и протоколы без магии: базовые знания, которые нужны фронтендеру
➿➿➿➿➿➿➿➿➿➿➿➿
Разберётесь, как данные реально идут по сети: от модели OSI и стека TCP/IP до различий между HTTP/1.1, HTTP/2 и HTTP/3; когда уместны WebSockets; как работает TLS и проверка сертификатов. С этими знаниями вы осознанно выбираете транспорт под сценарий и понимаете, что происходит при установке защищённого соединения.

Результат — меньше накладных расходов и быстрее метрики вроде TTFB/LCP, плюс снижение рисков уязвимостей за счёт корректной настройки шифрования и аутентификации. #htmlacademy #levelup

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

Новогоднее колесо в HTML Academy
➿➿➿➿➿➿➿➿➿➿➿➿
Праздники приближаются, а мы уже начинаем делиться новогодним чудом!

12–14 декабря — под ёлкой вы сможете найти подарки с акцентом на программах, которые помогают расти быстрее и увереннее:

❄️ мидл-курсы для тех, кто уже в профессии и хочет усилить навыки,
❄️ пакеты обучения с расширенной программой и лучшей экономией,
❄️ инженерия — курсы для тех, кто стремится к системному уровню разработки,
❄️ подарок от Тайного Санты.

Новогоднее колесо уже запущено — ищите на сайте подарочную коробку, крутите и забирайте свои новогодние скидки.

К ноябрю 2025 года в CSS стали по-настоящему рабочими ещё два способа задавать цвет: lab() и lch(). Эти функции уже поддерживаются во всех основных браузерах — больше не нужны флаги и экспериментальные настройки.

С привычными rgb() и hex цвета часто ведут себя неожиданно, когда нужно просто сделать оттенок светлее или темнее. В lab() и особенно в lch() шаги по яркости, насыщенности и оттенку становятся намного предсказуемее: проще собирать аккуратные, гармоничные палитры для интерфейсов. #css #baseline

🌀 Читать статью

Продолжаем знакомиться с партнёрами второго сезона чемпионата по вёрстке. #чпв2

👍 Paraweb — партнёр-работодатель

Paraweb — веб-интегратор и лидер цифровых решений для университетов. Компания создаёт и поддерживает информационные системы для образовательных организаций, корпораций и органов государственной власти, развивая электронную образовательную среду и связанные цифровые сервисы.

👍 GT Media — партнёр-работодатель

GT Media — digital-агентство полного цикла из Санкт-Петербурга. С 2014 года команда занимается комплексным продвижением бизнеса: разрабатывает и продвигает сайты, ведёт проекты в социальных сетях, создаёт креативный контент и подключает рекламные инструменты под задачи брендов.

👍 ОФЭП — партнёр-работодатель

ОФЭП — агентство интернет-маркетинга, которое помогает бизнесу продвигать товары и услуги в цифровой среде. Команда разрабатывает сайты и занимается продвижением: SEO, маркетплейсы, PR и другие инструменты интернет-маркетинга.

https://htmlacademy.ru/contest/2

Краткий обзор возможностей, которые теперь широко поддерживаются во всех основных браузерах: новые цветовые функции, цветовые модели, потоковая компрессия и улучшенные селекторы.

В статье на примерах разбираем, как использовать современные цветовые функции и модели в CSS — от color() и color-mix() до lab(), lch(), oklab() и oklch(), — а ещё как расширенный синтаксис :nth-child() помогает обходиться без лишних классов в разметке.

Ещё смотрим на Web API, которые тоже стали Widely Available: CompressionStream и DecompressionStream для работы с сжатыми данными прямо в браузере и дополнительную информацию о WebRTC-соединениях через RTCPeerConnection.sctp. #css #webapi

🤭 Читать статью

JSON (JavaScript Object Notation) — текстовый формат для представления структурированных данных. Его используют, чтобы передавать данные между клиентом и сервером, хранить конфигурации и сериализовать состояние приложений.

Пока все данные приходят идеальными, работа с JSON кажется простой. Но одна лишняя запятая — и приложение падает с SyntaxError.

В статье разбираем, как надёжно использовать JSON.parse(): когда достаточно простого try…catch, как оформить безопасную обёртку со значением по умолчанию, зачем нужна функция-reviver, что делать с большими JSON и как аккуратно работать с fetch. Такой подход помогает сделать парсинг предсказуемым и не блокировать интерфейс. #js #frontend

🌹 Читать статью

Продолжаем знакомиться с партнёрами второго сезона чемпионата по вёрстке. #чпв2

👍 365 Media Group — партнёр-работодатель

365 Media Group — digital-продакшн полного цикла с собственной продуктовой аналитикой, дизайном и веб-разработкой. Команда создаёт сервисы и сайты, которые помогают бизнесу расти, не жертвуя удобством для пользователя. В фокусе — e-commerce, сложные личные кабинеты и проекты на 1С-Битрикс, а также запуск решений в сжатые сроки без потери качества.

👍 YogurtStudio — партнёр-работодатель

YogurtStudio специализируется на разработке и развитии веб-проектов под конкретные бизнес-задачи. Студия ведёт полный цикл работ: прототипирование, дизайн, разработку, техническую поддержку и продвижение, включая SEO, контекстную рекламу и SMM. Команда создаёт современные веб-приложения на React и Vue, лендинги, корпоративные сайты и интернет-магазины с фокусом на рост трафика и конверсий.

https://htmlacademy.ru/contest/2

Сфера IT за 10 лет изменилась до неузнаваемости. В 2016 достаточно было пройти базовый курс по вёрстке — и через месяц ты уже работал, получая зарплату выше средней по стране.

В 2026 всё наоборот: требования выросли, зарплаты стоят на месте, а путь джуна легко растягивается до года. В свежем выпуске «CSS Боль» сравниваем рынок 2016 и 2026 и разбираемся, почему вход в профессию стал в разы сложнее — и что это означает для тех, кто только собирается учиться.
➿➿➿➿➿➿➿➿➿➿

В выпуске:
✓ Как работал вход в IT в 2016-м и почему он был таким быстрым
✓ Почему стартовые 40–60 тысяч в 2026-м — уже не «прыжок вверх», а просадка по доходу
✓ Насколько выросли требования к джуну: вёрстка, чистый JS, SPA, фреймворк и работа с ИИ
✓ Почему процесс выхода на первое собеседование теперь занимает 6–12 месяцев
✓ Что показывают данные Росстата и статистика HTML Academy о реальном состоянии рынка
✓ И к чему приведёт эта тенденция: прогноз кадрового кризиса в ближайшие 2–3 года
✓ Кому будет легко входить в IT в 2026

Если вы планируете вход в IT — этот выпуск поможет понять текущие реалии без иллюзий и хайпа.

🐭 Смотреть на YouTube
🐹 Смотреть в VK

Какая ставка для стажёра?

Михаил Грохотов — основатель Grokhotov Studio, рассказал про условия стажировки.
Полный эфир с Grokhotov Studio — по ссылке:

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🌸 Программа обучения

Продолжаем знакомиться с партнёрами второго сезона чемпионата по вёрстке. #чпв2

👍 «Истина в маркетинге» — партнёр-работодатель

«Истина в маркетинге» — динамичное интернет-агентство полного цикла из Тулы. С 2021 года команда создаёт и продвигает digital-продукты: разрабатывает сайты «под ключ», настраивает SEO и контекстную рекламу, занимается SMM и поддержкой проектов. Агентство делает упор на комплексный подход: сочетает аналитику, стратегию и инструменты продвижения, чтобы помогать бизнесу расти в цифровой среде.

👍 Sborka Project — партнёр-работодатель

Sborka Project — IT-компания, которая решает бизнес-задачи с помощью дизайна и технологий. Команда занимается веб-разработкой для разных индустрий: создаёт онлайн-сервисы, корпоративные сайты и имиджевые проекты. В фокусе — вёрстка, фронтенд и бэкенд разработка, работа с дизайн-системами и анимациями, чтобы цифровые продукты были удобными, быстрыми и визуально выверенными.

https://htmlacademy.ru/contest/2

Пропустили эфир с Addamant — мы записали и выложили

Илья Лебедкин рассказал, как устроена разработка в Addamant: какой стек используют на реальных проектах (React, TypeScript, Laravel), сколько платят на стажировке и как быстро новичок может вырасти до сильного мидла. А ещё — развенчал мифы про «не берут без высшего», возрастные ограничения и магию AI, которая будто бы заменяет работу джуна.

Вместо бессмысленного скролинга ленты, включайте эфир на 2х и узнайте, как получить реальную работу мечты.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪫 Программа обучения

Vue.js 3 на практике: Vite, Composition API, Pinia и тесты

На курсе разбираем современные подходы к клиентским приложениями на Vue.js 3: script setup и реактивность, маршрутизацию с guard’ами, управление состоянием в Pinia, работу с HTTP и обработку ошибок, анимации, модульные тесты на Vitest и Vue Test Utils.

Практика — два проекта: учебный таск-менеджер и фронтенд онлайн-пиццерии поверх готового API. Формат — теория → разбор → задачи. В чате отвечаем на вопросы и показываем типичные решения. #htmlacademy #levelup

📌 Программа и детали: https://htmlacademy.ru/levelup/vue