Показываем фокус, но не везде

Если на сайте используются клавиатура и мышь, :focus часто ведёт себя слишком назойливо. В статье объясняем, как :focus-visible помогает показать фокус только в нужный момент — и не мешает пользователю.

Разбираем поведение свойства, браузерную поддержку и технику graceful degradation — так, чтобы фокус оставался доступным, но не отвлекал.

👉 https://htmlacademy.ru/blog/css/focus-visible

[Новый курс] Конические градиенты — короли современных декоративных эффектов и анимаций! Ими обязан владеть каждый фрнтендер. Познайте же конические градиенты в новом бесплатном курсе.

https://htmlacademy.ru/demos/211

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

P.S.: без конических градиентов даже рамку красивую сделать не получится, а реакт в этом не поможет, и тайпскрипт тоже не поможет

#туториалотhtmlacademy #frontend #html #css

Выпустили 20 испытаний для второй главы курса про радиальные градиенты, 14 лёгких и 6 средних. Давайте закреплять навыки!

https://htmlacademy.ru/courses/421/practice

Испытания доступны по подписке.

Если вы хотите бесплатно познакомиться с теорией про радиальные градиенты, то вам сюда:

https://htmlacademy.ru/demos/201

HTML Academy и IZUM — теперь партнёры. Выпускники флагманских программ HTML Academy, соответствующих стандартам IT-гигантов, смогут попасть в команду IZUM

Подробнее: https://tml.io/bigtech-izum

Izum Digital — агентство, которое специализируется на разработке креативных сайтов на TapTop и WebFlow. Мы добавляем изюминку в каждый проект, делая его особенным и запоминающимся. Телеграм агентства — https://t.me/IZUMDIGITAL

#работодателиhtmlacademy

Выпустили 26 испытаний по коническим градиентам, 15 лёгких и 11 средних. Пройдите их и докажите, что вы мастер градиентов!

https://htmlacademy.ru/courses/423/practice

Испытания доступны по подписке.

Бесплатный интерактивный туториал по коническим градиентам, для тех, кому просто посмотреть:

https://htmlacademy.ru/demos/211

В июле 2024 года в Академии появился новейший формат профессий — совместные программы обучения под конкретного работодателя. Первый поток, запущенный с компанией NAUKA, успешно завершился в феврале. Выпускники попали на оплачиваемую стажировку, а затем в штат.

Публикуем отзыв от выпускницы первого потока, Анны Коробковой. Узнайте, как проходило обучение, сложно ли было пройти собеседование и попасть на стажировку, а затем успешно пройти её.

После успешной защиты трех проектов нас ждало собеседование в Компанию на оплачиваемую трехмесячную стажировку. Сначала обсудили стандартные вопросы о предыдущем опыте, почему я решила перейти в IT и т.д. Потом был технический блок, где предлагалось решить ряд задач. Далее был блок обсуждений – я накидывала идеи, как можно решить ту или иную проблему. В итоге через некоторое время со мной связался HR: меня отобрали в команду стажеров.

Читать всю историю —
https://telegra.ph/Otzyv-vypusknicy-sovmestnoj-programmy-NAUKA-x-HTML-Academy-07-14

Какие доклады поставить в главный зал FrontendConf?

На FrontendConf 2025 уже всё утвердили, кроме одной детали: какие темы отправить в главный зал. Выбирать предлагается честно и эгоистично — голосуйте только за те доклады, куда действительно хотели бы пойти сами.

Почему это важно? Так формируется реальный интерес, и в главном зале не будет скучно или тесно. Среди прочих докладов есть, кстати, тема Саши Першина про Negative border radius — так, к слову.

Пройти опрос (это буквально пара минут) можно до 31 июля. В благодарность получите доступ к архиву из 467 видео и промокод на билет.

https://docs.google.com/forms/d/e/1FAIpQLSeiJuYfyK5CbpEcbQ0kkRpM3PsMoAF0yrYnP3yXxqjLEV2CGA/viewform

