Курсы по WebFlow

На курсах по Webflow вы научитесь создавать любые типы сайтов: от простых лендингов до сложных промосайтов международного уровня без знания кода.
Читать далее

Сравнение всех курсов

Фильтр
Курс
Формат
Online
Начало занятий
Будь-який момент
Длительность
2 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
150 USD за курс
Гибкий графикВыдаётся диплом/сертификатСопровождение ментораРеальный проект в портфолио
Choice31
  • Web & Mobile Design / UI/UX
Подробнее

Розглядаємо матеріал на прикладі реальних кейсів та вебпроєктів. Навчаємо за власною методологією для ефективного засвоєння матеріалу. Ти зможеш одразу використовувати свої знання на практиці.

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

Тема 1. Вступний урок

  • Огляд можливостей платформи
  • Функціонал та переваги платформи
  • Обмеження та лімітації в інструментах
  • Створення та налаштування проєкту

Тема 2. Огляд інтерфейсу

  • Знайомство з інтерфейсом
  • Контрольна панель
  • Канвас
  • Top-bar
  • Навігаційна breadcrumb панель

Тема 3. Панель стилів

Робота з панеллю стилів.

Тема 4. Вебструктура

  • Вступ до HTML & CSS
  • Box-model

Тема 5. Ієрархія елементів

Робота з ієрархією елементів.

Тема 6. Базові елементи

  • Елементи
  • Body
  • Section
  • Container
  • Columns
  • Div-block

Тема 7. Компоненти

  • Компоненти
  • Navbar
  • Створення кастомних компонентів

Тема 8. Юніти

  • Панель юнітів
  • Юніти

Тема 9. HTML теги та класи

  • HTML теги
  • Класи
  • Типографіка
  • Стейти елементів

Тема 10. Лейаути

  • Спейсинг (margin, padding)
  • Display setting (show/hide)
  • Модель Flexbox
  • Grid
  • Позиціонування елементів

Тема 11. Верстка блоків

  • Верстка без дизайн макету
  • Перенесення макету з Figma

Тема 12. Адаптивна верстка

Робота з адаптивною версткою.

Тема 13. Webflow CMS: створення, редагування та апдейт

  • Створення колекцій CMS
  • Додавання колекцій на сайт

Тема 14. Створення дизайну на базі Webflow CMS

  • Стилізація колекцій
  • Створення шаблону сторінок колекції

Тема 15. Інтерекшени та тригерні анімації

  • Панель інтерекшенів
  • Налаштування тригерних анімацій

Тема 16. Webflow SEO та паблішинг проєкту

  • Вступ до SEO
  • Мета-теги
  • Маркування H1, H2, H3...
  • Alt теги для зображень
  • Панель аудиту
  • Кейси з оптимізації під SpeedPageInsights
  • Підключення домену та публікація проєкту

Тема 17. Кастомний код: розширюй функціонал своїх проєктів на Webflow

  • Сніпети коду
  • Як працювати зі сніпетами
  • Розбір анатомії елементів, до яких застосовується сніпет (на практичному прикладі)
  • Як інтегрувати сніпет коду на свій сайт
  • Публікація сніпету

Бонусний урок. Пошук клієнтів на фріланс-майданчиках

Особливості пошуку клієнтів на фріланс-біржах у 2023 році.

Після проходження курсу ти будеш вміти:

  • Будувати веб-сайти з нуля у Webflow
  • Проєктувати веб-інтерфейси
  • Швидко створювати різні сайти
  • Перетворювати свій сайт

Особливості курсу

  • Практичний досвід роботи у Webflow з нуля
  • Додаткові матеріали та мануали
  • Зручний доступ до всіх уроків, матеріалів курсу
  • Портфоліо на основі домашніх завдань

Викладачі курсу

Йосип Кобаль - UX/UI Designer, Ringostat (Netpeak Group)

Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
1 месяцев
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
3 500 UAH за курс
Гибкий графикВыдаётся диплом/сертификат
CASES-Креативна Практика
  • No-code / Low-code
