Создание сайтов на Webflow [Uprock] [Евгений Кузьмин]

Складчина: Создание сайтов на Webflow [Uprock] [Евгений Кузьмин]

Полноценный курс по разработке сайтов международного уровня в Webflow
Самая объемная и насыщенная программа
Вы сможете не только рисовать сайты, но и запускать их самостоятельно, а так же освоите основы 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
Расширенные возможности

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

Цена: 31900 руб.
Скрытая ссылка