[Новый курс] Потрясающие декоративные эффекты на основе радиальных градиентов. Интерактивно, наглядно, без воды.

https://htmlacademy.ru/demos/223

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

#туториалотhtmlacademy #frontend #html #css

Новые горизонты в CSS

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

Фильтр в мире CSS — псевдокласс :not(). В статье вы узнаете, как использовать эту возможность для создания более читаемых и поддерживаемых интерфейсов и как использовать список селекторов в :not() и не усложнять CSS.

👉🏻Читать статью

Сегодня в 12:00 на эфире мы поговорим о программе обучения, на которой мы готовим будущих разработчиков под реальные задачи. Менеджер компании ClickON расскажет о компании, перспективах для выпускников и ответит на ваши вопросы.

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

Мыслите как дизайнер? HSL в помощь!

В статье мы просто и понятно объясняем, почему HSL — отличная альтернатива RGB. В этой модели цвет задаётся через оттенок (Hue), насыщенность (Saturation) и светлоту (Lightness). Это делает работу с цветами более гибкой и наглядной. Например, чтобы сделать цвет темнее, просто уменьшите Lightness — никаких сложных расчётов!

HSL — это наглядный инструмент, его можно использовать прямо в редакторах кода и графики. Поддерживается всеми современными браузерами. Если вы ещё не пробовали — самое время внедрить HSL в свои проекты!

👉🏻Читать статью

В чём отличие margin и padding?

Когда вы только начинаете, легко перепутать margin и padding. В статье объясняем так, чтобы запомнилось надолго! Margin отвечает за расстояние снаружи элемента, а padding – за пространство внутри.

👉🏻 Подробнее разбираем в статье

Год назад, в июле 2024 года, мы запустили новую главу в русском онлайн-образовании — обучение напрямую под работодателя.

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

Прошёл год. Можно подвести первые итоги:

— Мы начинали с 3 партнёрами-работодателями, а сейчас их 35. Популярность совместных программ среди компаний растёт. На старте приходилось пробиваться через стену недоверия работодателей, но стена пробита. Потому что…
— Формат работает. Несколько программ прошли полный жизненный цикл: создание программы, набор группы, обучение, собеседование выпускников, стажировка, переход в штат. Работодатели увидели уровень выпускников и оценили процесс выращивания кадров, который оказался на порядок эффективнее фильтрации с рынка.
— Компании возвращаются для запуска повторных потоков. Этим всё сказано. Вы увидите повторные старты уже в августе.

P.S.: Огромный кайф получаешь, когда передаёшь выпускников напрямую на собеседования в компании, не заставляя их окунаться в зловонное болото, в которое превратились платформы с вакансиями.

HTML Academy и NEWMARK — теперь партнёры. Выпускники флагманских программ HTML Academy, соответствующих стандартам IT-гигантов, смогут попасть в команду NEWMARK

Подробнее: https://tml.io/bigtech-newmark

NEWMARK — digital‑агентство полного цикла с 20-летней историей, специализирующееся на разработке и продвижении корпоративных сайтов и интернет-магазинов, в основном на платформе 1С-Битрикс.

#работодателиhtmlacademy

Сегодня в 12:00 на эфире мы поговорим о программе обучения, на которой мы готовим будущих бэкендеров под реальные задачи. Основатель компании ADM расскажет о компании, перспективах для выпускников и ответит на ваши вопросы.

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

Патронус в мире магии — то же, что и атрибуты dataset и data-* в мире HTML и JavaScript

В статье объясняем, как использовать атрибуты data-* для хранения дополнительной информации в элементах. Доступ к данным через dataset в JavaScript — чисто и удобно, а поддержка браузерами — полная.

Если вам нужно привязать к элементу статус или любые другие данные — data-* станет мощным инструментом. Просто, без лишнего кода и с понятным синтаксисом.

💡 Где применять dataset и подробнее о подводных камнях рассказали тут.