Курсы для опытных
Новые и популярные
nebo.css — инвертированные углы проще простого
Познакомьтесь с CSS-библиотекой от HTML Academy, которая кардинально упрощает создание и настройку инвертированных углов (negative border radius). Углы работают даже на неоднородных фонах. Всё сделано на чистом CSS.
Алгоритмы сортировки через визуализации. Пузырёк
Изучаем алгоритм сортировки пузырьком с помощью визуализаций. Алгоритмы — сложная тема, но не с этим курсом! Мы превратим абстрактные сортировки в наглядные анимации, где всё сразу становится понятно. Учитесь легко, наблюдая, как алгоритмы работают вживую!
Галерея со скользящим hover-эффектом
Создадим галерею с красивейшим эффектом при наведении. Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.
создатель курса 
Все курсы
Радиальные градиенты, часть 2
Продолжаем разбираться с радиальными градиентами. Научимся принудительно задавать форму и управлять размерами градиентов. Разберёмся с ключевыми словами closest-side, farthest-side, closest-corner, farthest-corner.
Радиальные градиенты, часть 1
Познакомимся с функцией radial-gradient(), научимся создавать простые градиенты, управлять списком колорстопов и расположением центра градиента. А также разберёмся, что влияет на форму радиального градиента.
nebo.css — простейший способ создания negative border radius
Знакомимся с CSS-библиотекой, которая кардинально упрощает процесс создания и настройки инвертированных углов, работающих даже на неоднородных фонах. Бонус — полностью нативный чистый CSS.
CSS Container Queries, часть 3, продуктовый кейс
В третьей главе мы разберём ещё один продуктовый кейс — адаптивный список карточек. В нём количество карточек в ряду подстраивается под размер контейнера, а сами карточки тянутся.
CSS Container Queries, часть 2, продуктовый кейс
Самая ценная часть курса — разбор реальных продуктовых кейсов. Во второй главе мы создадим настоящую карточку услуги со сложным резиновым поведением и адаптивностью от контейнера.
Знакомство с CSS Container Queries
CSS Container Queries — технология, которая изменит понятие адаптивности навсегда. Мы создадим резиново-адаптивный чат и познакомится с основными возможностями выражений от контейнеров.
Алгоритмы сортировки через визуализации. Сортировка вставками
Во второй главе курса мы изучаем сортировку вставками. В конце главы — красивейшая визуализация сравнения работы двух изученных алгоритмов — пузырька и вставок.
Анимация бесконечной прокрутки на чистом CSS
Разберём приём, который позволяет создать анимированную карусель карточек с бесконечной прокруткой чистом CSS.
Методология Atomic CSS на фреймворке mlut. Часть 1: Знакомство
В первой главе курса мы познакомимся с основами методологии Atomic CSS. Также разберем базовые концепты инструмента mlut, который поможет эффективно верстать в этом подходе. Это официальный курс от автора фреймворка - Валентина Ульянова.
Алгоритмы сортировки через визуализации. Пузырёк
В этой главе мы с помощью визуализаций изучаем алгоритм сортировки пузырьком. Алгоритмы — сложная тема, но не с этим курсом! Мы превратим абстрактные сортировки в наглядные анимации, где всё сразу становится понятно. Учитесь легко, наблюдая, как алгоритмы работают вживую!
Вёрстка по макету из олимпиады. Часть 7
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В седьмой части добавляем версии промоблока для планшета и мобильных устройств.
Аккордеон на чистом HTML и CSS
Создадим типовой компонент аккордеон с красивыми изображениями с помощью HTML и CSS, без JavaScript. Используем встроенные возможности тега <details>.
Вёрстка по макету из олимпиады. Часть 6
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В шестой части завершаем вёрстку десктопной версии, без адаптивности.
Вёрстка по макету из олимпиады. Часть 5
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В пятой части добавляем разметку и базовую стилизацию для промоблока.
Вёрстка по макету из олимпиады. Часть 4
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В четвёртой части добавляем версии шапки для планшета и мобильных устройств.
Вёрстка по макету из олимпиады. Часть 3
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В третьей части добавляем стили состояний интерактивных элементов.
Вёрстка по макету из олимпиады. Часть 2
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. Во второй части работаем над сеткой шапки и проверяем её на переполнение.
Вёрстка по макету из олимпиады. Часть 1
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В первой части работаем над разметкой и базовой стилизацией шапки.
Посимвольный ввод текста
Создадим JavaScript-компонент, который будет имитировать посимвольный ввод текста. При реализации используем рекурсивную функцию.
Знакомство с сабгридами, subgrid
Создадим карточки с несколькими текстовыми элементами, а затем с помощью магии сабгридов свяжем по высоте тексты, находящиеся в разных карточках.
Объёмная иконка в стиле глассморфизма
Разбираемся, как создавать объёмную иконку в стиле глассморфизма. Вы узнаете, как использовать свойства mask и clip-path для «вырезания» элементов сложной формы, разберётесь, как использовать тени для создания объёма и как создавать эффект матового стекла с помощью backdrop-filter.
Свойство cursor
Учимся настраивать внешний вид курсора с помощью свойства cursor. Познакомимся с некоторыми системными курсорами, научимся устанавливать пользовательские курсоры с помощью изображений и управлять их параметрами.
Маски ввода для текстовых полей
Научимся легко и просто создавать маски ввода для популярных форматов данных: номеров телефонов, банковских карт, дат. Познакомимся и с более сложными масками.
Кастомизируемый лоадер
Создадим лоадер, который будет настраиваться с помощью CSS-переменных.
Галерея со скользящим hover-эффектом
Создадим галерею с красивейшим эффектом при наведении. Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.
Пульсирующий вертикальный лоадер
Создадим анимированный индикатор загрузки с тремя вертикальными полосами, которые поочерёдно уменьшаются и увеличиваются, создавая эффект пульсации. Лоадер реализован с помощью единственного тега с помощью линейных градинентов.
Вращающийся лоадер
Создадим базовый лоадер из вращающихся лепестков. Используем CSS-переменные для кардинального сокращения и упрощения кода.
Адаптивное оглавление
Создадим оглавление, которое подстраивается под ширину экрана. Реализуем сложный декоративный элемент «точки-заполнители», которые отлично отображаются в любых условиях. Ключевую роль в реализации эффекта играют тонкости абсолютного позиционирования.
Визуализация математических CSS-функций
Оказывается, В CSS есть нативные математические функции. В этой интерактивной визуализации мы познакомимся с ними, порисуем графики, повспоминаем линейную алгебру. Визуализация сделана на чистом CSS.
Sticky headers
Создадим список имён, в котором алфавитные разделители прилипают к верхней части списка при прокрутке. Это хрестоматийный пример использования position: sticky.
Переключение цветовых тем на чистом CSS
Разработаем несколько цветовых схем для сайта, а затем реализуем их переключение на чистом CSS. Ключевую роль в этой технике играет :has.
Адаптивная галерея с «резиной»
Создадим адаптивную галерею с резиновым поведением и фиксированными пропорциями изображений. Ключевую роль играют свойства object-fit и aspect-ratio. Также поэкспериментируем с Container Queries.
Круговая диаграмма на чистом CSS
Вы научитесь создавать круговые диаграммы с помощью конических градиентов. Вы узнаете как использовать CSS-маски для вырезания прозрачных областей в элементах и создадите круговую диаграмму-бублик.
Индикатор чтения, управляемый прокруткой, на чистом CSS
Рассмотрим как создать индикатор прогресса чтения на чистом CSS с помощью Scroll-driven Animations.
Интерактивный индикатор для поля ввода
Создадим поле ввода с анимированным индикатором, изменяющимся по мере ввода текста. Логику работы индикатора напишем на чистом JavaScript.
Вращающийся 3D-куб
Создадим вращающийся 3D-куб и разберёмся, как работают 3D-трансформации. Своими глазами увидим, какой эффект дают свойства perspective и backface-visibility. Поймём принцип работы множественных трансформаций.
Кнопка со сложной анимацией при наведении
Создадим кнопку с необычным эффектом подъёма и вращения при наведении. Для реализации эффекта будем использовать CSS-трансформации, тени и плавные переходы.
Эффект фотозатвора при наведении
Создадим красивый эффект при наведении, который похож на работу затвора фотоаппарата. Узнаем про абсолютно нестандартный способ применения привычных CSS-теней.
Коллекция кнопок в стиле неоморфизма
Познакомимся с неоморфизомом и разберёмся как реализовывать компоненты в этом стиле. Создадим неоморфные кнопки простой формы, кнопки с рамками, а затем и неоморфные кнопки сложной формы.
Анимированная градиентная рамка
Создадим анимированную градиентную рамку на чистом CSS. На понадобится всего один контейнер, без дополнительных обёрток и псевдоэлементов. Ключевую роль играют свойство background-origin и директива @property.
Пользовательские свойства. Часть 2: значения и разбиение значений
Мы познакомимся с одной из киллер-фич пользовательских свойств. Они позволяют разбивать на части многокомпонентные CSS-значения и удобно работать с отдельным компонентами. Что незаменимо при работе с цветами, тенями, градиентами, анимациями и другими составными CSS-значениями.
Пользовательские свойства. Часть 1: Знакомство
Первый раздел интерактивного курса про пользовательские свойства aka «CSS Custom Properties», aka «CSS-переменные», в котором вы познакомитесь с их синтаксисом и типовыми примерами использования.
Галерея с нестандартным переключением изображений
Создаём галерею с анимированным переключением изображений на CSS-трансформациях. Используем приём с animation-fill-mode: both.
repeating-linear-gradient VS linear-gradient
На примере решения одной и той же задачи исследуем разницу между repeating-linear-gradient и linear-gradient. Исследование предназначено для опытных разработчиков, но будет полезно и начинающим.
Градиентная рамка
Создаём карточку с красивой градиентной рамкой с помощью repeating-linear-gradient.
Фоновая анимация волн
Создаём фоновую анимацию с волнами на чистом CSS. Используем для этого семейство свойств animation.
Мастерская: анимированный звездопад на чистом CSS
Пошагово, с понятным объяснением каждого шага, создадим анимированный звездопад на чистом CSS. Этот эффект можно использовать в качестве фона для промоблоков и навигационных блоков.
Мастерская: карточка с анимацией 3D-переворота
С помощью семейства свойств transform и свойства backface-visibility создаём карточку, которая красиво переворачивается в 3D при наведении. А затем с помощью анимаций разберём принцип работы этого 3D-эффекта.
Псевдокласс :has — знакомство
Псевдокласс :has позволяет применять разные стили к элементу в зависимости от его содержания или состояния. Давайте разберём простейший кейс стилизации с помощью :has.
Миллиметровка на CSS
С помощью линейных CSS-градиентов и множественных фоновых изображений создаём сложный фон, напоминающий миллиметровую бумагу.
Разбираются linear-gradient, background-position, background-size. Демонстрируется, как работают множественные фоны.
Использование псевдокласса :nth-child
Разбираемся с использованием псевдоклассов :nth-child и :nth-of-type, которые позволяют выбирать элементы по их порядковому номеру.
Погружаемся в синтаксис :nth-child(an + b), приводим примеры создания простых, сложных и комбинированных выборок элементов, даём примеры расчётов порядковых номеров для этих выборк.
Progressive enhancement на примере формы входа
В этой демонстрации создаётся простая, но красивая форма входа в соответствии с подходом «прогрессивное улучшение» (progressive enhancement).
Используются новые селекторы и свойства CSS3: тени, градиенты, скругления.