Подробнее

Опануйте різні види анімацій у Webflow та навчіться забезпечувати інтерактивний користувацький досвід.

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

Принципи анімації та підготовка проєкту у Webflow

  • Принципи анімації:
    • easing
    • timing
    • delay
  • Webflow Setup: підготовка структури посадкової сторінки

Вступна анімація та стартовий екран

  • Вступні анімації
  • Взаємодія з рухом миші

Анімації при прокручуванні та циклічні анімації

  • Анімації при прокручуванні
  • Циклічні анімації

Створення інтерактивних продуктових карток

  • Створення інтерактивних продуктових карток
  • Спеціальні взаємодії при наведенні

Розширені можливості анімацій у Webflow: підключення JavaScript бібліотеки

  • Основи підключення анімацій, що базуються на JS бібліотеках
  • Фінальні правки та тестування

Після курсу ти зможеш

  • Застосовувати базові принципи анімації у Webflow
  • Створювати вступні анімації
  • Реалізовувати циклічні анімації та анімації при прокручуванні
  • Працювати з анімаціями зі зміною пропорцій
  • Створювати інтерактивні продуктові картки
  • Створювати мікровзаємодії

Особливості курсу

  • Перевірка домашніх робіт
  • Отримання сертифіката
  • Практика
  • Підтримка від спільноти студентів
  • Додаткові матеріали
  • Служба підтримки Cases

Викладачі курсу

Йосип Кобаль - UI/UX-дизайнер, сертифікований експерт з Webflow

Больше информации
Курс
Формат
Online
Начало занятий
Дата формується
Длительность
42 занятий
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
200 USD за курс
Гибкий графикСопровождение ментораРеальный проект в портфолио
Integra School
  • WEB Developer / Webmaster
Подробнее

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

Основи Webflow

  • Чому Webflow
  • Тарифні плани Webflow
  • Організація робочого простору та налаштування проєкту

Робота з елементами

  • Семантичні теги
  • Структурні, базові та типографічні елементи
  • CMS
  • Медіа елементи
  • Форма
  • Форма з кастомізованими елементами
  • Багатокрокова форма
  • Додаткові елементи

Робота з панеллю стилів

  • Відображення block та flex
  • Відображення Grid
  • Відображення Inline, Inline-Block та None
  • Відступи та розміри
  • Одиниці вимірювання
  • Ratio, Overflow, Fit
  • Позиціювання елементів
  • Типографіка
  • Фоновий колір
  • Borders, Radius, Opacity, Outline, Box Shadows

Проєкт

  • Структура сторінки
  • Стратегія використання класів, типографіки та відступів
  • Адаптивність проєкту
  • Чому використовуємо rem?

CMS

  • Створення та налаштування CMS колекцій
  • Зв'язок з CMS
  • Зв'язок з CMS Template та додаткові налаштування

E-comerce проєкт на webflow

  • Базові налаштування та створення товарів
  • Побудова інтернет-магазину на платформі
  • Як підключити плагін Fireflow
  • Як підключити готовий інтернет магазин до Fireflow

Анімації та тригери

  • Тригери елементу
  • Тригери сторінки
  • Використання Chat GPT для роботи з тригерами

Верстка Here Section

  • Верстка Hero Section (частина 1)
  • Верстка Hero Section (частина 2)
  • Верстка Hero Section (частина 3)

Публікація сайту

  • Webflow Variables
  • Інтеграція з Telegram та Google Sheets
  • Webflow logic

Додатково

Доступ до закритого телеграм-ком'юніті з Webflow в Україні.

Особливості курсу

  • Актуальність
  • Зручний формат
  • Багато контенту
  • Практика, а не теорія
  • Hard + Soft skills

Викладачі курсу

Олександр Алехнович - Co-Founder Webflow Development at Apex Band

Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
14 занятий
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
19 USD за курс
Гибкий график
Merge Academy
  • No-code / Low-code
Подробнее

