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

Webflow Developer

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

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

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

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

Що дає Webflow

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Попрацюєш з панеллю стилів, визначиш її функції та можливості

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

Туторіал з панелі стилів

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

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

Тема 5. Ієрархія елементів
  1. Робота з ієрархією елементів.
Практичне завдання

Попрацюєш з компонентами

Тема 6. Базові елементи
  1. Елементи.
  2. Body.
  3. Section.
  4. Container.
  5. Columns.
  6. Div-block.
Практичне завдання

Повториш верстку і створиш блок з використанням базових елементів

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

Отримаєш тематичні туторіали

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

Попрацюєш з власними компонентами

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

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

Тестування з 8 тем

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

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

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

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

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

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

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

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

Пропрацюєш пройдений матеріал

  • Макет
  • Верстка
  • Figma
  • Перенесення
Тема 12. Адаптивна верстка
  1. Робота з адаптивною версткою.
Практичне завдання

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

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

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

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

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

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

Створиш динамічний шаблон для CMS колекції

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

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

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

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

Тестування з 8 тем

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

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

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

  • Сніпети
  • Javascript
  • CSS
  • Публікація
Бонусний урок. Пошук клієнтів на фріланс-майданчиках

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

  • Стратегія
  • Фріланс
  • Клієнти
  • Результат

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

2
місяці навчання у власному темпі
17
уроків
5
тестувань для закріплення знань

А також

5
навчальних блоків
17
практичних завдань
62
години на уроки і практику

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

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

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

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

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

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

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

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

Що я отримаю?

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

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

Антон Пронін
Відгук про лектора Webflow

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

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

Читати повну історію
Юлія
Обрала Webflow замість Tilda

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

Читати повну історію
Аліна Кравченко
Від офіс-менеджера до Webflow Developer

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

Олексій
Перетворив хобі на професію

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

Ольга Любенок
UI/UX дизайнерка пройшла курс Webflow Developer

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

Читати повну історію
Анна Сахно
Webflow для веб-дизайнера

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

Читати повну історію
Юліана Чванова
Навчання Webflow

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

Читати повну історію
Віктор Міхалевич
Я отримав новий досвід і знання, а такі речі завжди так чи інакше змінюють життя

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

Читати повну історію
Читати всі відгуки

Хочеш стати профі у 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

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

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

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

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

Я приймаю умови публічної оферти та політики конфіденційності.