Дизайн | Без досвіду

Webflow Developer

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

Які переваги Webflow?

Webflow – це один з найвідоміших у світі сервісів для створення No Code вебсайтів.

Функціональність
у створенні сайтів для різних типів бізнесу, блогів, портфоліо, а ще: його найпотужніша перевага це – e-commerce.
No Code сервіс
зможеш створювати вебсайти будь-якої складності без знань програмування
Інтеграція
зовнішніх сервісів, платформа надає багато можливостей для SEO і використання маркетингових інструментів, можливо обирати нішу, налаштувати параметри доставки, податків, платежів
Дизайн
тригерні анімації, паралакс ефекти, lotti animation файли – це все можливо використовувати на Webflow

Що дає Webflow

Для маркетологів та тих, хто працює з контентом

  • Зможеш перетворити свій сайт на інструмент маркетингу.
  • Масштабуватимеш свій бізнес та виходитимеш на нові ринки без залучення девопсів.
  • Ліквідуєш розрив між дизайном та розробкою і зможеш заощаджувати бюджет бізнесу.
  • Отримаєш можливість керувати своїм сайтом без залучення дизайнерів чи розробників завдяки CMS колекціям Webflow.

Для дизайнерів з різним досвідом та верстальників

  • Проєктуватимеш та створюватимеш веб-інтерфейси без знання коду.
  • Зможеш швидко створювати адаптивні та інтерактивні сайти.
  • Навчишся використовувати анімацію та найкращі візуальні рішення для веб-дизайну.
  • Вийдеш на новий рівень і зможеш перетворити Webflow на свою професію.

Програма твого навчання

Опануй Webflow за 2 місяці
1
Урок
2
Урок
3
Урок
4
Урок
5
Урок
6
Урок
7
Урок
8
Урок
9
Урок
10
Урок
11
Урок
12
Урок
13
Урок
14
Урок
15
Урок
16
Урок
17
Урок
Урок 1. Вступний урок
  1. Огляд можливостей платформи. 
  2. Функціонал та переваги платформи.
  3. Обмеження та лімітації в інструментах.
  4. Створення та налаштування проєкту.
Практичне завдання

Створиш власний проєкт, обереш Workspace та Site Plan відповідно до своїх потреб. Налаштуєш параметри проєкту, які необхідні для старту

Тестування

Перевіриш, чи вдалося засвоїти знання

Бонус від лектора

Отримаєш додаткові матеріали для свого розвитку у Webflow

  • Webflow
  • Проєкт
  • Workspace
  • Site-plan
Урок 2. Огляд інтерфейсу
  1. Знайомство з інтерфейсом.
  2. Контрольна панель.
  3. Канвас.
  4. Top-bar.
  5. Навігаційна breadcrumb панель.
Практичне завдання

Почнеш працювати над своїм проєктом у Figma

Бонус від лектора

Отримаєш додаткові матеріали для свого розвитку у Webflow

  • Інтерфейс
  • Web структура
  • Елементи
  • Компоненти
Урок 3. Панель стилів
  1. Робота з панеллю стилів.
Практичне завдання

Закріпиш пройдений матеріал

Тестування

Перевіриш, чи вдалося засвоїти знання

Q&A сесія

Zoom-зустріч з лектором для обговорення усіх питань, які у тебе виникли у процесі роботи

  • Поля
  • Колір
  • Розмір тексту
  • CSS-клас
Урок 4. Вебструктура
  1. Вступ до HTML & CSS.
  2. Box-model.
Практичне завдання

Підготуєш розбір свого макету відповідно до вебструктури. Спроєктуєш прототип розмітки для майбутнього дизайну

Бонус від лектора

Отримаєш додаткові матеріали для свого розвитку у Webflow

  • Групування
  • Адаптивність
  • Layouts
Урок 5. Ієрархія елементів
  1. Робота з ієрархією елементів.
Практичне завдання

Закріпиш пройдений матеріал

Q&A сесія

