Освойте один из самых востребованных на западном рынке конструкторов и начните создавать современные сайты без технических ограничений. Курс поможет вам уверенно работать в Webflow вне зависимости от исходного уровня: вы научитесь проектировать и собирать эффектные интерфейсы без глубоких знаний программирования, опираясь на визуальные инструменты и чёткую структуру работы.
Обучение построено так, чтобы шаг за шагом провести вас от базовых принципов до профессиональной верстки. Вначале вы знакомитесь с платформой, её интерфейсом, логикой работы и настройками проекта. Далее осваиваете основы HTML и CSS в контексте Webflow, учитесь работать с блочной моделью и основными элементами разметки, управляете типографикой, медиа-элементами и расширенными компонентами.
Отдельный блок посвящён системе классов, стилям и их применению: вы разберёте типографику, фоновые настройки, обводки, скругления, отступы, размеры, работу с Position, Z-index, трансформациями и фильтрами — всё, что формирует визуальный язык сайта. Далее изучите принципы БЭМ и научитесь применять его на практике.
Вы также разберёте все форматы Display — Block, Inline-Block, Grid, Flex — и закрепите понимание через интерактивные задания. Затем вас ждёт полноценный модуль по дизайну в Figma и верстке с нуля: от создания макета до сборки первого экрана.
Блок по адаптивности поможет разобраться с брейкпоинтами, типами верстки и единицами измерения, чтобы сайт корректно отображался на любых устройствах. Завершающая практическая часть включает отработку Display и верстки, создание меню и навигации, работу с компонентами, подготовку макета, формирование Style Guide, сборку проекта и адаптацию.
Отдельный модуль посвящён анимациям — состояниям, переходам, взаимодействиям при клике и наведении, реакциям на движение мыши и прокрутку, а также эффекту sticky. В финале вы разберёте SEO-настройки, передачу проекта заказчику, покупку и подключение домена.
Курс создаёт целостный путь: от первого знакомства с Webflow до уверенной разработки сайтов, которые можно использовать в портфолио или создавать для клиентов.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
1. Знакомство. План действий (Модуль #1. База) (Кухня Webflow)
Урок 2.
00:05:53
2. Быстрый обзор сервиса
Урок 3.
00:01:17
3. Настройки проекта
Урок 4.
00:18:22
4. Дизайн панель
Урок 5.
00:03:10
5. Новый интерфейс Webflow
Урок 6.
00:02:52
6. Как опубликовать и поделиться проектом
Урок 7.
00:11:02
7. Тарифные планы
Урок 8.
00:11:57
8. Основы HTML CSS, как это работает в webflow (Модуль #2 Основы)
Урок 9.
00:14:10
9. Блочная верстка, DIV блок
Урок 10.
00:09:59
10. DIV блок на практике
Урок 11.
00:15:21
11. Элементы разметки (Модуль #3. Элементы)
Урок 12.
00:08:20
12. Элементы Media, Advanced
Урок 13.
00:06:54
13. Элементы typography
Урок 14.
00:17:00
14. Классы (Модуль #4. Классы)
Урок 15.
00:09:59
15. BasicComboGlobal классы
Урок 16.
00:04:43
16. Стили Вступление (Модуль #5. Стили)
Урок 17.
00:12:05
17. Стили Typography
Урок 18.
00:11:13
18. Стили. Blackground
Урок 19.
00:02:44
19. Стили. Обводка и скругление
Урок 20.
00:08:07
20. Стили. Отступы. Margin и Padding
Урок 21.
00:04:10
21.Стили. Размер
Урок 22.
00:06:17
22. Стили. Overflow_ Fit
Урок 23.
00:15:28
23. Стили. Position
Урок 24.
00:03:17
24. Стили. Z index
Урок 25.
00:06:49
25. Стили. Filter
Урок 26.
00:08:23
26. Стили. 2d, 3d transforms
Урок 27.
00:02:34
27. Стили. Выводы
Урок 28.
00:11:23
28. Что такое БЭМ (Модуль #6. БЭМ)
Урок 29.
00:23:03
29. БЭМ. Практика
Урок 30.
00:07:58
30. Display Line Block (Модуль #7. Виды Display)
Урок 31.
00:07:39
31. Display Grid
Урок 32.
00:24:39
32. Display Flex
Урок 33.
00:19:11
33. Game. Практика
Урок 34.
00:28:41
34. Дизайн сайта в Figma. Часть 1 (Модуль #8. Дизайн в figma. Верстка)
Урок 35.
00:21:46
35. Дизайн сайта в Figma. Часть 2
Урок 36.
00:36:49
36. Верстка сайта. Первый экран. Практика
Урок 37.
00:09:43
37. Брейкпоинты (Модуль #9. Адаптив сайта)
Урок 38.
00:06:42
38. Виды верстки. Статичная, Адаптивная, Резиновая
Урок 39.
00:19:30
39. Единицы измерения Px, %, Auto, Em, Vh, Vw
Урок 40.
00:29:37
40. Display. Практика (Модуль #10. Практика)
Урок 41.
00:10:48
41. Верстка. Практика
Урок 42.
00:12:13
42. Меню сайта. Navbar menu
Урок 43.
00:05:42
43. Как создать страницы, ссылки меню
Урок 44.
00:13:30
44. Компоненты
Урок 45.
00:33:44
45. Блоки сайта. Практика
Урок 46.
00:07:59
46. Проверка и подготовка макета
Урок 47.
00:06:57
47. Подготовка Style Guide
Урок 48.
00:28:50
48. Верстка сайта. Практика
Урок 49.
00:16:56
49. Адаптив сайта. Практика
Урок 50.
00:19:33
50. Адаптив сайта 2. Практика
Урок 51.
00:36:15
51. Формы заявок. Реализация, подключение
Урок 52.
00:07:00
52. Состояния (Модуль #11. Анимация)
Урок 53.
00:05:22
53.Transitions
Урок 54.
00:28:07
54. Mouse click, mouse hover
Урок 55.
00:07:49
55. Mouse click, mouse hover. Практика.
Урок 56.
00:13:28
56. Mouse move over element
Урок 57.
00:07:40
57. Scroll into view
Урок 58.
00:02:30
58. Page scrolled.
Урок 59.
00:03:47
59. Position sticky
Урок 60.
00:08:06
60. Настройки сайта СЕО (Модуль #12. Настройки)
Урок 61.
00:04:33
61. Как передать сайт заказчику
Урок 62.
00:07:40
62. Как купить и настроить домен
Урок 63.
00:11:08
2. Подготовка и настройка проека (Майстер класс №1. Bank Webflow)
Урок 64.
01:17:02
3. Верстка компьютерной версии
Урок 65.
00:08:17
4. Верстка мобильной версии
Урок 66.
00:28:38
2. Галерея №2 (Майстер класс №2. Gallery Webflow)
Урок 67.
00:22:48
3. Галерея №3
Урок 68.
00:05:15
1. Урок №1. Генерация контента (Майстер класс №3. Mountain Webflow)
Урок 69.
00:25:36
2. Урок №2. Photoshop
Урок 70.
00:09:25
3. Урок №3. Webflow. Верстка сайта, размещаем изображения
Урок 71.
00:13:43
4. Урок №4. Webflow. Figma. Анимация Mouse move over element (движение мышки)
Урок 72.
00:19:19
5. Урок №4. Webflow. Контент
Урок 73.
00:19:47
6. Урок №6. Webflow. Анимация While page is scrolling
Урок 74.
00:07:02
7. Урок №7. Webflow. Адаптив сайта
Урок 75.
00:07:59
1. Style guide (Майстер класс №4. Responsive)
Урок 76.
00:17:44
2. Верстка первого экрана
Урок 77.
00:06:24
3. Верстка Header (меню)
Урок 78.
00:03:48
4. Webflow. Верстка второго экрана
Урок 79.
00:27:12
5. Верстка всего сайта
Урок 80.
00:21:06
6. Адаптив всего сайта в пикселях
Урок 81.
00:09:22
7. Что такое VW, как перевести весь сайт
Урок 82.
00:24:34
8. 5 шагов для адаптива (Responsive) всего сайта
Урок 83.
00:04:07
1. Приветствие. Весь путь до Webflow (Майстер класс №5. Landing page)
Урок 84.
00:07:08
2. Знакомство с интерфейсом Webflow
Урок 85.
00:02:34
3. Три основных инструмента
Урок 86.
00:14:28
4. Макет сайта в Figma
Урок 87.
00:10:51
5. Подготовка макета к Webflow
Урок 88.
00:09:22
6. Настройки проекта. Style guide
Урок 89.
00:23:50
7. Верстка первого экрана. Flex layout
Урок 90.
00:06:48
8. Верстка меню сайта
Урок 91.
00:08:30
9. Форма заявок
Урок 92.
00:31:33
10. Основы и практика Grid Layout
Урок 93.
00:31:42
11. Верста карточек сайта
Урок 94.
00:06:43
12. Подвал сайта
Урок 95.
00:22:56
13. Адаптив всего сайта
Автор - Макс Куратов
Макс Куратов
Графический дизайнер и веб-дизайнер, основатель онлайн-школы веб-дизайна и сайтов под названием Umapalata. Работает в сфере цифрового дизайна и веб-разработки: создаёт сайты, занимается обработкой фотографий, дизайном баннеров и рекламных материалов.
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Курс включает шесть модулей, охватывающих все аспекты графического дизайна и работы на фрилансе. Участники получат навыки работы в Figma, создания инфографики, 3D-иконок, анимации и рилсов. Также курс затрагивает поиск клиентов, ценообразование и психологию в работе с людьми. Лилия делится своим опытом и успешными практиками, что помогает студентам развивать свои проекты и профессионально расти.
Этот курс подойдёт тем, кто хочет освоить дизайн карточек с нуля или выйти на новый уровень в инфографике. Если вы только начинаете свой путь в дизайне и хотите как можно быстрее войти в профессию и начать зарабатывать — курс поможет сформировать прочную базу. Он также будет полезен тем, кто уже работает в инфографике, но устал от рутинных заказов по низким ставкам и хочет перейти к более профессиональному уровню. А дизайнеры из смежных сфер смог
Овладейте современной и востребованной профессией вместо рутинной работы. На курсе вы научитесь создавать стильные, фотореалистичные визуализации, которые могут стать стартом для творческой карьеры в архитектуре, дизайне или в собственном бизнесе. Превратите хобби в источник стабильного дохода, работая в студии, на фрилансе или запуская собственный проект.После обучения вы сможете создавать высококлассные рендеры — мощный инструмент презентации,