Курс «Webflow-разработчик: создание сайтов без кода»

На курсе «Webflow-разработчик: создание сайтов без кода» организовано обучение созданию сайтов и продуктовых лендингов с помощью усовершенствованного конструктора — Webflow. Кроме того, инструмент позволяет верстать интернет-магазины, корпоративные сайты, блоги, сайты-одностраничники и портфолио.
Обучение подойдет специалистам по дизайну и верстальщикам. А также рабочим командам, отвечающим за создание веб-сайтов в визуальном формате.

Главная цель курса — научить пользователей верстать цифровые продукты без кода. При работе на конструкторе Webflow не требуется кодирование, достаточно основных знаний CSS и HTML.

Во время обучения на курсе от «Школа веб-дизайна Uprock» вы рассмотрите темы:

1. Функционал всех тарифов Webflow.
2. Режиме Project Settings и главные настройки проекта.
3. Что такое Комбо и Классы.
4. Как работать с панелью Style и разделом Layou.
5. Что из себя представляет панель Pages (Страницы).
6. Расширенный функционал конструктора.

В результате обучения вы узнаете, как создать сайт без кода, научитесь работать на популярном конструкторе. Научитесь быстро верстать красивые цифровые продукты. Освоите востребованную профессию Webflow разработчика.

Введение

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

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

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

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

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

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

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

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

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

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

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

Элементы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Аналитика и SEO

• Подключение Аналитики.
• Подключаем Яндекс Метрику и Google Analytics.

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

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

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

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

Бонус

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

• Формат
  Самостоятельно с наставником
  Вебинары в записи / Консультации
  Обучение в ЛК на сайте автора
• Продолжительность
  4 месяца
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  ЕстьС проверкой
• Документ об обучении
  Диплом Освоение программы курса
• Обязательное выполнение итоговой работы
• Сопровождение
  Куратором
• Техническая поддержка
  В рабочее времяЧат в вкЧат в мессенджере
• Срок доступа к материалам
  Бессрочный
• Безопасная покупка
  70% от стоимости покупки в первые 2 недели обучения.
• Бонусы
  Для всех учеников
• Что можно оплатить дополнительно
  При оплате курса одним платежом, его стоимость снижается до 31 900 рублей. В этом случае ваша экономия составит 8100 рублей.