Zoom-зустріч з лектором для обговорення усіх питань, які у тебе виникли у процесі роботи

  • Елементи
  • Ієрархія
  • Налаштування
Урок 6. Базові елементи
  1. Елементи.
  2. Body.
  3. Section.
  4. Container.
  5. Columns.
  6. Div-block.
Практичне завдання

Закріпиш пройдений матеріал

Бонус від лектора

Отримаєш додаткові матеріали для свого розвитку у Webflow

  • Робота з елементами
  • Style
  • Ефекти
Урок 7. Компоненти
  1. Компоненти.
  2. Navbar.
  3. Створення кастомних компонентів.
Практичне завдання

Закріпиш пройдений матеріал

Q&A сесія

Zoom-зустріч з лектором для обговорення усіх питань, які у тебе виникли у процесі роботи

  • Група елементів
  • Кастомізація
  • Конфігурація
Урок 8. Юніти
  1. Панель юнітів.
  2. Юніти.
Практичне завдання

Закріпиш пройдений матеріал

Бонус від лектора

Отримаєш додаткові матеріали для свого розвитку у Webflow

Урок 9. HTML теги та класи
  1. HTML теги.
  2. Класи.
  3. Типографіка.
  4. Стейти елементів.
Практичне завдання

Налаштуєш HTML теги для всіх доступних елементів та підготуєш стайл-гайд для свого проєкту

Q&A сесія

Zoom-зустріч з лектором для обговорення усіх питань, які у тебе виникли у процесі роботи

Урок 10. Лейаути
  1. Спейсинг (margin, padding).
  2. Display setting (show/hide).
  3. Модель Flexbox.
  4. Grid.
  5. Позиціонування елементів.
Практичне завдання

Створиш лейаут, використовуючи вивчені техніки

Бонус від лектора

Отримаєш додаткові матеріали для свого розвитку у Webflow

Урок 11. Верстка блоків
  1. Верстка без дизайн макету.
  2. Перенесення макету з Figma.
Практичне завдання

Закріпиш пройдений матеріал

Q&A сесія

Zoom-зустріч з лектором для обговорення усіх питань, які у тебе виникли у процесі роботи

Урок 12. Адаптивна верстка
  1. Робота з адаптивною версткою.
Практичне завдання

Підготуєш адаптивну верстку свого проєкту

Бонус від лектора

Отримаєш додаткові матеріали для свого розвитку у Webflow

Урок 13. Webflow CMS: створення, редагування та апдейт
  1. Створення колекцій CMS.
  2. Додавання колекцій на сайт.
Практичне завдання

Створиш CMS колекцію та інтегруєш її у свій проєкт

Q&A сесія

Zoom-зустріч з лектором для обговорення усіх питань, які у тебе виникли у процесі роботи

  • Колекції
  • Динамічний контент
  • Поля
  • Списки
Урок 14. Створення дизайну на базі Webflow CMS
  1. Стилізація колекцій.
  2. Створення шаблону сторінок колекції.
Практичне завдання

Закріпиш пройдений матеріал

  • CMS
  • Макет
  • Інтеграція
Урок 15. Інтерекшени та тригерні анімації
  1. Панель інтерекшенів.
  2. Налаштування тригерних анімацій.
Практичне завдання

Додаси до свого проєкту тригерні анімації та інтерекшени

Q&A сесія

Zoom-зустріч з лектором для обговорення усіх питань, які у тебе виникли у процесі роботи

  • Тригери елементів
  • Тригери сторінок
  • Цілі
  • Хронологія
Урок 16. Webflow SEO та паблішинг проєкту
  1. Вступ у SEO.
  2. Мета-теги.
  3. Маркування H1, H2, H3…
  4. Alt теги для зображень.
  5. Панель аудиту.
  6. Кейси з оптимізації під SpeedPageInsights.
  7. Підключення домену та публікація проєкту.
Практичне завдання

Налаштуєш SEO для свого проєкту та опублікуєш його

  • SEO
  • Оптимізація
  • Аудит
  • Публікація
