Stepik Верстка и создание сайтов в Webflow - с нуля до результата!
О курсе
Подробнее
Webflow – это самый продвинутый и современный конструктор сайтов в мире.
Webflow не просто конструктор готовых блоков и шаблонов, которые создал другой дизайнер;
Webflow - это ноу-код платформа.
"Ноу-код" значит, что весь код создается "под капотом", а мы используем понятный, удобный и простой в использовании интерфейс платформы.
Вам не нужно знать языки программирования, при этом вы можете создавать полностью уникальные сайты абсолютно любой сложности, которые сделаны по всем правилам, стандартам и законам программирования.
Также Webflow является самым большим источником заказов на иностранных фриланс биржах.
Итак, что в курсе?
Курс для абсолютных новичков
Этот курс предназначен для абсолютных новичков, поэтому вам не нужно иметь знаний в области разработки или программирования.
Мы начнем с самых основ и вместе, шаг за шагом, изучим все необходимые инструменты платформы Webflow, техники и приемы современной профессиональной верстки сайтов.
Да кстати, Webflow абсолютно бесплатен для двух проектов, поэтому вам не нужно платить за платформу в процессе обучения.
Много практики для вашего портфолио
Этот курс практический. Все темы курса мы будем изучать на реальном проекте, который мы создадим вместе шаг за шагом, и который вы сможете добавить к себе в портфолио веб-разработчика.
Создание сайтов под ключ
В курсе вы разберете весь процесс создания сайта: поиск идей, создание наброска, визуализация макета, верстка сайта и размещение его на реальном хостинге в сети интернет.
Мы изучим каждый инструмент платформы в деталях, разберемся в том, как платформа создает код, и научимся создавать сайты по всем стандартам современной верстки и программирования.
Любые анимации на вашем сайте
Вы научитесь анимировать каждый элемент на нашем сайте, от текста до предзагрузчика и появления элементов при скролле.
Дополнительные возможности сайта
Вы узнаете, как создавать формы и получать данные из них на нашу почту.
Создайте интернет магазин с любым дизайном
Мы узнаем, как создавать интернет-магазины и научимся подключать на сайт любую оплату, в том числе и оплату российскими банковскими картами.
Конечно, вы научитесь адаптировать ваши сайты, чтобы они идеально смотрелись на любом устройстве.
Инструкции по продвижению вашего сайта в топ
В курсе представлен отдельный блок по SEO.
В нем вы узнаете, как настроить сайт так, чтобы он попал на первые строчки в Google и Яндекс поиска.
Учтем все нюансы и детали
Мы разберемся со всеми особенностями и тонкостями платформы.
Если вы никогда не занимались созданием сайтов или уже знаете основы HTML и CSS, но вам они даются не легко, этот курс для вас.
Поверьте, курс вас приятно удивит!
Гарантия качества
И если у вас еще остались сомнения, этот курс предоставляет возможность вернуть деньги, потраченные на него, в течение 30 дней, без каких-либо вопросов!
Поддержка
Автор курса отвечает на все вопросы в комментариях к урокам — ежедневно.
Об авторе
Итак, кто же я? Меня зовут Дмитрий Фокеев, и я создаю профессиональные курсы по дизайну, программному обеспечению и веб-разработке.
И лучше обо мне, чем студенты, проходившие мои курсы, не скажет никто.
Мои курсы прошли уже более 17 000 студентов по всему миру и оставили более 7000 отзывов со средней оценкой 4.84 из 5.
Присоединяйтесь ко мне, и мы вместе начнем создавать удивительные сайты прямо в Webflow.
До встречи на уроках!
Требования
Что нужно для старта
- Никаких предварительных знаний не требуется.
- Знание основ верстки облегчит прохождение курса
Результат
Что вы получите
- Научитесь создавать сайты любой сложности.
- Научитесь создавать анимации на сайтах.
- Разберитесь во всех тонкостях Webflow.
- Научитесь продвигать ваш сайт в Google и Yandex.
- Узнаете основные правила верстки сайтов.
- Изучите методы ускорения создания сайтов.
- Узнаете, как создать мультиязычный сайт.
- Научитесь подключать оплату на ваш сайт.
- Узнаете, как создать интернет-магазин.
- Научитесь принципам адаптации сайтов.
- Изучите методы оптимизации сайта.
- Разберетесь с тем, как размещать сайт на реальном хостинге.
- Узнаете, как отправить данные из формы на вашу почту.
- Изучите трюки по обходу платных функций Webflow.
Аудитория
Для кого этот курс
- Для тех кто хочет создавать сайты
- Для веб дизайнеров
- Для верстальщиков сайтов
- Для веб разработчиков
Содержание
15 занятийПрограмма курса
№ТемаЧто внутри
01 Введение
- Скачиваем материалы. Как проходить курс
- Знакомство с интерфейсом Webflow
- Как работает Webflow под капотом
- Как делится своим проектом
- Практика - Создайте свой сайт
- Оставайтесь со мной на связи
02Основы Webflow
- Процесс создания сайта
- Скачиваем Figma
- Как верстают сайты
- Создаем изображение через элемент Image
- Создаем изображение через Background
- Подробнее про background и градиент
- Как работать с текстом
- Как менять ширину и высоту элементов
- Динамические единицы измерения vs жесткие единицы измерения
- Как работают Min Width \ Max Width
- Как работает тег Span
- Как работает наследование свойств
- Введение в классы CSS
- Для чего нужен контейнер
- Как создавать кнопки + настройки border
- Как работают блочные и строчные элементы
- Как работают Margin & Padding
- Как создать ссылки
- Что такое схлопывание margins
- Как добавить сторонний шрифт на сайт
- ПРАКТИКА. Создайте первую секцию сайта
03Классы & система flexbox
- Знакомимся с системой flex-box
- Как работает дочерний элемент во Flex Box контейнере
- Как работают комбо классы
- Как работают глобальные классы
- Создаем глобальные классы отступов
- Как правильно называть классы
- Подводим итоги. Правила создания сайтов
- Состояния элементов. Hover / Active
04Система Grid CSS
- Что такое CSS Grid
- Как работают дочерние элементы Grid
- Размеры Grid CSS сеток
- Как создать галерею с помощью Grid CSS
- Используйте Div внутри ячейки Grid
- Как выравнивать ячейки Grid CSS
- Практика. Используйте Grid CSS
05Абсолютное позиционирование и фильтры
- Создаем разметку следующей секции
- Используем Grid CSS на карточках
- Как работает свойство filter
- Img Vs Background
- Свойства вкладки filters
- Position Absolute VS Statik VS Relative
- Создаем декоративный квадрат
- Как работает Position fixed
- Как работает position Sticky
- Создаем следующую секцию
- Что такое семантический тег
06Работа с табами
- Создаем карточку таба
- Как модифицировать табы
- Как работает свойство overflow
- Как задать скорость анимации табов
07Формы
- Создаем структуру следующей секции
- Как отправить форму на почту
- Настройка элементов формы
- Checkboxes, radio buttons, text fields
- Как стилизовать формы
- Изменение стилей input
- Статус отправки письма
08Особенности и настройки webflow
- Обзор тарифов webflow
- Как оплатить Webflow из России
- Что такое HDPI Img
- Какие размеры у изображений
- Как добавить fav-icon
- Как разместить видео на сайте
- Как работает история версий
- Как создать мультиязычный сайт
09Ускорение работы
- Горячие клавиши
- Как создавать страницы и компоненты
- Независимый элемент компонента
- Как отвязать компонент
- Что такое переменные
- Маркетплейс webflow
10Анимации
- Создаем плавный скролл до секции
- Знакомимся с готовыми анимациями webflow
- Введение в кастомные анимации
- Настройки анимаций
- Настройки влияния анимаций
- Как создать "прелоадер" сайта
- Анимация появления текста
- Mouse over анимации
- Добавление класса по триггеру
- Как создать прогресс бар
- Анимация scroll into view
11Адаптивный дизайн
- Что такое адаптивный дизайн
- Как работают breakpoints в webflow
- Настраиваем универсальные размеры элементов
- Универсальный отступ для секций
- Универсальные настройки margin
- Адаптируем desktop версию сайта
- Как работает css grid auto-fit
- Применяем auto-fit на карточках
- Адаптация секции с ценами
- Адаптируем сайт часть 1
- Адаптируем сайт часть 2
- Делаем nav menu для мобильной версии
12SEO
- Как подключить домен к сайту
- Как настроить H1 \ H2 и Atl text
- Тег Title и Description
- Бейджик для социальных сетей
- Дополнительные настройки сайта
- Страница 404 и редирект
- Robots.txt и запрет на индексацию
- SEO для иностранного языка
- Google console & Yandex Master
- Политика обработки персональных данных
13Интернет магазин
- Как подключить word press
- Ошибка. This site cant be reached
- Кастомный домен бесплатно
- Как убрать лейбл made in webflow
- Помогите! У меня не получается
- Как создать товар
- Кнопка покупки товара
- Делаем кнопку корзины
- Оплата и уведомления
- Как изменить внешний вид магазина
14Экспорт
- Как делится проектом
- Как работать в команде
15 Заключение
- До встречи на уроках!
- Получите ваш сертификат
01 Введение
- Скачиваем материалы. Как проходить курс
- Знакомство с интерфейсом Webflow
- Как работает Webflow под капотом
- Как делится своим проектом
- Практика - Создайте свой сайт
- Оставайтесь со мной на связи
02Основы Webflow
- Процесс создания сайта
- Скачиваем Figma
- Как верстают сайты
- Создаем изображение через элемент Image
- Создаем изображение через Background
- Подробнее про background и градиент
- Как работать с текстом
- Как менять ширину и высоту элементов
- Динамические единицы измерения vs жесткие единицы измерения
- Как работают Min Width \ Max Width
- Как работает тег Span
- Как работает наследование свойств
- Введение в классы CSS
- Для чего нужен контейнер
- Как создавать кнопки + настройки border
- Как работают блочные и строчные элементы
- Как работают Margin & Padding
- Как создать ссылки
- Что такое схлопывание margins
- Как добавить сторонний шрифт на сайт
- ПРАКТИКА. Создайте первую секцию сайта
03Классы & система flexbox
- Знакомимся с системой flex-box
- Как работает дочерний элемент во Flex Box контейнере
- Как работают комбо классы
- Как работают глобальные классы
- Создаем глобальные классы отступов
- Как правильно называть классы
- Подводим итоги. Правила создания сайтов
- Состояния элементов. Hover / Active
04Система Grid CSS
- Что такое CSS Grid
- Как работают дочерние элементы Grid
- Размеры Grid CSS сеток
- Как создать галерею с помощью Grid CSS
- Используйте Div внутри ячейки Grid
- Как выравнивать ячейки Grid CSS
- Практика. Используйте Grid CSS
05Абсолютное позиционирование и фильтры
- Создаем разметку следующей секции
- Используем Grid CSS на карточках
- Как работает свойство filter
- Img Vs Background
- Свойства вкладки filters
- Position Absolute VS Statik VS Relative
- Создаем декоративный квадрат
- Как работает Position fixed
- Как работает position Sticky
- Создаем следующую секцию
- Что такое семантический тег
06Работа с табами
- Создаем карточку таба
- Как модифицировать табы
- Как работает свойство overflow
- Как задать скорость анимации табов
07Формы
- Создаем структуру следующей секции
- Как отправить форму на почту
- Настройка элементов формы
- Checkboxes, radio buttons, text fields
- Как стилизовать формы
- Изменение стилей input
- Статус отправки письма
08Особенности и настройки webflow
- Обзор тарифов webflow
- Как оплатить Webflow из России
- Что такое HDPI Img
- Какие размеры у изображений
- Как добавить fav-icon
- Как разместить видео на сайте
- Как работает история версий
- Как создать мультиязычный сайт
09Ускорение работы
- Горячие клавиши
- Как создавать страницы и компоненты
- Независимый элемент компонента
- Как отвязать компонент
- Что такое переменные
- Маркетплейс webflow
10Анимации
- Создаем плавный скролл до секции
- Знакомимся с готовыми анимациями webflow
- Введение в кастомные анимации
- Настройки анимаций
- Настройки влияния анимаций
- Как создать "прелоадер" сайта
- Анимация появления текста
- Mouse over анимации
- Добавление класса по триггеру
- Как создать прогресс бар
- Анимация scroll into view
11Адаптивный дизайн
- Что такое адаптивный дизайн
- Как работают breakpoints в webflow
- Настраиваем универсальные размеры элементов
- Универсальный отступ для секций
- Универсальные настройки margin
- Адаптируем desktop версию сайта
- Как работает css grid auto-fit
- Применяем auto-fit на карточках
- Адаптация секции с ценами
- Адаптируем сайт часть 1
- Адаптируем сайт часть 2
- Делаем nav menu для мобильной версии
12SEO
- Как подключить домен к сайту
- Как настроить H1 \ H2 и Atl text
- Тег Title и Description
- Бейджик для социальных сетей
- Дополнительные настройки сайта
- Страница 404 и редирект
- Robots.txt и запрет на индексацию
- SEO для иностранного языка
- Google console & Yandex Master
- Политика обработки персональных данных
13Интернет магазин
- Как подключить word press
- Ошибка. This site cant be reached
- Кастомный домен бесплатно
- Как убрать лейбл made in webflow
- Помогите! У меня не получается
- Как создать товар
- Кнопка покупки товара
- Делаем кнопку корзины
- Оплата и уведомления
- Как изменить внешний вид магазина
14Экспорт
- Как делится проектом
- Как работать в команде
15 Заключение
- До встречи на уроках!
- Получите ваш сертификат
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Верстка и создание сайтов в Webflow - с нуля до результата!» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