За 14 уроків ти опануєш функціонал Webflow і збереш свій перший сайт. А після курсу зможеш брати перші замовлення як Webflow developer.

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

Webflow - створення сайтів без навичок кодування

Ознайомишся з Webflow та розглянеш його переваги над іншими конструкторами сайтів. Дізнаєшся, як створити сайт, не занурюючись з головою у веб-розробку!

Що таке HTML та CSS. Структура сайту

Ти вивчиш основи веб-розробки, навчишся призначати класи елементам та групувати їх. За допомогою Webflow-навігатора дізнаєшся, як виглядає структура сайту в конструкторі та навчишся не робити помилки при її створенні.

Ресурси

Вивчиш сервіси, що полегшують життя Webflow-розробника.

Типографіка та робота з зображеннями

Розберешся зі шрифтами та стилями для текстових блоків. Навчишся працювати з картинками та фоном.

Позиціонування елементів

Дізнаєшся, яким може бути розташування елементів на сторінці та вивчиш взаємодію блоків з різною позицією між собою. Опануєш комбо-класи та виділення окремих елементів з їх допомогою.

Адаптивна верстка у конструкторі Webflow

Опануєш адаптацію сайту для мобільних пристроїв та великих екранів.

Стани у Webflow

Ознайомишся зі станами елементів. Навчишся змінювати зовнішній вигляд елементів у залежності від їх стану та застосувати анімацію переходів. Вивчиш такі інтерактивні елементи Webflow як dropdown і tabs.

Колекції, symbol-елементи на сайти

Вивчиш Webflow CMS Collections і їх застосування на сайті. Створиш свою колекцію, навчишся додавати, редагувати та видаляти елементи.

Блог на Webflow

Створиш власний блог за допомогою Webflow CMS Collections. Налаштуєш відображення контенту залежно від категорії, автора та інших фільтрів.

Форми на Webflow

Навчишся використовувати можливості Webflow для збору даних за допомогою форм і створиш різні типи форм.

Основи створення анімацій на Webflow

Навчишся створювати анімації у Webflow при взаємодії користувача як зі сторінкою, так і з окремим елементом.

Advanced анімації у Webflow

Вивчиш приклади сучасних анімацій і цікавих рішень комбінування різних анімацій в одне ціле.

Webflow та код

Ознайомишся з можливістю вставляти свій код на Webflow і зрозумієш, навіщо це потрібно. Вивчиш компонет Embed. Підключиш сторонні бібліотеки.

Як знаходити клієнтів на фрілансі?

У бонусному блоці ти отримаєш ексклюзивну лекцію від CEO Merge Павла Целуйка, де він поділиться своїм досвідом та розкаже, як можна знайти міжнародні замовлення на фрілансі.

Особливості курсу

  • Зворотній зв'язок
  • Додаткові матеріали
  • Навчання в чат-боті
  • Підтримка та поради
  • Можливість повернути кошти якщо не сподобався курс

Викладачі курсу

Олег Чинчик - Front-end & Webflow developer at Merge

Больше информации
Курс
Формат
Online
Начало занятий
Дата формується
Длительность
5 недель
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
14 700 UAH за курс
Гибкий графикВыдаётся диплом/сертификат
GetEd
  • No-code / Low-code
  • WEB Developer / Webmaster
Подробнее

Курс допоможе опанувати професію Web Developer та навчитись No-code розробці у Webflow. На заняттях ви навчитесь швидко робити сайти та додатки, працювати зі скриптами, а також будете мати широкий функціонал для налаштування аналітики.

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

Основи створення сайту

  • З чого складається якісний сайт?
  • Основи прототипу та правила дизайну.
  • Робота з макетами сайту та дизайнерами.

Базова робота з Webflow

  • Інтерфейс Webflow.
  • Структура сторінки та робота з блоками.
  • Робота зі стилями, кольорами тощо.
  • Додаємо зображення та медіафайли.
  • Налаштовуємо адаптивність сторінки.
  • Працюємо з анімацією на сторінці.
  • Фінальні налаштування сторінки на її завантаження.