Урок 17. Кастомний код: розширюй функціонал своїх проєктів на Webflow
  1. Сніпети коду.
  2. Як працювати зі сніпетами.
  3. Розбір анатомії елементів, до яких застосовується сніпет (на практичному прикладі).
  4. Як інтегрувати сніпет коду на свій сайт.
  5. Публікація сніпету.
Практичне завдання

Інтегруєш сніпет коду на сайт

Захист проєкту

Отримаєш оцінку за свій фінальний проєкт

  • Сніпети
  • Javascript
  • CSS

На курсі на тебе чекають

2
місяці навчання
17
уроків та практичних завдань
7
Q&A-сесій із досвідченим UI/UX-дизайнером та сертифікованим Webflow Developer

Чому я в результаті навчусь?

Будувати вебсайти з нуля у Webflow
Вільно використовуватимеш цей інструмент для різних ніш: від e-commerce до креативних індустрій
Проєктувати вебінтерфейси
Навчишся це робити без знань коду, незалежно від твоєї професії. Webflow підходить для будь-якого напряму
Швидко створювати різні сайти
Робити їх адаптивними, інтерактивними та керувати своїм сайтом без залучення розробників
Перетворювати свій сайт
На інструмент маркетингу. Зможеш просувати будь-який продукт чи проєкт

Хто викладає на курсі?

UX/UI Designer, Webflow Developer з досвідом 5+ років

Сертифікований експерт Webflow.

Колумніст CASES.MEDIA, автор статей та навчальних матеріалів з веб-дизайну.

Проєктував інтерфейси у 5 нішах: SaaS, медицина, FinTech, e-commerce, 3D Tech та інші.

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

Що я отримаю?

Практичний досвід роботи у Webflow з нуля
жодної нудної теорії, після кожного уроку на тебе чекає практичне завдання для відпрацювання навички
Постійний зворотний зв’язок від досвідченого лектора
дізнаватимешся професійну думку про свій проєкт, а ще щотижня зможеш поставити питання щодо матеріалу
Індивідуальну підтримку від координатора курсу
який допомагатиме розібратися в усіх тонкощах курсу, відповідатиме на питання, це твій головний помічник
Портфоліо на основі домашніх завдань і фінального кейс-проєкту
як зможеш додати до резюме або на фріланс-платформу, щоб продемонструвати свій досвід
T

Що кажуть студенти?

Антон Пронін
Webflow Developer

Треба сказати, що Кобі (лектор) приділяє дуже багато уваги матеріалу, до найдрібніших деталей відповідає на питання і розкриває навіть дрібні теми.

Дуже дякую Кобі і Чойс, адже допомогли мені розібратися з тим як працює вебфлоу і верстка взагалі.

Юлія
Webflow Developer

Курс максимально практичний, а лектор просто вааау. Спершу було доволі складно, але усі на курсі дуже доброзичливі і з усім допомагають. Подобається нетворкінг у чаті, можна поставити будь-яке питання і отримати відповідь.

Аліна Кравченко
Webflow Developer

Мені завжди хотілося займатися чимось творчим, але склалося так, що я вже три роки працюю офіс-менеджером у приватній клініці. Якось побачила рекламу і прийшла на вебінар Choice31 про Webflow. Так, це виглядало трохи складно і я насправді боялася. Але все одно пішла на курс: не пожалкувала жодного разу. Зараз розмістила своє портфоліо і набираю …

Олексій
Webflow Developer

Я SMM-менеджер, працюю у Польщі. Веду сторінки для кількох бізнесів. Дизайн завжди був моїм хобі, але я не займався цим професійно. Робив картинки у Canva, трохи працював у Figma. На курсі вдалося вивчити Webflow так, що зміг взяти свій перший проєкт. Тепер планую перетворити Webflow на свою основну роботу.

Ольга Любенок
Webflow Developer

