Веб-анимация на CSS и JavaScript + GSAP и AI — Frontend Blok
И да пребудет с тобой сила!
Курсы
Базовый курс по верстке Продвинутый курс по верстке Курс JavaScript Анимация и ИИ Ручное тестирование Блоги на Wordpress
Марафоны
Марафон Email Вёрстка Многостраничный сайт Современная верстка Elementor в Wordpress Создание игр на ThreeJS Создание игры на PhaserJS Vue и TypeScript
Полезноcти
Книги о программировании Шпаргалка Flexbox CSS Шпаргалка Grid CSS Видео с практикой
Вход
Меню
Главная Курсы Супер Старт

Веб-анимация
в эпоху ии

Научитесь создавать эффектные анимации для сайтов на CSS и JavaScript, работать с GSAP и использовать AI, чтобы делать их быстрее
Записаться
Дата старта
{{ bundle && bundle.hasOwnProperty('start_date') ? bundle.start_date : '' }}
Длительность
2.5 месяца
Стоимость
от {{ bundle && bundle.start_price }} РУБ {{ bundle.old_start_price }} РУБ
Анимация на сайтах, нейросети, ИИ, AI, CSS, JavaScript

Что будет на курсе?

Теоретическая
часть
В каждом уроке будет теоретический блок, чтобы знать все тонкости управления разными типами анимаций.
Практическая
часть
Покажем, как на практике работает анимация, а также предоставим короткие домашние задания для закрепления материала.
Дипломный
с проект
Самая важная часть курса, потому что Вы сможете закрепить все темы на практике в рамках одного большого задания.

Расписание

01

модуль

Веб-анимация в действии!
  • Основы CSS-анимаций
  • Углубленное использование CSS-анимаций
  • Введение в JavaScript-анимации
  • Библиотеки для работы с анимациями
  • Работа с Canvas в JavaScript
  • SVG-анимации
  • Lottie-анимации
  • WebGL и 3D-анимации
  • Gif и видео вместо анимаций
  • Производительность анимаций
Дипломная работа:Мы предоставим несколько заданий, которые будут охватывать все темы, чтобы закрепить все типы анимаций.
02

модуль

Анимация GSAP
  • Анимация вращений и искажений
  • Scroll-анимации с ScrollTrigger
  • Анимация изображений и параллакс
  • Таймлайны и комплексные сцены
  • Анимация карточек и списка
  • Анимация ссылок и кнопок
  • Изменение курсора мыши
Бонус:
  • Чек-лист по разделам «Что можно анимировать на сайте»
  • Видео «5 частых ошибок при работе с GSAP и как их избежать»
  • Видео «Как опубликовать сайт на GitHub Pages»
03

модуль

Создаём анимации быстре с AI
  • От идеи до анимации: ставим задачу AI
  • AI написал код. А он вообще хороший?
  • Находим и исправляем ошибку
  • Сделай как на этом сайте»: превращаем референс в анимацию с AI
Дипломная работа:Проведения тестирования в веб-приложении

Обучение проходит на авторской платформе

Frontendblok education platform

Как проходит обучение?

Получаете доступ на учебную платформу Frontend Blok
Каждый день в 6 утра по мск открывается доступ к новому уроку
Просматриваете урок длительностью 30 минут, где есть теория и практика
Выполняете домашнее задание для закрепления пройденного материала
Отправляете ДЗ куратору и выполняете его рекомендации
Получаете сертификат об окончании обучения: на русском и английском

Как можно зарабатывать на верстке сайтов, используя HTML/CSS?

Публиковать шаблоны
на продажу
Создав аккаунт на ThemeForest или TemplateMonster, ты сможешь продавать готовые шаблоны, обеспечив себе пассивный доход в долларах.
Сотрудничать
с веб-дизайнером
Заказчик, который обращается к веб-дизайнеру за макетом, вполне вероятно, нуждается в том, чтобы этот макет после сверстали. Такое сотрудничество создаст отличный тандем.
Искать заказчиков
на фрилансе
Под фрилансом можно понимать не только фриланс-биржи, но и соцсети. Начни вести экспертный блог и заказчики сами к тебе потянутся.

Общая информация по курсу

Формат уроков
Уроки заранее записаны и смонтированы так, чтобы не тратить ваше драгоценное время и получать только качественную информацию без воды.
Длительность уроков
В среднем уроки длятся 30-50 минут, но первый урок самый короткий - 11 минут. Также мы предоставляем домашки на самостоятельное выполнение, но следующих уроках есть видео-разборы, чтобы вы могли соотнести свои результаты с итогом. Они идут примерно 20 минут.
Домашние задания
Домашнее задание дается после каждого урока. Выполнение обязательно, потому что оно тесно связано с версткой учебного макета. Итоговую работу можно будет опубликовать на своем сайте-портфолио.
Время открытия уроков
Уроки открываются каждый день в 06:00 по мск в течении 5-ти дней. Они доступны месяц, но на учебной платформе можно приобрести опцию «Вечный Доступ» по символической цене.

Что верстаем?

Во время курса вы сверстаете одностраничный сайт на тему пространства для работы в коворкингах
Учебный макет в Figma.

На курсе мы сверстаем сайт с использованием HTML и CSS. Использовать будем только актуальные технологии: Flexbox и Grid. Макет представлен в Figma - именно этот редактор часто используют веб-дизайнеры для предоставления макетов.

Сколько стоит

