Бесплатная школа UX/UI-дизайна с наставником

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

Полноценный курс по разработке сайтов международного уровня в Webflow
Оставить заявку

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

Начало обучения сразу после покупки с комфортной скоростью
Вам не нужно ждать старта потока. Оплачивайте курс, приступайте к обучению в этот же день и учитесь с комфортной скоростью. Оптимальный вариант — тратить на учёбу 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»

Рассрочка на 24 месяца — 2 204 ₽
Скидка 55% действует ещё
10
2 204 ₽ / мес
Рассрочка на 24 месяца
Без первого взноса
39 000 ₽ 49 900 ₽
4 408 ₽ / мес
Рассрочка на 12 месяцев
Без первого взноса
Суперскидка 20%
Заполните контактные данные
Ваша заявка принята!
Мы свяжемся с вами в ближайшее время
Ой! Что-то пошло не так при отправке формы

Курсы, которые станут отличным дополнением к «Создание сайтов на Webflow»

И помогут вам быстрее повысить квалификацию и получить уровень middle+ и выше.
Сайты Pro
Курс по дизайну сайтов. Поможет освоиться в профессии и выйти на первый заработок.
Курс включает:
UX/UI дизайнер: Сайты Pro
Бессрочный доступ к урокам
2 проекта в портфолио
Mobile Pro
Курс по дизайну мобильных приложений. Поможет углубиться в дизайн интерфейсов.
Курс включает:
UX/UI дизайнер: Mobile Pro
Бессрочный доступ к урокам
Проект в портфолио
Анимация интерфейсов
Полноценный курс по созданию анимаций для интерфейсов (web/mobile).
Курс включает:
24 шота в портфолио
Бессрочный доступ к урокам
1,5 месяца обучения
Создание 3D-иллюстраций
Курс по созданию 3D-иллюстраций и объектов для вашего дизайна.
Курс включает:
13 3D-моделей
Бессрочный доступ к урокам
1,5 месяца обучения
Создание сайтов без кода
Полноценный курс по разработке сайтов международного уровня в сервисе Webflow.
Курс включает:
1 проект в портфолио
Бессрочный доступ к урокам
4 месяца обучения

Частые вопросы

Какие есть варианты оплаты, есть ли рассрочка?

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

Вы рисуете в Figma? Я её не знаю.

Да, мы рисуем проекты в Figma. Это наиболее удобный на сегодняшний день инструмент, который используют большинство студий.

Наши партнеры