0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>13 окт 2023</li>
2
<ul><li>13 окт 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем о популярном зарубежном конструкторе веб-сайтов, конкуренте Tilda и Readymag.</p>
4
</ul><p>Рассказываем о популярном зарубежном конструкторе веб-сайтов, конкуренте Tilda и Readymag.</p>
5
<p>Иллюстрация: Полина Честнова для Skillbox Media</p>
5
<p>Иллюстрация: Полина Честнова для Skillbox Media</p>
6
<p>Дизайнер интерфейсов и аналитик, любительница погулять с собаками друзей и пообсуждать жизнь с книжным клубом.</p>
6
<p>Дизайнер интерфейсов и аналитик, любительница погулять с собаками друзей и пообсуждать жизнь с книжным клубом.</p>
7
<p>Webflow популярен среди конструкторов для создания сайтов и лендингов. Он появился в 2013 году и уже несколько лет остаётся самым популярным инструментом в англоязычном мире, несмотря на то, что он создан для дизайнеров, привыкших к технологиям фронтенда и флексбоксов.</p>
7
<p>Webflow популярен среди конструкторов для создания сайтов и лендингов. Он появился в 2013 году и уже несколько лет остаётся самым популярным инструментом в англоязычном мире, несмотря на то, что он создан для дизайнеров, привыкших к технологиям фронтенда и флексбоксов.</p>
8
<p>Основная особенность Webflow - объединение задач, которые выполняет визуальный редактор, с функциональностью HTML и JavaScript.</p>
8
<p>Основная особенность Webflow - объединение задач, которые выполняет визуальный редактор, с функциональностью HTML и JavaScript.</p>
9
<p>Для верстальщиков интерфейс будет казаться слишком урезанным, а для дизайнеров - слишком нагруженным, хотя и немного схожим с Figma.</p>
9
<p>Для верстальщиков интерфейс будет казаться слишком урезанным, а для дизайнеров - слишком нагруженным, хотя и немного схожим с Figma.</p>
10
<p>Webflow выполняет поставленные задачи именно за счёт объединения этих двух функций. В интерфейсе можно быстро управлять содержимым и структурой сайта, а не только его внешним видом.</p>
10
<p>Webflow выполняет поставленные задачи именно за счёт объединения этих двух функций. В интерфейсе можно быстро управлять содержимым и структурой сайта, а не только его внешним видом.</p>
11
<ul><li>визуальный редактор, который выдаёт относительно чистый код;</li>
11
<ul><li>визуальный редактор, который выдаёт относительно чистый код;</li>
12
<li>автоматически формируемый и тонко настраиваемый адаптив;</li>
12
<li>автоматически формируемый и тонко настраиваемый адаптив;</li>
13
<li>возможность работы с широкими экранами;</li>
13
<li>возможность работы с широкими экранами;</li>
14
<li>компонентный дизайн для переиспользования блоков и отдельных элементов;</li>
14
<li>компонентный дизайн для переиспользования блоков и отдельных элементов;</li>
15
<li>создание тем и стилей;</li>
15
<li>создание тем и стилей;</li>
16
<li>вставка кастомного кода;</li>
16
<li>вставка кастомного кода;</li>
17
<li>библиотеки анимаций и моушн-дизайна;</li>
17
<li>библиотеки анимаций и моушн-дизайна;</li>
18
<li>перенос макетов из Figma, анимации из After Effects и Lottie;</li>
18
<li>перенос макетов из Figma, анимации из After Effects и Lottie;</li>
19
<li>бесплатные шаблоны, возможность скопировать или купить уникальные шаблоны от дизайнеров и студий;</li>
19
<li>бесплатные шаблоны, возможность скопировать или купить уникальные шаблоны от дизайнеров и студий;</li>
20
<li>ролевая модель для работы над проектом.</li>
20
<li>ролевая модель для работы над проектом.</li>
21
</ul><p>Преимущества Webflow для клиентов:</p>
21
</ul><p>Преимущества Webflow для клиентов:</p>
22
<ul><li>CMS с базами данных;</li>
22
<ul><li>CMS с базами данных;</li>
23
<li>интеграция маркетинговых инструментов;</li>
23
<li>интеграция маркетинговых инструментов;</li>
24
<li>хорошая поисковая оптимизация и скорость загрузки;</li>
24
<li>хорошая поисковая оптимизация и скорость загрузки;</li>
25
<li>возможность создать тонко настраиваемый личный кабинет пользователя;</li>
25
<li>возможность создать тонко настраиваемый личный кабинет пользователя;</li>
26
<li>продвинутый интерфейс для электронной коммерции;</li>
26
<li>продвинутый интерфейс для электронной коммерции;</li>
27
<li>возможность править контент без потерь для дизайна.</li>
27
<li>возможность править контент без потерь для дизайна.</li>
28
</ul><p>Основные недостатки Webflow: отсутствие русскоязычного интерфейса, обучающих материалов на русском языке, возможности локализации создаваемого сайта (добавления дополнительных языковых версий).</p>
28
</ul><p>Основные недостатки Webflow: отсутствие русскоязычного интерфейса, обучающих материалов на русском языке, возможности локализации создаваемого сайта (добавления дополнительных языковых версий).</p>
29
<p>Создать два сайта на Webflow можно бесплатно. У них будет ограничение в две статических страницы, 50 позиций в базе данных, 100 пользователей личного кабинета и до тысячи посетителей в месяц.<a>Платные версии</a>начинаются от 14 долларов в месяц для обычного сайта и от 29 для e-commerce.</p>
29
<p>Создать два сайта на Webflow можно бесплатно. У них будет ограничение в две статических страницы, 50 позиций в базе данных, 100 пользователей личного кабинета и до тысячи посетителей в месяц.<a>Платные версии</a>начинаются от 14 долларов в месяц для обычного сайта и от 29 для e-commerce.</p>
30
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>Спустя десять лет после запуска, с Webflow работают около четырёх миллионов дизайнеров. Среди его корпоративных клиентов такие компании, как DELL, Discord, Philips, Dropbox, Upwork, TED и другие.</p>
30
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>Спустя десять лет после запуска, с Webflow работают около четырёх миллионов дизайнеров. Среди его корпоративных клиентов такие компании, как DELL, Discord, Philips, Dropbox, Upwork, TED и другие.</p>
31
<p>Как и у других подобных конструкторов, у Webflow есть несколько основных продуктов: Designer, CMS (система управления контентом), Users (личный кабинет пользователя), виджеты, интеграции, электронная коммерция и хостинг (только Amazon Web Services).</p>
31
<p>Как и у других подобных конструкторов, у Webflow есть несколько основных продуктов: Designer, CMS (система управления контентом), Users (личный кабинет пользователя), виджеты, интеграции, электронная коммерция и хостинг (только Amazon Web Services).</p>
32
<p>Designer, то есть сам редактор, работает по принципу визуального HTML/CSS-конструктора, в котором, чтобы нарисовать обычный прямоугольник, нужно добавить div и назначить ему координаты. Правда, знать наизусть команды не нужно, потому что для этого есть визуальная библиотека.</p>
32
<p>Designer, то есть сам редактор, работает по принципу визуального HTML/CSS-конструктора, в котором, чтобы нарисовать обычный прямоугольник, нужно добавить div и назначить ему координаты. Правда, знать наизусть команды не нужно, потому что для этого есть визуальная библиотека.</p>
33
<p>При создании нового проекта можно начать с чистого листа, выбрать бесплатный или платный шаблон. Бесплатных шаблонов не так много, но начинать работать в Webflow удобнее с них, чтобы сразу видеть, как собрана страница.</p>
33
<p>При создании нового проекта можно начать с чистого листа, выбрать бесплатный или платный шаблон. Бесплатных шаблонов не так много, но начинать работать в Webflow удобнее с них, чтобы сразу видеть, как собрана страница.</p>
34
<p>Сам редактор на первый взгляд выглядит довольно загруженно, но после просмотра вводных видео, о которых написано ниже, всё становится понятнее. Слева расположен навигатор (уровни вложенности) и страницы сайта, добавление основных функциональных элементов: сами контейнеры, CMS, настройки SEO, стили, виджеты и остальные важные для проектирования сайта элементы. В панели справа находятся инструменты вёрстки.</p>
34
<p>Сам редактор на первый взгляд выглядит довольно загруженно, но после просмотра вводных видео, о которых написано ниже, всё становится понятнее. Слева расположен навигатор (уровни вложенности) и страницы сайта, добавление основных функциональных элементов: сами контейнеры, CMS, настройки SEO, стили, виджеты и остальные важные для проектирования сайта элементы. В панели справа находятся инструменты вёрстки.</p>
35
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>До начала работы можно пройти небольшой онбординг. Он доступен во вкладке Tutorials на основном рабочем дашборде. В течение десяти минут можно следовать подсказкам и немного освоить основной функционал.</p>
35
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>До начала работы можно пройти небольшой онбординг. Он доступен во вкладке Tutorials на основном рабочем дашборде. В течение десяти минут можно следовать подсказкам и немного освоить основной функционал.</p>
36
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>CMS (англ. Content Management System) - система управления контентом сайта, с помощью которой можно редактировать его содержимое, добавлять блоки с большим количеством элементов, заполнять базу данных (например, список товаров), распределять роли по уровням доступа и прочее.</p>
36
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>CMS (англ. Content Management System) - система управления контентом сайта, с помощью которой можно редактировать его содержимое, добавлять блоки с большим количеством элементов, заполнять базу данных (например, список товаров), распределять роли по уровням доступа и прочее.</p>
37
<p>В терминологии Webflow любая база данных называется Collection и управляется прямо из редактора в разделе<a>CMS</a>. Через создание коллекций можно создавать динамический контент (новости, списки треков, видео, товаров, спикеров и прочее), а затем отображать или скрывать его для разных аудиторий и страниц.</p>
37
<p>В терминологии Webflow любая база данных называется Collection и управляется прямо из редактора в разделе<a>CMS</a>. Через создание коллекций можно создавать динамический контент (новости, списки треков, видео, товаров, спикеров и прочее), а затем отображать или скрывать его для разных аудиторий и страниц.</p>
38
<p>Также через CMS можно вставлять блоки кастомного кода и стягивать в коллекции данные из внешних источников.</p>
38
<p>Также через CMS можно вставлять блоки кастомного кода и стягивать в коллекции данные из внешних источников.</p>
39
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>С помощью инструмента<a>Users</a>можно работать с разными категориями пользователей: делать не только привычные для конструкторов сайтов рассылки электронных писем и SMS, но и проектировать личные кабинеты, прицельно настраивать контент в зависимости от местонахождения юзеров, входа на сайт или других характеристик. Существенное ограничение - эта функция доступна для регистрации не более 20 тысяч аккаунтов.</p>
39
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>С помощью инструмента<a>Users</a>можно работать с разными категориями пользователей: делать не только привычные для конструкторов сайтов рассылки электронных писем и SMS, но и проектировать личные кабинеты, прицельно настраивать контент в зависимости от местонахождения юзеров, входа на сайт или других характеристик. Существенное ограничение - эта функция доступна для регистрации не более 20 тысяч аккаунтов.</p>
40
<p>Если подключить функцию e-commerce, то для залогиненных пользователей можно сделать платную подписку на отображение определённого контента. При этом настройки оплаты и самой подписки могут быть максимально гибкие:</p>
40
<p>Если подключить функцию e-commerce, то для залогиненных пользователей можно сделать платную подписку на отображение определённого контента. При этом настройки оплаты и самой подписки могут быть максимально гибкие:</p>
41
<p>Если нужно интегрировать аудиторию сайта во внешнюю CRM или таблицу, то Webflow предлагает использовать Zapier или<a>API</a>.</p>
41
<p>Если нужно интегрировать аудиторию сайта во внешнюю CRM или таблицу, то Webflow предлагает использовать Zapier или<a>API</a>.</p>
42
<p>У Webflow довольно обширный список продуктов, которые можно интегрировать в сайт. Через маркетплейс Apps можно добавить виджеты от Typeform, HubSpot, Jasper, Unsplash, Finsweet, Memberstack и других лидеров маркетинговых инструментов. Полный список доступен в <a>разделе Apps</a>.</p>
42
<p>У Webflow довольно обширный список продуктов, которые можно интегрировать в сайт. Через маркетплейс Apps можно добавить виджеты от Typeform, HubSpot, Jasper, Unsplash, Finsweet, Memberstack и других лидеров маркетинговых инструментов. Полный список доступен в <a>разделе Apps</a>.</p>
43
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>В Webflow можно создать максимально кастомизируемый электронный магазин. В интерфейсе доступно оформление и настройка корзины, витрин и карточек продуктов, страниц оплаты и форм заказа.</p>
43
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>В Webflow можно создать максимально кастомизируемый электронный магазин. В интерфейсе доступно оформление и настройка корзины, витрин и карточек продуктов, страниц оплаты и форм заказа.</p>
44
<p>Помимо дизайнерских и маркетинговых настроек, в магазине можно управлять товаром, его остатками, условиями заказа и прочим. Также доступна встроенная переписка с клиентами. Оплата от пользователей принимается через Stripe, Google Pay, Apple Pay и PayPal.</p>
44
<p>Помимо дизайнерских и маркетинговых настроек, в магазине можно управлять товаром, его остатками, условиями заказа и прочим. Также доступна встроенная переписка с клиентами. Оплата от пользователей принимается через Stripe, Google Pay, Apple Pay и PayPal.</p>
45
<p><a>Базовый пакет e-commerce</a>стоит 29 долларов в месяц при оплате за год.</p>
45
<p><a>Базовый пакет e-commerce</a>стоит 29 долларов в месяц при оплате за год.</p>
46
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p><a>DevLink</a> - бета-продукт от Webflow, который призван упростить работу дизайн-команд и стать ответом на DevMode от Figma. Он позволяет дизайнерам создавать компоненты в Webflow, а затем автоматически передавать их разработчикам в React-окружение. За счёт этой функции можно создавать, например, сложные анимации и передавать их в прод сразу чистым кодом.</p>
46
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p><a>DevLink</a> - бета-продукт от Webflow, который призван упростить работу дизайн-команд и стать ответом на DevMode от Figma. Он позволяет дизайнерам создавать компоненты в Webflow, а затем автоматически передавать их разработчикам в React-окружение. За счёт этой функции можно создавать, например, сложные анимации и передавать их в прод сразу чистым кодом.</p>
47
<p>Плагин<a>Figma to Webflow</a>работает, если весь макет сделан на функции автолейаута. По сути, он просто выгружает дизайн в выбранный проект Webflow, самостоятельно назначая ему классы и стили. Это значительно облегчает работу с Webflow дизайнерам, которым проще рисовать страницы в Figma, нежели собирать их в Webflow. При этом работать дальше со страницей можно абсолютно свободно: доступны те же функции подключения CMS, e-commerce, плагинов и прочего.</p>
47
<p>Плагин<a>Figma to Webflow</a>работает, если весь макет сделан на функции автолейаута. По сути, он просто выгружает дизайн в выбранный проект Webflow, самостоятельно назначая ему классы и стили. Это значительно облегчает работу с Webflow дизайнерам, которым проще рисовать страницы в Figma, нежели собирать их в Webflow. При этом работать дальше со страницей можно абсолютно свободно: доступны те же функции подключения CMS, e-commerce, плагинов и прочего.</p>
48
<p>Webflow позволяет импортировать анимацию из After Effects и Lottie прямо в проект.</p>
48
<p>Webflow позволяет импортировать анимацию из After Effects и Lottie прямо в проект.</p>
49
<p>Webflow - популярный конструктор для лендингов и сайтов небольшого и среднего размера. Уровень его клиентов разного масштаба можно увидеть в результатах конкурса<a>Webflow Awards</a>, который Webflow проводит ежегодно. Это конкурс на лучшие работы, сделанные с помощью инструмента. В 2022 году победителями в числе прочих стали корпоративный портал Yahoo, сайт популярного сервиса Headspace, портал TED.</p>
49
<p>Webflow - популярный конструктор для лендингов и сайтов небольшого и среднего размера. Уровень его клиентов разного масштаба можно увидеть в результатах конкурса<a>Webflow Awards</a>, который Webflow проводит ежегодно. Это конкурс на лучшие работы, сделанные с помощью инструмента. В 2022 году победителями в числе прочих стали корпоративный портал Yahoo, сайт популярного сервиса Headspace, портал TED.</p>
50
<p>При этом технические характеристики разработок поражают: для<a>ребрендинга</a>сервиса Wave было сделано 46 шаблонов для более тысячи страниц, при этом было создано 30 баз данных с 2,5 тысячи единиц динамического контента.</p>
50
<p>При этом технические характеристики разработок поражают: для<a>ребрендинга</a>сервиса Wave было сделано 46 шаблонов для более тысячи страниц, при этом было создано 30 баз данных с 2,5 тысячи единиц динамического контента.</p>
51
<p>Почитать истории корпоративных клиентов можно в разделе<a>Customer stories</a>.</p>
51
<p>Почитать истории корпоративных клиентов можно в разделе<a>Customer stories</a>.</p>
52
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>Если ориентироваться на менее масштабные проекты, то можно зайти в общий каталог. На сайте Webflow есть раздел<a>Made in Webflow</a>, где размещены тысячи примеров креативных промосайтов, SaaS-страниц, портфолио, корпоративных веб-сайтов, продающих лендингов и даже игр. В предпросмотре сайт открывается полностью, поэтому нет необходимости открывать множество вкладок.</p>
52
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>Если ориентироваться на менее масштабные проекты, то можно зайти в общий каталог. На сайте Webflow есть раздел<a>Made in Webflow</a>, где размещены тысячи примеров креативных промосайтов, SaaS-страниц, портфолио, корпоративных веб-сайтов, продающих лендингов и даже игр. В предпросмотре сайт открывается полностью, поэтому нет необходимости открывать множество вкладок.</p>
53
<p>Многие проекты из раздела можно переиспользовать у себя в проекте: для этого есть фильтр Cloneable sites only (англ. "Только клонируемые"). По сути, это похоже на Community Files в Figma, откуда можно скачать файл к себе в рабочее пространство и работать с ним над своими задачами.</p>
53
<p>Многие проекты из раздела можно переиспользовать у себя в проекте: для этого есть фильтр Cloneable sites only (англ. "Только клонируемые"). По сути, это похоже на Community Files в Figma, откуда можно скачать файл к себе в рабочее пространство и работать с ним над своими задачами.</p>
54
<p>Полностью настроенные шаблоны с подключёнными CMS, Users, электронной коммерцией и прочими бонусами от Webflow можно выбрать в <a>разделе Templates</a>. Стартовая цена на простой сайт - 24 доллара. Более продвинутые шаблоны стоят до 79 долларов.</p>
54
<p>Полностью настроенные шаблоны с подключёнными CMS, Users, электронной коммерцией и прочими бонусами от Webflow можно выбрать в <a>разделе Templates</a>. Стартовая цена на простой сайт - 24 доллара. Более продвинутые шаблоны стоят до 79 долларов.</p>
55
<p><a>Базовые шаблоны</a>бесплатны, но и предлагают довольно ограниченный дизайн и функционал. Тем не менее они проработаны для разных индустрий и типов сайтов (портфолио, блог, SaaS, e-commerce и прочие).</p>
55
<p><a>Базовые шаблоны</a>бесплатны, но и предлагают довольно ограниченный дизайн и функционал. Тем не менее они проработаны для разных индустрий и типов сайтов (портфолио, блог, SaaS, e-commerce и прочие).</p>
56
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>В различных каталогах можно сделать фильтрацию по инструменту или технологии и найти примеры тех категорий сайтов, которые вас интересуют. Например, только на Awwwards выложено<a>более пятисот промосайтов</a>, сделанных на Webflow. В фильтрах можно выбрать шрифт, цвет или конкретный блок, которые были использованы в проекте.</p>
56
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>В различных каталогах можно сделать фильтрацию по инструменту или технологии и найти примеры тех категорий сайтов, которые вас интересуют. Например, только на Awwwards выложено<a>более пятисот промосайтов</a>, сделанных на Webflow. В фильтрах можно выбрать шрифт, цвет или конкретный блок, которые были использованы в проекте.</p>
57
<em>Скриншот: сайт<a>Awwwards</a>/ Skillbox Media</em><p>В каталоге<a>One Page Love</a>можно найти десятки примеров популярных сайтов, сделанных с помощью Webflow. Там же дизайнеры и студии размещают<a>платные шаблоны</a>стоимостью от 24 долларов.</p>
57
<em>Скриншот: сайт<a>Awwwards</a>/ Skillbox Media</em><p>В каталоге<a>One Page Love</a>можно найти десятки примеров популярных сайтов, сделанных с помощью Webflow. Там же дизайнеры и студии размещают<a>платные шаблоны</a>стоимостью от 24 долларов.</p>
58
<em>Скриншот: сайт<a>One Page Love</a>/ Skillbox Media</em><p>В отличие от других популярных конструкторов сайтов, где дизайнер может оставаться дизайнером и не влезать в код, в Webflow дизайнер и верстальщик - это одно лицо. Если вы знакомы с HTML/CSS и JavaScript, освоить Webflow будет не так сложно. Если же вы не знаете что, такое div и контейнер, то над освоением программы нужно будет попотеть. С другой стороны, если вы хотите лучше понимать разработчиков, то изучение Webflow - хорошая идея.</p>
58
<em>Скриншот: сайт<a>One Page Love</a>/ Skillbox Media</em><p>В отличие от других популярных конструкторов сайтов, где дизайнер может оставаться дизайнером и не влезать в код, в Webflow дизайнер и верстальщик - это одно лицо. Если вы знакомы с HTML/CSS и JavaScript, освоить Webflow будет не так сложно. Если же вы не знаете что, такое div и контейнер, то над освоением программы нужно будет попотеть. С другой стороны, если вы хотите лучше понимать разработчиков, то изучение Webflow - хорошая идея.</p>
59
<p>Для тех, кто владеет английским и хочет научиться работать с Webflow, компания предлагает пройти серию курсов на отдельной платформе<a>Webflow University</a>. Курсы здесь делятся на базовые и для тех, кто уже знаком с веб-дизайном и вёрсткой. Если вам интересно, как быстро можно собрать сайт, то можно посмотреть<a>курсы</a>о том, как перенести макет из Figma в Webflow или настроить анимации через AfterEffects и Lottie.</p>
59
<p>Для тех, кто владеет английским и хочет научиться работать с Webflow, компания предлагает пройти серию курсов на отдельной платформе<a>Webflow University</a>. Курсы здесь делятся на базовые и для тех, кто уже знаком с веб-дизайном и вёрсткой. Если вам интересно, как быстро можно собрать сайт, то можно посмотреть<a>курсы</a>о том, как перенести макет из Figma в Webflow или настроить анимации через AfterEffects и Lottie.</p>
60
<em>Скриншот: сайт<a>Webflow University</a>/ Skillbox Media</em><p>Помимо видеоуроков, на платформе можно пройти несколько игр, которые помогут разобраться с технологиями HTML/CSS в незанудном интерактивном формате. Таким образом можно освоить основы сеток, флексбоксы, точность вёрстки, блочную модель CSS. Игры открываются в онлайн-редакторе Webflow, поэтому никаких сложных программ открывать или устанавливать не придётся. Поскольку он работает сразу на коде, там можно создавать и такой интерактив.</p>
60
<em>Скриншот: сайт<a>Webflow University</a>/ Skillbox Media</em><p>Помимо видеоуроков, на платформе можно пройти несколько игр, которые помогут разобраться с технологиями HTML/CSS в незанудном интерактивном формате. Таким образом можно освоить основы сеток, флексбоксы, точность вёрстки, блочную модель CSS. Игры открываются в онлайн-редакторе Webflow, поэтому никаких сложных программ открывать или устанавливать не придётся. Поскольку он работает сразу на коде, там можно создавать и такой интерактив.</p>
61
<em>Скриншот: сайт<a>Webflow University</a>/ Skillbox Media</em><p>Если курсов не хватило и появились конкретные вопросы о том, как работать с редактором для выполнения отдельных задач, можно посмотреть записи стримов. В отдельном каталоге<a>Webflow Community</a>собраны видеоуроки от членов команды сервиса и приглашённых дизайнеров.</p>
61
<em>Скриншот: сайт<a>Webflow University</a>/ Skillbox Media</em><p>Если курсов не хватило и появились конкретные вопросы о том, как работать с редактором для выполнения отдельных задач, можно посмотреть записи стримов. В отдельном каталоге<a>Webflow Community</a>собраны видеоуроки от членов команды сервиса и приглашённых дизайнеров.</p>
62
<p>Все эти видео, а также кейсы сайтов, карьерные истории дизайнеров и многие другие интересные записи собраны на <a>ютуб-канале Webflow</a>.</p>
62
<p>Все эти видео, а также кейсы сайтов, карьерные истории дизайнеров и многие другие интересные записи собраны на <a>ютуб-канале Webflow</a>.</p>
63
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>Бесплатный хорошо структурированный курс на английском языке выложен на сайте<a>JanLosert</a>. В течение нескольких часов можно повторять за дизайнером действия по созданию и настройке простого сайта.</p>
63
<em>Скриншот: сайт<a>Webflow</a>/ Skillbox Media</em><p>Бесплатный хорошо структурированный курс на английском языке выложен на сайте<a>JanLosert</a>. В течение нескольких часов можно повторять за дизайнером действия по созданию и настройке простого сайта.</p>
64
<em>Скриншот: сайт<a>JanLosert</a>/ Skillbox Media</em><p>Awwwards предлагает сразу<a>шесть курсов по Webflow</a>. В среднем они длятся от трёх до двенадцати часов и охватывают разные уровни подготовки. Все курсы записаны на английском. Субтитров на русском языке нет, но есть на английском, французском, португальском, испанском, японском. Средняя стоимость - 10 долларов.</p>
64
<em>Скриншот: сайт<a>JanLosert</a>/ Skillbox Media</em><p>Awwwards предлагает сразу<a>шесть курсов по Webflow</a>. В среднем они длятся от трёх до двенадцати часов и охватывают разные уровни подготовки. Все курсы записаны на английском. Субтитров на русском языке нет, но есть на английском, французском, португальском, испанском, японском. Средняя стоимость - 10 долларов.</p>
65
<em>Скриншот: сайт<a>Awwwards</a>/ Skillbox Media</em><p>В YouTube много доступной информации на русском языке и можно найти небольшие уроки и онлайн-трансляции работы в редакторе.</p>
65
<em>Скриншот: сайт<a>Awwwards</a>/ Skillbox Media</em><p>В YouTube много доступной информации на русском языке и можно найти небольшие уроки и онлайн-трансляции работы в редакторе.</p>
66
<a>Курс с трудоустройством: "Профессия Веб-дизайнер" Узнать о курсе</a>
66
<a>Курс с трудоустройством: "Профессия Веб-дизайнер" Узнать о курсе</a>