Главная страницаКатегория webflowПрофессия Webflow-разработчик

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

Name: Профессия Webflow-разработчик
Price: 12.5 USD

Pixel Perfect

Продолжительность

22 ч 30 мин

Категория

Webflow

Количество уроков

97 Видео

Дата добавления

5 мая 2026 г., 23:42

Язык

Русский

Освойте востребованную профессию 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.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:09:00
1.1 Введение. Вводный урок
Урок 2. 00:02:01
2.1 Основы классической верстки. Вводный урок
Урок 3. 00:06:41
2.2 Что такое Box Model
Урок 4. 00:11:33
2.3 Что такое
Урок 5. 00:10:59
2.4 Что такое CSS
Урок 6. 00:09:57
2.5 Что такое JS
Урок 7. 00:00:43
3.1 Интро Webflow. Вводный урок
Урок 8. 00:04:02
3.2 Регистрация
Урок 9. 00:15:48
3.3 Обзор интерфейса Webflow
Урок 10. 00:18:30
3.4 Копируем шаблон для обучения. Создание первого проекта и обзор настроек проекта
Урок 11. 00:17:17
3.5 Обзор интерфейса Designer. Среда разработки сайтов
Урок 12. 00:13:53
3.6 Тарифы
Урок 13. 00:01:06
4.1 Элементы в Webflow. Вводный урок
Урок 14. 00:14:21
4.2 Элементы Structure
Урок 15. 00:13:11
4.3 Элементы Basic
Урок 16. 00:12:55
4.4 Элементы Typography
Урок 17. 00:16:59
4.5 Элементы Media
Урок 18. 00:23:21
4.6 Элементы Forms
Урок 19. 00:32:10
4.7 Элементы Advanced
Урок 20. 00:01:40
5.1 Стилизация элементов. Вводный урок
Урок 21. 00:39:23
5.2 Работа с классами в Webflow
Урок 22. 00:13:39
5.3 Единицы измерения
Урок 23. 00:26:30
5.4 CSS свойство Display Block и Flex
Урок 24. 00:27:28
5.5 Display Grid. Все о сетках в Webflow
Урок 25. 00:10:08
5.6 Display inline. Разбираем inline inline-flex inline-grid inline-block
Урок 26. 00:07:24
5.7 Spacing. Как настроить внутренние и внешние отступы
Урок 27. 00:19:01
5.8 Раздел Size. Настройка размеров элементов
Урок 28. 00:24:48
5.9 Раздел Position. Управляем позиционированием элемента
Урок 29. 00:15:37
5.10 Раздел Position. Липкие элементы Sticky
Урок 30. 00:14:31
5.11 Раздел Typography. Базовые настройки типографики
Урок 31. 00:12:39
5.12 Раздел Typography. Дополнительные настройки типографики
Урок 32. 00:14:55
5.13 Раздел Backgrounds. Как поменять цвет фона или поставить изображение на фон
Урок 33. 00:09:03
5.14 Раздел Borders. Все про обводку элементов
Урок 34. 00:09:48
5.15 Раздел Effects Тени прозрачность обводки наложения
Урок 35. 00:11:27
5.16 Раздел Effects. 2D и 3D преобразования
Урок 36. 00:05:50
5.17 Раздел Effects. Переходы фильтры и backdrop фильтры
Урок 37. 00:03:39
5.18 Раздел Effects. Как поменять курсор и свойство pointer events
Урок 38. 00:07:52
5.19 Раздел Effects. Custom propeties и модификатор important
Урок 39. 00:02:37
6.1 Верстка первого макета. Вводный урок
Урок 40. 00:13:43
6.2 Работа с макетом
Урок 41. 00:20:14
6.3 Создание Style Guide. Part 1
Урок 42. 00:25:39
6.4 Создание Style Guide. Part 2
Урок 43. 00:16:49
6.5 Создание Style Guide. Part 3
Урок 44. 00:13:03
6.6 Создание Style Guide. Part 4
Урок 45. 00:21:07
6.7 Верстка десктопной версии 1-й блок
Урок 46. 00:03:30
6.8 Верстка десктопной версии 2-й блок
Урок 47. 00:24:23
6.9 Верстка десктопной версии 3-й блок
Урок 48. 00:23:09
6.10 Верстка десктопной версии 4-й блок. Sticky
Урок 49. 00:11:24
6.11 Верстка десктопной версии 5-й блок. Нестандартный Grid.
Урок 50. 00:12:51
6.12 Верстка десктопной версии 6-й блок. Dropdown FAQ Webflow interactions
Урок 51. 00:22:15
6.13 Верстка десктопной версии 7-й блок. Верстаем новости с помощью Tabs
Урок 52. 00:25:05
6.14 Верстка десктопной версии страницы новостей.
Урок 53. 00:11:17
6.15 Верстка десктопной версии 8-й блок. Форма на сайте
Урок 54. 00:16:01
6.16 Верстка модального окна Webflow interactions
Урок 55. 00:20:23
6.17 Микро-анимации и стилизация с помощью псевдо-классов hover active.
Урок 56. 00:01:46
7.1 Адаптивность в Webflow. Вводный урок
Урок 57. 00:33:28
7.2 Что такое Fluid Resposive и как построить график адаптивности
Урок 58. 00:36:07
7.3 Проверка десктопной версии
Урок 59. 00:28:38
7.4 Адаптивность UI-Kit
Урок 60. 00:39:36
7.5 Верстка планшетной версии
Урок 61. 00:19:43
7.6 Верстка горизонтальной мобильной версии
Урок 62. 00:20:54
7.7 Верстка вертикальной мобильной версии
Урок 63. 00:13:52
8.1 Вводный урок. Типы анимаций в Webflow css classic gsap
Урок 64. 00:10:13
8.2 Webflow interactions. Из чего состоят анимации
Урок 65. 00:11:19
8.3 Раздел Affect
Урок 66. 00:11:19
8.4 Раздел Timing
Урок 67. 00:08:36
8.5 Типы Триггеров Element Page
Урок 68. 00:15:58
8.6 Element Trigger Mouse Click
Урок 69. 00:08:52
8.7 Element Trigger Mouse Hover
Урок 70. 00:08:15
8.8 Element Trigger Mouse move over element
Урок 71. 00:07:12
8.9 Element Trigger Scroll into view
Урок 72. 00:15:33
8.10 Element Trigger While scrolling in view
Урок 73. 00:08:19
8.11 Element Trigger Dropdown opens
Урок 74. 00:06:44
8.12 Element Trigger Navbar opens
Урок 75. 00:06:02
8.13 Element Trigger Tab change
Урок 76. 00:05:31
8.14 Element Trigger Slider change
Урок 77. 00:05:56
8.15 Page Trigger Mouse move in viewport
Урок 78. 00:04:21
8.16 Page Trigger While page is scrolling
Урок 79. 00:08:32
8.17 Page Trigger Page load
Урок 80. 00:02:18
8.18 Page Trigger Page scrolled
Урок 81. 00:06:28
8.19 Переиспользование анимаций
Урок 82. 00:06:12
8.20 Адаптивность анимаций
Урок 83. 00:06:07
8.21 Анимации переменных
Урок 84. 00:23:08
8.22 Анимация макета Bloomlex
Урок 85. 00:23:43
8.23 Подведение итогов модуля по Анимациям
Урок 86. 00:09:50
9.1 Вводный урок. Что такое CMS Collections и из чего состоит
Урок 87. 00:24:14
9.2 Создание CMS Коллекции и типы кастомных полей
Урок 88. 00:05:48
9.3 Создание CMS Item и опции публикации
Урок 89. 00:10:05
9.4 Export Import. Как быстро заполнить CMS
Урок 90. 00:09:44
9.5 Добавление CMS на страницу вывод контента динамические стили
Урок 91. 00:09:49
9.6 Настройка вывода контента на странице. Фильтрация сортировка пагинация ограничение количества
Урок 92. 00:06:41
9.7 Reference и Multi-reference. Как связаться 2 разных коллекции
Урок 93. 00:20:55
9.8 CMS Template. Настройка и вывод данных
Урок 94. 00:15:00
9.9 Finsweet атрибуты Как обойти ограничения и расширить функционал
Урок 95. 00:15:16
9.10 Finsweet CMS Filter
Урок 96. 00:01:35
14.1 Вводный урок
Урок 97. 00:23:20
14.2 Продажи

Автор - Pixel Perfect

Pixel Perfect

Pixel Perfect — онлайн-школа, обучающая созданию сайтов на Webflow без программирования. Проект фокусируется на практических навыках, работе с клиентами и выходе на международный фриланс, помогая студентам освоить востребованную digital-профессию с нуля.

Комментарии