Навчання проходило у не нав’язливому форматі. Не було жорстких дедлайнів. Це дало змогу отримати відчуття задоволення від навчання, а не нервувати з приводу зірваних дедлайнів. Не було відчуття «конвеєрності». Відчувалось, що Йосип старається максимально допомогти кожному студентові.

Анна Сахно
Webflow Developer

Я веб-дизайнер з досвідом, але пішла на курс, бо хотіла опанувати Вебфлоу. Найбільше сподобалось, що є живе спілкування як з куратором так і відповіді у QA від Йосипа. Тут душевно і «по-домашньому», тут я серйозно, нема відчуття, що тебе оцінюють як в школі. 

Юліана Чванова
Webflow Developer

Ваш курс відрізняється, великою кількістю матеріалу, без води та крутим лектором 🔥 Найбільше сподобалось, що він викладався на повну котушку =) Проскочила думка, що я знаходжусь в правильному місці, і на досить непоганому рівні (хоча раніше так не думала).

Віктор Міхалевич
Webflow Developer

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

Читати всі відгуки

Ми завжди даємо можливість вибору

  • Доступ до всіх уроків та навчальних матеріалів
  • Практичні завдання
  • Підтримка координатора
  • Q&A сесії
  • Зворотний зв’язок від лектора
  • Спілкування з іншими студентами
  • Захист власного проєкту
  • Сертифікат
  • Допомога із працевлаштуванням
Evergreen
Курс у записі
  • Доступ до всіх уроків та навчальних матеріалів
  • Практичні завдання
  • Підтримка координатора
  • Q&A сесії
  • Зворотний зв’язок від лектора
  • Спілкування з іншими студентами
  • Захист власного проєкту
  • Сертифікат
  • Допомога із працевлаштуванням
Live курс
Живий курс
  • Доступ до всіх уроків та навчальних матеріалів
  • Практичні завдання
  • Підтримка координатора
  • Q&A сесії
  • Зворотний зв’язок від лектора
  • Спілкування з іншими студентами
  • Захист власного проєкту
  • Сертифікат
  • Допомога із працевлаштуванням

Хочеш стати профі у Webflow?

  • Заповни форму нижче – і наш кар’єрний консультант зв’яжеться з тобою
  • Для чого особисте спілкування? Це невеличка співбесіда
  • Ти зрозумієш, чи підходить тобі навчання, зможеш поставити усі питання і після цього оплатити навчання
  • А ще ми разом усвідомимо, чи підходимо одне одному за цінностями
  • P.S. Ми відбираємо лише найвмотивованіших, тож після спілкування зможемо зрозуміти, чи є у нас match

А якщо я вже працюю у Webflow, просто не розумію деякі штуки?

Пройди консультацію
Від лектора курсу
Ти отримаєш
Готове рішення або розбір твого власного кейсу
Вирішиш
Практичні проблеми, які виникають при роботі з Webflow

Все чудово, але чому Choice31?

Ми – практики
Сhoice31 створений реальним бізнесом – групою компаній Netpeak. Ми – частина ринку, тож добре розуміємо, які люди йому потрібні. Точно знаємо, як потрібно навчати: за 15 років Netpeak Group виростив для себе більше 5000 фахівців. Твоя черга стати профі.
Знання ≠ контент
Знання, які допоможуть тобі зростати не лише у роботі, але й у звичайному житті. Даємо знання, а не контент. Почни мислити ширше, не боятися експериментів і навчатися на помилках.
Топимо за науку
Для того, щоб розворушити твої нейрони, ми використовуємо силу науки. Наша методологія побудована на справжніх кейсах та практиці бізнесу.
WE ARE CHOICE 31
WE ARE CHOICE 31
WE ARE CHOICE 31
WE ARE CHOICE 31
WE ARE CHOICE 31
WE ARE CHOICE 31
WE ARE CHOICE 31

Хочу змін.
Який наступний крок?

Залиш свої дані – і наш фахівець допоможе з вибором.

А якщо номер неправильний?

Пропущена цифра не стане перешкодою для змін. Напиши, як знайти тебе в месенджері.