Скидки 30% до 12 сентября

Скидка 40% до 25 апреля!

Профессиональный онлайн-курс

Мастер анимаций:
CSS и JS-анимации

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

Что нужно знать: основы HTML, CSS, JavaScript

Гибкие сроки: начинайте сейчас и учитесь в комфортном режиме

Скидка 20% до 2 мая

Купить за 44 900 ₽Попробовать бесплатно

Чему вы научитесь

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

Эффекты по скроллу

Параллакс и 3D-анимациии

Эффекты по ховеру и движению мыши

Зацикленные анимации

Глитч-эффект

Эффект Кена-Бёрнса

Какие анимации вы создадите

На курсе разбираются 72 примера анимаций. Вот часть эффектов, которые вы создадите.

Анимация элементов сайта
Анимация карточек
2D-параллакс
Глитч-эффект
3D-поворот карточек
3D-анимация сайта

Программа курса

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

Обучение будет проходить по принципу «от простого к сложному». Сначала вы изучите необходимые CSS-свойства и правила. Затем научитесь привязывать анимации к пользовательскому взаимодействию. А в конце вы познакомитесь с инструментами для отладки и научитесь оптимизировать анимации.

Раздел 1

Основы анимации

Получить доступ

Раздел 2

CSS-анимации по ховеру

Раздел 3

CSS правило @keyframes и группа свойств animation CSS

Раздел 4

Анимации с пользовательским взаимодействием

Раздел 5

3D в CSS и параллакс-эффект

Раздел 6

Производительность CSS-анимаций

Раздел 7

Итоговый раздел

Из чего состоит курс

Теория

Полезные статьи о создании анимаций, работе с CSS-свойствами или использовании JavaScript для создания эффектов.

Демонстрации

Пошаговые примеры создания анимации — показывают, как правильно писать код, и учат применять теорию на практике.

Практические задания

Задания по анимации элементов вёрстки — учат решать задачи, похожие на те, что встречаются в реальной работе.

Эталонные решения

Готовые решения заданий — подскажут, как решить задачу, если у вас что-то не получится.

Тестирование

Вопросы по статьям раздела — помогают проверить, всё ли вы запомнили. Если что-то не получилось, можно посмотреть ответы и пройти тест заново.

Сертификат

В конце курса вы получите сертификат о том, что прошли обучение в HTML Academy.

Тренажёры

Интерактивные тренажёры с теорией и заданиями — знакомят с основными CSS-свойствами для создания анимации.

Разработчикам от разработчиков

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

Методика

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

Программа

Программа усложняется постепенно — с каждым разделом. Поэтому вы легко погрузитесь в тему, даже если ничего про неё не знали раньше.

Контент

Актуальные статьи и демонстрации. Никакой «воды» — вы получите только необходимые для работы знания.

Комьюнити

Чат в Discord. Вы в любой момент можете написать авторам курса или посовещаться с другими студентами.

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

Курс «Мастер анимаций:
CSS и JS-анимации» входит в несколько пакетов

Вы можете приобрести набор курсов по выгодной цене.
Навыки на курсах, входящих в пакет, объединены общей тематикой.

Разработчикам от разработчиков

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

Методика

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

Программа

Программа усложняется постепенно — с каждым разделом. Поэтому вы легко погрузитесь в тему, даже если ничего про неё не знали раньше.

Контент

Актуальные статьи и демонстрации. Никакой «воды» — вы получите только необходимые для работы знания.

Комьюнити

Чат в Discord. Вы в любой момент можете написать авторам курса или посовещаться с другими студентами.

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

CSS и JS-анимации
на карте компетенций

Мы провели исследование вакансий и проверили, каких навыков ждут работодатели от фронтендеров с разным опытом работы. Результаты перенесли на карту компетенций.

Как видно по карте, джуны должны знать простые анимации, группу CSS-свойств transition. От мидлов и сеньоров работодатели ждут более глубоких знаний: нужно создавать сложные анимации на CSS и JS.

Вам это подходит, если

Вы хотите больше зарабатывать или сменить работу, но не знаете, в каком направлении развиваться:

Хотите освоить конкретный навык, но не знаете как

Не хотите тратить время на поиск актуальной информации

Вам нужна методика обучения и только необходимая информация

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

На нашей стороне опыт, исследования и методика

Опыт

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

Исследования

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

Методика

Общаемся с сообществом веб-разработчиков и поэтому понимаем, как нужно учить. Максимально сокращаем время от изучения теории до решения типовых задач.

Что говорят разработчики

Записаться на курс «Анимации, часть 1.
CSS-анимации»

Начать курс
«Мастер анимаций: CSS и JS-анимации»

Мы постоянно разрабатываем новые курсы по навыкам, необходимым для роста до мидла: