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

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

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

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

Самая объемная и насыщенная программа
Вы сможете не только рисовать сайты, но и запускать их самостоятельно, а так же освоите основы html и css.
Анализ макета
В этом разделе вы узнаете о курсе и о том, как будет проходить обучение. Познакомитесь с возможностями и назначениями бесплатного и платных тарифов Webflow. Также вы узнаете, как построить работу над проектом от анализа до запуска.
- Intro
- Планы и тарифы Webflow
- Обзор и Анализ макета
- План работы
- Подготовка макета к верстке
- Практика: Знакомство с макетом и подготовка файлов
Планирование структуры
В этом разделе вы познакомитесь с основными элементами веб‑страницы и принципами блочной верстки, на основе которых работает сервис Webflow. Базовые знания помогут вам разобраться в основной терминологии веб‑разработки. Вы узнаете, что такое иерархия веб-страницы и из чего она состоит.
- Блочная верстка и основы HTML и CSS
- Иерархия элементов сайта
- Практика: Планирование структуры сайта
Создание и настройка проекта
В этом блоке курса вы изучите начальные этапы работы с Webflow, включая регистрацию, создание проекта и его публикацию. Вы научитесь использовать функцию клонирования для создания новых сайтов на основе существующих шаблонов, а также ознакомитесь с настройками проекта и управлением файлами сайта, в том числе загрузкой изображений. Рассмотрим панели Pages, Style Selectors и Variables, которые помогут вам настроить основные стили и создать UI kit для базовых элементов вашего сайта.
- Регистрация и создание проекта
- Публикация сайта
- Поделиться проектом (Share project)
- Клонирование проекта
- Настройки проекта
- Практика: Общие настройки проекта
- Файлы сайта
- Практика: Загрузка изображений
- Обзор панели Pages
- Обзор панели Style Selectors
- Обзор панели Variables
- Практика: Настройка основных стилей
- Практика: UI kit основных элементов
Базовая структура и контент
В этом разделе вы познакомитесь с панелью Навигатора Webflow, освоите добавление элементов и узнаете об основных и функциональных элементах платформы. На практике создадите структуру сайта и добавите контент элементам.
- Панель Навигатор
- Добавление элементов
- Обзор основных элементов
- Обзор функциональных элементов
- Персональные настройки элементов
- Практика: Создание основной структуры сайта
- Практика: Добавляем элементы и классы
- Практика: Добавление контента элементам
Верстка 1 и 2 секции
В этом блоке рассматриваются основы работы с панелью Style, включая разделы по работе с разметкой, размерами и позиционированием элементов. Вы узнаете о различных состояниях элементов и их стилизации. Практические занятия по детальной верстке первых двух секций сайта помогут закрепить теоретические знания.
- Обзор простых разделов панели Style (Стиль)
- Состояния элементов
- Панель Style: Раздел Layout
- Панель Style: Раздел Size и единицы измерений
- Панель Style: Позиционирование элементов
- Практика: Детальная верстка 1 и 2 секций
Верстка с 3 по 10 секции
Подробно рассмотрим свойство Grid, которое позволяет создавать сложные макеты с использованием сетки для удобного размещения элементов на странице. В практической части вы примените полученные знания, выполнив детальную верстку секций с 3 по 10.
- Grid (сетка)
- Areas (Области сетки)
- Практика: Детальная верстка 3 и 4 секций
- Практика: Детальная верстка 5 и 6 секций
- Практика: Детальная верстка 7 и 8 секций
- Практика: Детальная верстка 9 и 10 секций
Aдаптивная верстка
В этом блоке вы освоите адаптивную верстку, научившись адаптировать сайт под разные устройства: от планшетов до мобильных телефонов и больших экранов. Практические задания включают адаптацию сайта под различные типы экранов и тестирование его адаптивности.
- Основы адаптивной верстки
- Практика: Адаптация сайта под планшет
- Практика. Адаптация экрана Mobile landscape
- Практика. Адаптация экрана Mobile Portrait
- Практика. Адаптация сайта под большие экраны. Тестируем адаптивность
Настройка Aнимации
В этом разделе курса вы изучите основы и принципы анимации в вебе, а также узнаете о различных функциях и типах анимации доступных в Webflow. На практике настроите анимацию элементов при наведении, якорные ссылки, глобальные анимации, а также анимацию компонентов и анимацию при загрузке и прокрутке страницы.
- Функции и типы анимации
- Принципы веб-анимации
- Базовые действия анимации
- Скорость
- Хореография
- Анимация в Webflow
- Настройка триггеров
- Глобальная анимация
- Практика: Анимируем элементы при наведении
- Практика: Якорные ссылки
- Практика: Настраиваем глобальные анимации
- Практика: Анимация компонентов
- Практика: Анимация при загрузке и прокрутке страницы
Интеграция, SEO и Аналитика
В этом блоке курса вы научитесь вставлять сторонний код на сайт в Webflow, включая практику по вставке карты и вставку CSS стилей. Вы также изучите основы веб-аналитики и практически подключите инструменты аналитики, такие как Яндекс. Метрика и Google Analytics. В разделе SEO вы получите знания о поисковой оптимизации и её важности для продвижения сайта.
- Вставка кода
- Практика: Вставляем карту на сайт
- Практика: Скрываем элементы горизонтальной прокрутки
- Аналитика
- Практика: Подключаем Яндекс. Метрику и Google Analytics
- SEO
Самая оперативная и качественная обратная связь
Наши кураторы дают самые быстрые и подробные ответы. Есть строгий регламент: вы будете получать минимум 2 видеоразбора в сутки, в каждом ответе куратор отметит ваши ошибки и подскажет, как их исправить.

до 4ч.
время ожидания
ответа от куратора
ответа от куратора

15 минут
время ожидания ответа от поддержки на вопросы по курсу
Курсы, которые станут отличным дополнением к «Создание сайтов на Webflow»
И помогут вам быстрее повысить квалификацию и получить уровень middle+ и выше.
Сайты Pro
Курс по дизайну сайтов. Поможет освоиться в профессии и выйти на первый заработок.
Курс включает:
2 проекта в портфолио
Бессрочный доступ к урокам
5 месяцев обучения

Продуктовый дизайн
Курс по дизайну мобильных приложений. Поможет углубиться в дизайн интерфейсов.
Курс включает:
Проект в портфолио
Бессрочный доступ к урокам
4 месяца обучения

Анимация интерфейсов
Полноценный курс по созданию анимаций для интерфейсов (web/mobile).
Курс включает:
24 шота в портфолио
Бессрочный доступ к урокам
1,5 месяца обучения

Создание 3D-иллюстраций
Курс по созданию 3D-иллюстраций и объектов для вашего дизайна.
Курс включает:
13 3D-моделей
Бессрочный доступ к урокам
1,5 месяца обучения

Создание сайтов без кода
Полноценный курс по разработке сайтов международного уровня в сервисе Webflow.
Курс включает:
1 проект в портфолио
Бессрочный доступ к урокам
4 месяца обучения

Частые вопросы
Какие есть варианты оплаты, есть ли рассрочка?
Вы можете оплатить полную сумму или воспользоваться беспроцентной рассрочкой без первого взноса с возможностью досрочного погашения от наших партнеров: ОТП Банк, Почта Банк, Сбер, Халва и Тинькофф Банк.
Вы рисуете в Figma? Я её не знаю.
Да, мы рисуем проекты в Figma. Это наиболее удобный на сегодняшний день инструмент, который используют большинство студий.