Просунута робота з сайтом

  • Базова робота зі скриптами та їх додавання на сторінку.
  • Оптимізація сайту.
  • Багатосторінкові сайти.
  • Розбираємося з CMS (керування контентом сайту та робота з інтернет магазинами).
  • Інтеграція з іншими веб-сервісами.

Пошук клієнтів та створення власного портфоліо

  • Як працювати з фріланс біржами.
  • Оформлення власного портфоліо.
  • Керування проектами.
  • Робота із замовником.
  • Як вийти на міжнародний ринок та працювати із замовниками якісніше і в довгу.

Особливості курсу

  • Програма курсу складається 10 онлайн-занять
  • Практика та розбір питань на кожному уроці
  • Telegram-чат з тренером та командою турботи GetEd
  • Персональний зв'язок з куратором для вирішення питань під час навчання
  • Сертифікат після завершення курсу

Викладачі курсу

Дмитро Кавецький - веб-розробник в онлайн університеті GetEd, має досвід роботи в сфері ІТ більше 7 років.

Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
-
Уровень
Для начинающих
Язык обучения
Ukrainian
Стоимость
550 UAH за месяц
Гибкий графикВыдаётся диплом/сертификат
CASES-Креативна Практика
  • Web & Mobile Design / UI/UX
Подробнее

Курс присвячений практичним аспектам роботи з редактором Webflow та створенню простих посадкових сторінок з його допомогою.

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

Знайомство з інтерфейсом

  • Вступ до курсу
  • Знайомство з інтерфейсом Webflow
  • Webflow проти інших онлайн-конструкторів

Створення розмітки

  • HTML-розмітка у Webflow
  • Розмітка сторінки в Webflow (HTML-частина) та робота з блоками DIV
  • Робота з текстом в Webflow
  • Робота з зображеннями та компонентами
  • Створення навігації

Створення розмітки сторінки

Створення розмітки невеликої посадкової сторінки.

Підключення стилів

  • Панель стилів у Webflow
  • Робота з селекторами
  • Робота з версткою тексту
  • Робота з тлом, обведенням та ефектами
  • Анімації у Webflow та їхні типи

Підключення стилів

Підключення стилів та додавання на сторінку візуального оформлення.

Адаптивна верстка

  • Робота з точками перебудови (breakpoints)
  • Робота з класами в адаптивному дизайні
  • Особливості створення адаптивного сайту
  • Анімація на мобільних пристроях

Створення адаптивної версії сторінки

Створення адаптивної версії дизайн посадкової сторінки.

Публікація сайту

  • Мета-інформація та інші додаткові елементи сайту
  • Базова робота із інспектором коду
  • Робота з доменом та хостингом

Підготовка сайту до публікації

Публікація готового сайту на Webflow

Особливості курсу

  • За попередньою підпискою стартуй навчання в будь-який момент
  • Самостійне навчання онлайн у власному темпі
  • Сертифікат після проходження курсу
  • Бажано мати знання роботи з Figma для проходження курсу

Викладачі курсу

Антон Лукащук - дизайнер цифрових продуктів та партнер в HAPPY Design studio, експерт Креативної Практики

Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
40 занятий
Уровень
Для начинающих
Язык обучения
English
Стоимость
безкоштовно
Гибкий график
CASES-Креативна Практика
  • Web & Mobile Design / UI/UX
Подробнее

Ви навчитеся проєктувати, створювати та запускати адаптивні сайти у візуальному редакторі. Ці уроки дадуть вам уявлення про інтерфейс, основні елементи конструктора і найкращі практики створення сайтів. Опанувавши його, ви зможете швидко і якісно створювати сайти під ключ самостійно або в команді.

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

Теми:

  • Початок роботи
  • Веб-структура
  • Основні елементи
  • Компоненти
  • Основи стилізації
  • Розмітка
  • Адаптивний дизайн
  • Основні поняття взаємодії
  • CMS і динамічний вміст
  • Колекції полів CMS

