ТЕОРИЯ

Введение

В этом уроке вы узнаете о курсе и о том, как будет проходить обучение. Познакомитесь с возможностями и назначениями бесплатного и платных тарифов 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 секций

ПРАКТИКА

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

Мы рассмотрим панель 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
• Выгрузка сайта и установка на своем хостинге

РАСШИРЕННЫЕ ВОЗМОЖНОСТИ

Бонус

Дипломный проект