Профессия Webflow-разработчик

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

Кому подойдет курс

Новичкам

Webflow — идеальная точка входа в мир веб‑разработки. Вы быстро увидите результат, начнете зарабатывать и получите фундамент для дальнейшего роста.

Дизайнерам

Устали зависеть от разработчиков? Освойте верстку самостоятельно и станьте дизайнером полного цикла — ваши навыки и ценность для клиентов возрастут в разы.

Верстальщикам

Если вы уже работаете с кодом — Webflow позволит ускорить процесс, автоматизировать рутину и выйти на зарубежный рынок с более высокой оплатой.

Программа курса

1. Основы верстки

• 1.1. Что такое HTML, CSS, JS и из чего состоит сайт
• 1.2. Принципы блочной модели. Div‑блок и его роль в структуре

2. Интро Webflow

• 2.1. Интерфейс Webflow
• 2.2. Подключение шрифтов
• 2.3. Настройки проекта
• 2.4. Как поделиться проектом
• 2.5. Как клонировать проект
• 2.6. Workspace и Site plan

3. База верстки в Webflow

• 3.1. Классы и методология БЭМ
• 3.2. Display: базовые принципы
• 3.3. Flexbox
• 3.4. Grid
• 3.5. Отступы: Margin и Padding
• 3.6. Единицы измерения: px, %, vw, vh
• 3.7. Overflow
• 3.8. Position
• 3.9. Z-index
• 3.10. Типографика
• 3.11. Background
• 3.12. Border и border-radius
• 3.13. Blend‑mode
• 3.14. Outline, opacity и тени
• 3.15. Transforms
• 3.16. Transition
• 3.17. Filters
• 3.18. Виды курсоров

4. Элементы в Webflow

• 4.1. Layout
• 4.2. Базовые элементы
• 4.3. Элементы типографики
• 4.4. Медиа‑элементы
• 4.5. Формы
• 4.6. Компоненты
• 4.7. Символы
• 4.8. Кастомный код
• 4.9. Расширения для браузера

5. Подготовка макета к верстке

• 5.1. Проверка и подготовка дизайна
• 5.2. Экспорт и оптимизация изображений
• 5.3. Создание Style Guide

6. Введение в анимацию

• 6.1. Основы анимации в Webflow
• 6.2. Функция плавности
• 6.3. States
• 6.4. Interactions
• 6.5. Анимация меню
• 6.6. Анимация выпадающего списка
• 6.7. Смена табов
• 6.8. Анимация слайдера
• 6.9. Page trigger
• 6.10. Page load
• 6.11. Анимации на скролл

7. Верстка первого проекта

• 7.1. Интро
• 7.2. Единицы измерения
• 7.3. Калькулятор PX → EM/REM
• 7.4–7.6. Сборка UI‑Kit (3 части)
• 7.7. Система отступов
• 7.8. Первый экран и навбар
• 7.9–7.14. Сборка экранов 2–7
• 7.15. Адаптивность
• 7.15.1. Формы
• 7.16. Мобильное меню
• 7.17. Проверка и правки
• 7.18. SEO, Open Graph, Favicon и Webclip
• 7.19. Подключение домена и оплата подписки

8. Запись воркшопа: CMS‑коллекции

Подробное объяснение работы с динамическим контентом, коллекциями и шаблонами в Webflow.