Особливості курсу

  • Самостійне онлайн навчання у власному темпі
  • Стартуй навчання у будь-який момент
  • Керс англійською мовою але є субтитри
  • Тільки теорія
Больше информации
Видеокурс / Платформа
Формат
Online
Начало занятий
Будь-який момент
Длительность
-
Уровень
Для начинающих, Для опытных
Язык обучения
Ukrainian
Стоимость
1 500 UAH за курс
Гибкий графикРеальный проект в портфолио
Projector
  • No-code / Low-code
  • WEB Developer / Webmaster
  • Web & Mobile Design / UI/UX
Подробнее

З нуля навчимося користуватися інструментом Webflow, щоб створювати швидкі та легкі для масштабування вебсайти.

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

Знайомство з інтерфейсом WebFlow

Базово ознайомимося з інтерфейсом WebFlow, його можливостями та перевагами.

Блочна модель, контейнери, секції, діви, spacing, типографіка, відступи

Розберемося, де і що розташоване в Webflow: де шукати елементи, їхні властивості та інші важливі панелі для роботи над сайтом.

Теги, класи та унікальні елементи

Зрозуміємо, як не генерувати зайве та робити сайт легким для масштабування. Для цього розберемося, що таке блочна модель, як називати та використовувати класи, і який тег використати в тій чи іншій ситуації. А також навчимося розрізняти секції, контейнери та діви.

Дисплей та позиціювання

У деталях подивимося на параметри display: flex та display: grid — способи зображення елементів, які додають гнучкості в їх розташуванні. Навчимося правильно обирати display та позиціювання відповідно до завдання. Зрозуміємо, як створювати нетипові макети.

Figma to WebFlow

Дізнаємося, як підготувати Figma для швидкого перенесення в WebFlow, оскільки в один клік, на жаль, це зробити поки що неможливо. Та яких правил треба дотримуватися, щоб пришвидшити ручну роботу й допускати менше помилок.

Форми в WebFlow

Коли нам треба зібрати у користувачів пошту, телефон або дати звернутись до нас, ми використовуємо форми. Зрозуміємо, як працювати з формами в Webflow, змінювати їх візуально, налаштовувати на кнопку Submit.

Accessibility: як зробити сайт інклюзивним

Розберемось, як зробити сайт доступним для всіх і нікого не дискримінувати: ні людей з інвалідністю, ні з порушеннями, ні тих, у кого слабкий інтернет, старий девайс чи кого засліплює сонце з вікна.

Кастомний код та інтеграції

Поєднавши Webflow з іншими no-code інструментами, можна створювати вражаючі автоматизовані сайти, які працюють як повноцінний продукт. Окрім цього, за допомогою кастомного код можна створити те, що не вийде зробити стандартними інструментами.

Адаптивність

Навчимося адаптувати свій сайт під різні розміри екранів: телефон, планшет, маленький та великий десктопний екрани. Розберемось, як працює каскадність стилей.

CMS

Інколи, нам треба генерувати десятки сторінок за певним шаблоном та дати можливість додавати контент на сайт іншим людям. З цим допоможе модуль CMS — content management system. Навчимося створювати бази даних для контенту, генерувати сторінки з них і вбудовувати контент з CMS на статичних сторінках.

Анімації та переходи: від простого до складного на практичних прикладах

Статичний сайт — це норм, але не дуже цікаво. Розберемось, як робити анімації різних типів: прості ефекти по ховеру, анімацію по скролу, при завантаженні сторінки.

Публікація і SEO

Останній етап створення будь-якого вебсайту в Webflow — його публікація та оптимізація під пошукову видачу. Дізнаємось, як це зробити в налаштуваннях проєкту, що треба пам'ятати про SEO та якими інструментами всередині Webflow користуватись для цього.

Особливості курсу

  • 12 відеолекцій
  • Додаткові матеріали

Викладачі курсу

Стас Говорухін - Product Designer в Djinni

Больше информации

Читайте нас в Telegram, чтобы не пропустить анонсы новых курсов.