Создайте интерактивный индикатор для поля ввода на JavaScript в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/131

#туториалотhtmlacademy

Заглянем в будущее и узнаем, как на чистом CSS создавать анимации, управляемые прокруткой в новом бесплатном курсе.

https://htmlacademy.ru/demos/133

Мы создадим индикатор прочтения статьи без всякого JavaScript, с помощью scroll-timeline. Это новейшая технология, которая есть ещё не во всех браузерах. Рекомендуем смотреть демонстрацию в Chrome.

#туториалотhtmlacademy

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

https://htmlacademy.ru/demos/135

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

#туториалотhtmlacademy

Создадим адаптивную галерею с "резиной" и фиксированными пропорциями изображений в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/137

Вы познакомитесь со свойствами aspect-ratio и object-fit, а также поэкспериментируете с адаптивностью от контейнера, Container Queries.

#туториалотhtmlacademy

Научитесь создавать цветовые темы и реализовывать их переключение на чистом CSS в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/139

Ключевую роль в этой технике играют :has и CSS-переменные.

#туториалотhtmlacademy

Научитесь создавать прилипающие блоки aka «sticky headers» в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/141

Это хрестоматийный пример использования position: sticky.

#туториалотhtmlacademy

С 4 по 10 ноября HTML Academy вместе с партнёрами-работодателями открывает доступ ко всем тренажёрам

https://htmlacademy.ru/special/open-week/2024/november

Зарабатывайте баллы за прохождение тренажёров и приглашение друзей. Самые активные участники получат бесплатные места на совместных программах обучения.

Правила акции читайте тут:
https://htmlacademy.ru/docs/action/open-week

Визуализация математических CSS-функций

https://htmlacademy.ru/demos/143

В этой интерактивной визуализации мы познакомимся с математическими CSS-функциями, порисуем графики, повспоминаем линейную алгебру. Кстати, визуализация тоже сделана на чистом CSS.

#туториалотhtmlacademy

Научитесь верстать адаптивное оглавление в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/145

Изюминка этого компонента — сложные «точки-заполнители», которые отлично отображаются в любых условиях. Ключевую роль в реализации эффекта играют тонкости абсолютного позиционирования.

#туториалотhtmlacademy

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

https://htmlacademy.ru/demos/147

#туториалотhtmlacademy

Идёт набор на совместную программу обучения для компании Максимум:
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 11 ноября

Подробности программы и запись по ссылке:
https://tml.io/frontmaximum

В рубрике «сегодня я узнал» прекрасная история про таинственный третий регистр текста, или почему по строке mad в венгерском нельзя найти строку madzag.

https://habr.com/ru/articles/856784/

Создайте анимированный индикатор загрузки с эффектом пульсации в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/149

Лоадер реализован с помощью единственного тега и линейных градиентов.

#туториалотhtmlacademy

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

https://htmlacademy.ru/demos/151

Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.

#туториалотhtmlacademy

Визуализация схлопывания и выпадания маргинов

#visualization #css #margin

Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos

Свежая статья про использование CSS-функции min() для создания адаптивных интерфейсов:

https://www.smashingmagazine.com/2024/10/css-min-all-the-things/

Комментарий от Николая Громова, ведущего разработчика интерфейсов компании Наука:

Любопытное описание небольшого исследования про min() в CSS.

Мне весьма понравился пример с .container { width: min(100%, 650px); } — это замечательная возможность использовать что-то типа minmax() из гридов.

И да, оно продакшен-реди: https://caniuse.com/css-math-functions

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотnauka

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

https://htmlacademy.ru/demos/153

На превью четыре разных индикатора загрузки. Но это один и тот же компонент с разными настройками внешнего вида.

Меняйте настройки на последнем шаге и делитесь результатами в комментариях!

#туториалотhtmlacademy

Идёт набор на совместную программу обучения для компании Максимум:
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 25 ноября

Подробности программы и запись по ссылке:
https://tml.io/backender-maximum

Научитесь легко и просто создавать маски ввода для популярных форматов данных в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/155

Вы поработаете с масками для номеров телефонов, банковских карт и дат. Познакомитесь и с более сложными масками.

#туториалотhtmlacademy

Научитесь настраивать внешний вид курсора с помощью свойства cursor в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/157

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

#туториалотhtmlacademy