Тариф «Самостоятельный»
Доступ к видео и материалам курса
Свёрстанный сайт для вашего портфолио
В подарок: PDF c моими комментариями на популярный Frontend Roadmap
{{ bundle.prices.start.price }} руб
{{ bundle && bundle.hasOwnProperty('prices') && bundle.prices.hasOwnProperty('start') ? bundle.prices.start.current_price + ' руб' : '' }}
Купить курс Хочу скидку
Тариф «Индивидуальный»
Доступ к видео и материалам курса
Свёрстанный сайт для вашего портфолио
В подарок: PDF c моими комментариями на популярный Frontend Roadmap
В подарок: PDF о том, как оформить свой профиль Linkedin так, чтобы работодатели сами писали вам
Проверка вашей работы от Анны Блок
Консультация с Анной Блок через созвон или чат
{{ bundle.prices.personal.price }} руб
{{ bundle && bundle.hasOwnProperty('prices') && bundle.prices.hasOwnProperty('personal') ? bundle.prices.personal.current_price + ' руб' : '' }}
Купить курс Хочу скидку

Отзывы о курсе Супер Старт

Дмитрий Белов
Дмитрий Белов
20 ноября 2022
Большое спасибо за знания , полученные на данном курсе. С помощью них я смог выполнить первый заказ на фрилансе и получить доход
Евгений Ярко
Евгений Ярко
22 июня 2020
Спасибо за курс. По объему знаний даже более полно чем необходимый минимум. Хочу также отметить что автор позаботилась о хорошей "среде" - редактор, плагин, работа со шрифтами и пр. Супер курс.
Павел Демьянов
Павел Демьянов
10 мая 2020
Все отлично, вижу путь для дальнейшего своего роста. Главное ваш курс помог увидеть картину...
Читать полностью
Богдан Рудаков
Богдан Рудаков
6 апреля 2020
Получил информации за один курс больше, чем у более крупных онлайн-площадок. Спасибо.
Эдгар Чамян
Эдгар Чамян
18 апреля 2021
Очень классный курс, закрепил свои знания. Курс советую
Юрий Коробейников
Юрий Коробейников
14 сентября 2020
Спасибо за этот курс. Понравился предложенный метод размещения по GRID. Не понятна адаптация. А так, в целом, не плохой курс. РЕКОМЕНДУЮ!!!!!
Сергей Яковлев
Сергей Яковлев
20 июля 2020
Было очень информативно и понятно. Буду продолжать изучать следующие курсы.
Anastasia Tsepeleva
Anastasia Tsepeleva
3 апреля 2020
Спасибо большое за курс! Материал преподносится чётко, постепенно и закономерно. На появляющиеся вопросы...
Читать полностью
Пагинация
Предыдущий
Следующий

Часто задаваемые вопросы

Сколько по времени длятся уроки?
Развернуть
В среднем уроки длятся 30-50 минут, но первый урок самый короткий - 11 минут. В видео коротко разбираем теорию, но только те моменты, которые встречаются на практике. Также мы предоставляем домашки на самостоятельное выполнение, но следующих уроках есть видео-разборы, чтобы вы могли соотнести свои результаты с итогом.
Должен ли я знать что-то заранее?
Развернуть
Нет, это не обязательно, но учитывайте, что здесь только практика и из теории разбираем только то, что встретится нам во время верстки макета. Это интенсив, где вы сверстаете с нуля усложненный дизайн сайта. Если для вас это первый проект, то рекомендуем после его прохождения взять «Базовый курс по вёрстке», чтобы более углебленно понять теорию и сверстать еще 2 проекта в рамках обучения. Если вы хотите прокачаться в вёрстке дальше, то рассмотрите «Продвинутый курс по вёрстке», как возможность узнать о новых технологиях.
Нужно ли мне заранее установить какие-нибудь программы?
Развернуть
Нет, заранее ничего устанавливать не нужно. На курсе мы расскажем подробно, какими приложениями будем пользоваться и покажем, как устанавливать. Спойлер: это делается очень просто.
Могу ли я посмотреть уроки в другой день?
Развернуть
Да, уроки не обязательно смотреть строго каждый день. Вы можете просмотреть и выполнить практику в любое удобное время. На учебной платформе будет указан срок закрытия курса. Не переживайте, вы всегда можете докупить опцию «Вечный Доступ», чтобы курс не закрылся и остался у вас навсегда.
Получу ли я сертификат в конце обучения?
Развернуть
Да, мы выдаём сертификаты. Это происходит после того, как вы просмотрите и выполните задания всех уроков.
Закрыть
Павел Демьянов
Павел Демьянов
10 мая 2020
Все отлично, вижу путь для дальнейшего своего роста. Главное ваш курс помог увидеть картину, что создание верстки не сложное, есть свои особенности конечно с адаптивом, к ним нужно привыкнуть, а так в целом все достаточно просто, нужно нарабатывать себе опыт и все будет. У меня получился макет, потому что все наглядно на видеоуроке разобрано.

Рекомендую начинать верстать с этого курса. Это даст Вам понимание нравится ли Вам этим заниматься. Пускай в курсе и не дают базовых знаний по используемым фишкам, это не важно, важно то, что при желании вы можете всю информацию найти в интернете, Вас это сильнее прокачает, а если хотите сразу получить все знания по верстке в большем объеме, не отходя от кассы идите на курсы по Верстке к Анне, там Вам все разжуют!
Закрыть
Anastasia Tsepeleva
Anastasia Tsepeleva
3 апреля 2020
Спасибо большое за курс! Материал преподносится чётко, постепенно и закономерно. На появляющиеся вопросы сразу же получала ответ в видео-уроках. Обучаться было одно удовольствие. Ни грамма скуки, одна мотивация :)