Первая часть
Изучишь интерфейс Webflow, сверстаешь заготовленный нами сайт 1.1 — Знакомство
Артём расскажет о программе, о том, что нас ждет на обучении, и покажет примеры работ 1.2 — Внутри Webflow
Владение новым no-code инструментом Webflow
Подключение шрифтов
Обзор настроек 1.3 — Подготовка к верстке
Проверка и подготовка макета.
Экспорт и оптимизация изображений.
Задание: Подготовить макет и оптимизировать изображения 1.4 — База верстки
Основы блочной верстки
CSS стили
Колонки и ряды
FlexBox
Css Grid
Позиционирование
Обзор элементов внутри Webflow (Lightbox, Drop-down, Tabs, Symbols, Pop-up, Slider, Видеофон)
Задание 1: сверстать блоки на сайте, используя разные возможности верстки. Задание 2: сверстать каждый из пройденных элементов 1.5 — Верстка базового макета
Настройка Body, Section, Container
Верстка первого блока
Верстка остальных блоков
Состояния активных элементов
Меню, футер и компоненты
Задание: сверстать каждый из пройденных блоков 1.6 — Анимация в макете
Введение в анимацию Webflow
Базовая анимация
Задание на анимацию 1.7 — Планшетная и мобильная версии
Как сделать адаптив: брейкпоинты
Планшетная версия
Мобильная версия
Задание: верстка брейкпоинтов 1.8 — Финальная проверка и публикация
Оптимизация сайта
Настройки SEO, OG image, Alt изображений
Настройка форм
Публикация и передача клиенту
Задание: оптимизировать сайт и завершить работу над ним 1.9 — Продвинутая анимация
Лотти анимация
Базовая анимация, применение на разные типы элементов
Параллакс
Последовательная анимация
Горизонтальный скролл
Анимация закрытия меню
Прилипающие элементы
Анимация названий ввода полей
Плавная смена цвета фона при скролле
3-д анимации Вторая часть
Закрепишь знания и сверстаешь свой одностраничный сайт 2.1 — Проверка макета и исправления
Проверка макетов на корректность для верстки 2.2 — Верстка
Верстка страницы
Вебинар с разбором ошибок по верстке
Верстка брейкпоинтов
Вебинар с разбором ошибок по брейкпоинтам 2.3 — Анимация
Вебинар с разбором ошибок по анимации 2.4 — Разбор финальных работ