Программа и содержание
Привет! Мы в Embacy сделали больше сотни сайтов на Webflow и считаем его лучшим no-code инструментом. Присоединяйся к нашему интенсивному курсу, где всего за 2 месяца мы научим тебя верстать pixel-perfect сайты.
Плюсы Webflow:
Сайты уровня Awwwards
Дает возможность быстро верстать сайт уровня топовых Web премий
Сложносочиненные анимации
Максимально широкие среди всех платформ возможности верстки — анимации, кастомные скроллы, яркие визуальные эффекты
Адаптивные и быстрые сайты
Сайты проходят проверку W3C, быстро грузятся даже со сложными анимациями — 90+ баллов в Google Page Speed
CMS и редактор
Клиенту будет просто поддерживать сайт без дизайнера и разработчика
Комьюнити
Международное сообщество на форуме Webflow и Facebook
Быстрая и простая сборка
Позволяет собрать за 2 дня pixel-perfect сайт без участия разработчика
Для кого:
Для начинающих дизайнеров
Можем сказать по нашему опыту: умение верстать на Webflow выделит тебя на фоне сотен ребят, откликающихся на вакансии джуниор дизайнера
Для опытных дизайнеров и лидов
Умение верстать на Webflow скорее всего изменит то, как ты подходишь к макетам. Понимание верстки также даст возможность pixel-perfect реализации собственных дизайн-проектов. А способность своими руками реализовать проект от начала и до конца, на наш взгляд, — бесценна
Для фрилансеров
Навык верстки на Webflow принесет тебе больше клиентов, в том числе международных
Для будущих профессиональных верстальщиков на Webflow
Верстальщик на Webflow — востребованная во всем мире профессия. И в Embacy тоже. Мы готовы не только подключать к нашим проектам лучших, но и передавать им те лиды на верстку, которые приходят к нам каждый день.
Программа:
Программа выдавалась слегка иначе чем на продажнике, в основном другая компоновка, но темы те же. Учитывайте это при покупке.
Первая часть
Изучишь интерфейс 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 — Разбор финальных работ