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

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

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

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

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

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

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

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

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

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

Введение

В этом уроке вы узнаете о курсе и о том, как будет проходить обучение. Познакомитесь с возможностями и назначениями бесплатного и платных тарифов Webflow. Также вы узнаете, как построить работу над проектом от анализа до запуска.

О чем этот курс
Как проходит курс
Планы и тарифы
Site Plans (Сайт планы)
Account Plans (Аккаунт Планы)
Обзор и Анализ макета
Чек-лист приемки макета
План работы
Подготовка макета к верстке
Экспорт и оптимизация изображений
Подготовка других файлов

Веб‑структура

В этом уроке вы познакомитесь с основными элементами веб‑страницы и принципами блочной верстки, на основе которых работает сервис Webflow. Базовые знания помогут вам разобраться в основной терминологии веб‑разработки. Вы узнаете, что такое иерархия веб-страницы и из чего она состоит. Рассмотрите панель Навигатор, чтобы понять, как создается и отображается структура элементов в сервисе Webflow.

Блочная верстка и основы HTML и CSS
Иерархия элементов сайта
Панель Навигатор
Практика: Планирование структуры сайта

Создание проекта и публикация

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

Регистрация и создание проекта
Публикация сайта
Поделиться проектом (Share project)
Клонирование проекта
Клонирование специального шаблона

Основные настройки

Вы познакомитесь с основными настройками проекта в режиме Project Settings.В результате настроите проект, загрузите изображения по папкам и сверстаете UI Kit.

Настройки проекта
Подключение своего домена
Файлы сайта
Общие настройки проекта
Настройка основных стилей
Загрузка изображений
UI Kit основных элементов

Элементы

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

Добавление элементов
Обзор основных элементов
Обзор функциональных элементов
Персональные настройки элементов
Практика: Создание основной структуры сайта
Практика: Добавляем элементы и классы

Стили элементов

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

Общие принципы
Обзор простых разделов панели Style (Стиль)
Обзор панели Style Manager (Управление стилями)
Состояния элементов
Практика: Добавление контента элементам

Настройки стилей. 1 часть

Вы изучите состав панели Style и разберете раздел Layout, который служит для настройки расположения элементов относительно друг друг.

Панель Style: Раздел Layout
Практика: Детальная верстка 1 и 2 секций

Настройки стилей. 2 часть

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

Панель Style: Элемент Grid
Практика: Детальная верстка 3 и 4 секций

Настройки стилей. 3 часть

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

Панель Style: Раздел Size
Практика: Детальная верстка 5 и 6 секций

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

Смотреть

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

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