Создание анимации с помощью CSS - вебинары ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно
ITVDN logo
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно

Создание анимации с помощью CSS

Все вебинары бесплатные и доступны для зарегистрированных пользователей
Константин Абрамов
Front-end разработчик
01.01.1960
19:00 - 21:00
Рейтинг: 4. Проголосовало: 8

На этом вебинаре мы займемся созданием анимации молекулы ДНК с помощью HTML и CSS, а также дополнительных инструментов. Мы создадим ключевые кадры и посмотрим, как это возможно воспроизвести с помощью HTML и CSS. Сделаем рефакторинг CSS в SCSS и с помощью директивы @for уменьшим количество кода в 2 раза.

План вебинара:

1) Разбор ключевых кадров анимации с помощью видео редактора.

2) Создание каркаса молекулы и элементов, которые будут ее составлять. Применение таких свойств как position: relative и absolute, display: flex.

3) Создание ключевых кадров в CSS.

4) Рефакторинг кода из CSS в SCSS.

5) + Добавим небольшой микс к молекуле – связывающие линии атомов.

6) В заключение поговорим о возможных вариантах улучшения и использования дополнительных инструментов для создания разнообразных спецэффектов.

Целевая аудитория:

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

Алла Штогрина
01.01.1960
2 ч 3 м
2634
Виталий Мазяр
01.01.1960
2 ч 14 м
4544
Алла Штогрина
01.01.1960
2 ч 2 м
3208
Генрих Коваленко
01.01.1960
1 ч 48 м
2932
Алла Штогрина
01.01.1960
1 ч 49 м
2578
Влад Шевченко
01.01.1960
2 ч 4 м
3938
Тысячный Влад
01.01.1960
1 ч 24 м
9171
Ткаченко Анастасия
01.01.1960
2 ч 31 м
9246
Ярослав Вовченко
01.01.1960
2 ч 3 м
3417
Владимир Кожаев
01.01.1960
1 ч 6 м
2664
Артем Кондранин
01.01.1960
2 ч 14 м
2927
Елена Хижняк
01.01.1960
1 ч 24 м
5838
Евгений Волосатов
01.01.1960
2 ч 49 м
15939
Артем Кондранин
01.01.1960
2 ч 14 м
7702
Юрий Шерстобитов
01.01.1960
2 ч 20 м
5751
Патёха Сергей
01.01.1960
1 ч 21 м
13824
Евгений Волосатов
01.01.1960
1 ч 42 м
13161
Кирилл Козак
01.01.1960
2 ч 27 м
8349
Александр Пономаренко
01.01.1960
2 ч 46 м
38717
Артем Кондранин
01.01.1960
2 ч 22 м
24897
Артем Кондранин
01.01.1960
2 ч 3 м
4069
Артем Кондранин
01.01.1960
1 ч 41 м
3807
Сергей Швайцер
01.01.1960
1 ч 34 м
3315
Сергей Швайцер
01.01.1960
2 ч 0 м
2589
С чего начинается создание сайтов? Специальность верстальщик
Вы когда-либо задумывались о том, как происходит полный цикл разработки современного веб-сайта? С чего все начинается и как мы приходим к такому сервису, который имеет привлекательный и гармоничный внешний вид, а также богатый функционал? Давайте разберемся с этим вопросом, а заодно поближе познакомимся с героем данной статьи.
Кто такой Full-stack разработчик
Full-stack разработчик (произносится “фулл стек”) — это некий мастер на все руки в мире веб-разработки. Ему под силу реализовать как клиентскую, так и серверную сторону приложения, которыми, обычно, занимаются FrontEnd и BackEnd разработчики раздельно друг от друга. Таким образом, Full-stack специалист способен в одиночку вести проект от начала до конца.
Что должен знать FrontEnd разработчик в 2019 году
Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.
Что такое адаптивная верстка и зачем она нужна
Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне.
Обзор конструкторов сайтов – критерии выбора и преимущества использования
Конструкторы сайтов представляют собой сервис по самостоятельной разработке интернет страниц. В отличие от CMS они просты в управлении, а также открывают множество возможностей настройки и опций, востребованных в современном онлайн мире.
ТОП 10 лучших HTML редакторов
Если упростить ответ на заявленный вопрос – редактор HTML это программа-инструмент, используемая для написания основы веб-сайтов. И, несмотря на то, что практически любой текстовый редактор может использоваться для создания сайтов, это вовсе не означает, что вам лучше использовать обычный текстовый редактор вместо специально созданного инструмента разработчика.
Тренды веб-разработки на 2019 год
Готовы ли вы к внедрению инноваций в ваши веб-приложения в 2019 году? Представляем вам последние тренды веб-разработки, которым, безусловно, стоит следовать!
Инструменты Vue.js разработчика
Когда вы начинаете свои эксперименты с Vue и открываете инструменты разработчика в браузере, вы обнаружите предложение загрузить инструменты разработчика Vue.js по указанной ссылке.
Топ-5 лучших фреймворков для Python-разработчиков
Сейчас трудно представить себе любого девелопера без использования фреймворков. Здесь вы найдёте 5 лучших и наиболее признанных фреймворков для Python-разработчиков.
10 полезных фич в Angular, о которых вы могли не знать
Angular - это объемный фреймворк, и наверняка большинство из нас использует лишь небольшую его часть. Но за этим мы можем упускать некоторые весьма полезные его возможности, которые сделали бы нашу жизнь значительно проще. В этой статье я собираюсь разобрать около 12 полезных фич в Angular, о которых вы могли и не слышать.
HTML 5.2 is done, HTML 5.3 is coming
На сегодняшний день W3C уже выпустило релиз 5.2. Это второй пересмотр HTML 5, который идет сразу за HTML 5.1, увидевшего свет в прошлом году. В 2014 году мы выразили желание устраивать «ревизию» HTML каждый год. Что же, похоже, наше желание было услышано.
Лучшие практики Node.JS
Добро пожаловать в наш небольшой сборник советов от ведущих разработчиков на платформе Node.JS! Цель сей статьи – обобщить все те знания, которые были в свое время опубликованы в различных обучающих постах или журналах.

Пакеты подписки с доступом ко всем курсам и сервисам

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 6 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
49.99 $
37.50 $
Подписка
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 8 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
Премиум
  • Все видеокурсы на 12 месяцев
  • Тестирование по 16 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
169.99 $
Подписка
комментарии и обсуждения
Notification success