Содержание курса
15
разделов
125
уроков
1
тест
19 ч.
обн. 29 апреля 2026
Введение
6 уроков
1.
Скачиваем материалы. Как проходить курс
↗
2.
Знакомство с интерфейсом Webflow
↗
3.
Как работает Webflow под капотом
↗
4.
Как делится своим проектом
↗
5.
Практика - Создайте свой сайт
↗
6.
Оставайтесь со мной на связи
↗
Основы Webflow
21 урок
1.
Процесс создания сайта
↗
2.
Скачиваем Figma
↗
3.
Как верстают сайты
↗
4.
Создаем изображение через элемент Image
↗
5.
Создаем изображение через Background
↗
6.
Подробнее про background и градиент
↗
7.
Как работать с текстом
↗
8.
Как менять ширину и высоту элементов
↗
9.
Динамические единицы измерения vs жесткие единицы измерения
↗
10.
Как работают Min Width \ Max Width
↗
11.
Как работает тег Span
↗
12.
Как работает наследование свойств
↗
13.
Введение в классы CSS
↗
14.
Для чего нужен контейнер
↗
15.
Как создавать кнопки + настройки border
↗
16.
Как работают блочные и строчные элементы
↗
17.
Как работают Margin & Padding
↗
18.
Как создать ссылки
↗
19.
Что такое схлопывание margins
↗
20.
Как добавить сторонний шрифт на сайт
↗
21.
ПРАКТИКА. Создайте первую секцию сайта
↗
Классы & система flexbox
8 уроков
1.
Знакомимся с системой flex-box
↗
2.
Как работает дочерний элемент во Flex Box контейнере
↗
3.
Как работают комбо классы
↗
4.
Как работают глобальные классы
↗
5.
Создаем глобальные классы отступов
↗
6.
Как правильно называть классы
↗
7.
Подводим итоги. Правила создания сайтов
↗
8.
Состояния элементов. Hover / Active
↗
Система Grid CSS
7 уроков
1.
Что такое CSS Grid
↗
2.
Как работают дочерние элементы Grid
↗
3.
Размеры Grid CSS сеток
↗
4.
Как создать галерею с помощью Grid CSS
↗
5.
Используйте Div внутри ячейки Grid
↗
6.
Как выравнивать ячейки Grid CSS
↗
7.
Практика. Используйте Grid CSS
↗
Абсолютное позиционирование и фильтры
11 уроков
1.
Создаем разметку следующей секции
↗
2.
Используем Grid CSS на карточках
↗
3.
Как работает свойство filter
↗
4.
Img Vs Background
↗
5.
Свойства вкладки filters
↗
6.
Position Absolute VS Statik VS Relative
↗
7.
Создаем декоративный квадрат
↗
8.
Как работает Position fixed
↗
9.
Как работает position Sticky
↗
10.
Создаем следующую секцию
↗
11.
Что такое семантический тег
↗
Работа с табами
4 урока
1.
Создаем карточку таба
↗
2.
Как модифицировать табы
↗
3.
Как работает свойство overflow
↗
4.
Как задать скорость анимации табов
↗
Формы
7 уроков
1.
Создаем структуру следующей секции
↗
2.
Как отправить форму на почту
↗
3.
Настройка элементов формы
↗
4.
Checkboxes, radio buttons, text fields
↗
5.
Как стилизовать формы
↗
6.
Изменение стилей input
↗
7.
Статус отправки письма
↗
Особенности и настройки webflow
8 уроков
1.
Обзор тарифов webflow
↗
2.
Как оплатить Webflow из России
↗
3.
Что такое HDPI Img
↗
4.
Какие размеры у изображений
↗
5.
Как добавить fav-icon
↗
6.
Как разместить видео на сайте
↗
7.
Как работает история версий
↗
8.
Как создать мультиязычный сайт
↗
Ускорение работы
6 уроков
1.
Горячие клавиши
↗
2.
Как создавать страницы и компоненты
↗
3.
Независимый элемент компонента
↗
4.
Как отвязать компонент
↗
5.
Что такое переменные
↗
6.
Маркетплейс webflow
↗
Анимации
11 уроков
1.
Создаем плавный скролл до секции
↗
2.
Знакомимся с готовыми анимациями webflow
↗
3.
Введение в кастомные анимации
↗
4.
Настройки анимаций
↗
5.
Настройки влияния анимаций
↗
6.
Как создать "прелоадер" сайта
↗
7.
Анимация появления текста
↗
8.
Mouse over анимации
↗
9.
Добавление класса по триггеру
↗
10.
Как создать прогресс бар
↗
11.
Анимация scroll into view
↗
Адаптивный дизайн
12 уроков
1.
Что такое адаптивный дизайн
↗
2.
Как работают breakpoints в webflow
↗
3.
Настраиваем универсальные размеры элементов
↗
4.
Универсальный отступ для секций
↗
5.
Универсальные настройки margin
↗
6.
Адаптируем desktop версию сайта
↗
7.
Как работает css grid auto-fit
↗
8.
Применяем auto-fit на карточках
↗
9.
Адаптация секции с ценами
↗
10.
Адаптируем сайт часть 1
↗
11.
Адаптируем сайт часть 2
↗
12.
Делаем nav menu для мобильной версии
↗
SEO
10 уроков
1.
Как подключить домен к сайту
↗
2.
Как настроить H1 \ H2 и Atl text
↗
3.
Тег Title и Description
↗
4.
Бейджик для социальных сетей
↗
5.
Дополнительные настройки сайта
↗
6.
Страница 404 и редирект
↗
7.
Robots.txt и запрет на индексацию
↗
8.
SEO для иностранного языка
↗
9.
Google console & Yandex Master
↗
10.
Политика обработки персональных данных
↗
Интернет магазин
10 уроков
1.
Как подключить word press
↗
2.
Ошибка. This site cant be reached
↗
3.
Кастомный домен бесплатно
↗
4.
Как убрать лейбл made in webflow
↗
5.
Помогите! У меня не получается
↗
6.
Как создать товар
↗
7.
Кнопка покупки товара
↗
8.
Делаем кнопку корзины
↗
9.
Оплата и уведомления
↗
10.
Как изменить внешний вид магазина
↗
Экспорт
2 урока
1.
Как делится проектом
↗
2.
Как работать в команде
↗
Заключение
2 урока
1.
До встречи на уроках!
↗
2.
Получите ваш сертификат
↗