Создание сайтов на Webflow

Сильная методология и гибкий процесс обучения

Старт в любое время и обучение с комфортной скоростью

Старт обучения не привязан к дате покупки курса. Приступайте в любой момент, когда вам будет удобно и учитесь с комфортной скоростью. Оптимальный вариант — тратить на учебу 2 часа в день. Если же вы сможете уделять курсу 4–8 часов, то закончите его в 2–4 раза быстрее.

Последовательность и время на адаптацию

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

Емкие, но информативные видеоуроки

Сначала мы сделали сценарий на несколько сотен страниц, затем озвучили, смонтировали, наполнили графикой и сделали для вас короткие уроки «без воды», которые легко осваиваются и к которым комфортно возвращаться, чтобы что-то вспомнить.

Самая объемная и насыщенная программа

Вы сможете не только рисовать сайты, но и запускать их самостоятельно, а так же освоите основы html и css.

Страницы сайта

Мы рассмотрим панель Pages (Страницы). Узнаем, какие типы страниц существуют и как их настраивать. В результате вы сверстаете 7-8 секции сайта.

Страницы сайта
Практика: Детальная верстка 7 и 8 секций

Вспомогательные функции

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

Вспомогательные функции в режиме Designer
Практика. Детальная верстка 9 и 10 секций

Символы и Шаблоны

Узнаете, как в Webflow создавать Символы из элементов или группы элементов для управления повторяющимися блоками и контентом. По итогу сверстаете меню навигации, Navbar, настроите якорные ссылки и создадите символы для Меню и Footer.

Обзор панели Symbols
Обзор готовых макетов Layouts
Создание Символов
Практика

Адаптивная верстка

В этом уроке вы изучите основы адаптивной верстки, познакомитесь с понятием «Брейкпоинты». В результате создадите адаптив планшетной и мобильной версии, адаптив для больших экранов и адаптив меню.

Основы адаптивной верстки
Брейкпоинты
Проверка адаптивности
Адаптация сайта под мобильные экраны
Адаптация сайта под большие экраны
Тестируем адаптивность

Анимация. 1 часть

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

Общие принципы анимации
Триггеры
Настройка триггеров
Анимируем элементы при наведении
Якорные ссылки

Анимация. 2 часть

Вы узнаете, что такое глобальная анимация. В результате научитесь ее создавать.

Глобальная анимация
Анимация компонентов
Анимация при загрузке и прокрутке страницы

Вставка стороннего кода

Вы поймете, зачем нужно вставлять сторонний код. Познакомитесь с компонентом Embed. Узнаете, как можно интегрировать сторонний код, например, подключить сервисы комментариев или виджет карты. На практике научитесь вставлять код карты.

Компонент Embed
Вставка кода в настройках страницы
Вставка кода в настройках проекта
Вставка кода в настройках элемента (Custom Attributes)
Вставляем карту на сайт

Аналитика и SEO

Узнаете, что такое веб‑аналитика и SEO и для чего они нужны. Поймете, как подключить Аналитику и настроить SEO страницы.

Подключение Аналитики
Подключаем Яндекс Метрику и Google Analytics
Настройка SEO в настройках страницы

Завершение проекта

Еще раз пройдетесь по всем этапам создания сайта. Разберетесь, как утверждать и передавать сайт клиенту. Научитесь подключать сайт к домену на хостинге Webflow, выгружать сайт и устанавливать его на своем хостинге.

Чек‑лист проверки сайта
Утверждение и Передача проекта клиенту
Подключение сайта к домену на хостинге Webflow
Выгрузка сайта и установка на своем хостинге

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

Смотреть

Самая оперативная и качественная обратная связь

Наши кураторы дают самые быстрые и подробные ответы. Есть строгий регламент: вы будете получать минимум 2 видеоразбора в сутки, в каждом ответе куратор отметит ваши ошибки и подскажет, как их исправить.