Курс Webflow

Це міні-курс з 5 модулів і бонусів (27 уроків), де ти зможеш навчитись створювати сайти на Webflow, працювати з динамічним контентом, анімувати сайти та оптимізовувати їх для пошукових систем. Кожен модуль розбитий на короткі 10-30 хвилинні уроки без води.

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

Знайомство з конструкторами, огляд WebFlow, основи HTML i CSS

• Огляд популярних конструкторів, плюси і мінуси
• Знайомство з інтерфейсом Webflow в деталях
• Зрозумілою мовою про основи HTML та CSS, найменування, розміри, властивості Overflow, Fit
• Одиниці вимірювання
• Блокова модель, відступи, дисплей (Block, Inline, Inline-Block та None), основні елементи
• Типографіка
• Flex, grid та позиціонування (те, що потрібно для кращого розуміння побудови сайтів на конструкторі)

Створюємо лендинг на Webflow

• Створення і налаштовання файлу для роботи
• Створення головної секції (hero screen) сайту
• Створення прикріпленого навігаційного меню (header), створення компоненту
• Верстка всього сайту, створення карток
• Фоновий колір сторінки, Borders, Radius (заокруглення). Закріплюємо flex та grid на практиці
• Створення footer сайту
• Блок з підпискою на сайті, ID атрибут
• Додаємо скрол на сторінці (якірні посилання)
• Адаптивний дизайн для мобільних телефонів та планшетів
• UI-kit
• Переносимо файл із Figma

Анімація і взаємодії

• Прості ефекти по ховеру, стани елементів
• Анімація блоку FAQ
• Анімація по скролу, повороти
• Створюємо плаваючу кнопку з функцією скролу нагору

CMS колекції, оплати, форми

• Створення та налаштування CMS колекцій і як це впливає на швидкість внесення змін
• Динамічні сторінки
• Модальні форми
• Підключаємо оплату: нюанси та поради

Налаштовуємо SEO, публікуємо сайт

• SEO налаштування для просування сайту
• Додавання Favicon сайту
• Ролі користувачів, публікуємо сайт і передаємо замовнику
• Тарифи та плани Webflow (базово про Site Plans, Workspace Plans)

Складна анімація

Навчимось анімувати пов'язані компоненти, розглянемо складну анімацію і як створювати початковий стан.

Кастомний слайдер

• Розберемо вбудований слайдер (за замовчуванням у Webflow) і чому він не такий гнучкий
• Навчимось підключати і налаштовувати кастомний слайдер за допомогою JS

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

• Зрозумілою мовою про складне
• 6 місяців доступу
• 5 модулів з 25 детальними відео уроками в записі, додатково є субтитри
• 2 бонусних уроки по анімації та створення слайдера
• Доступ протягом 24 годин після оплати
• Без підтримки ментора, але супер зрозуміло
• Без сертифікату, бо знання важливіші

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

Євгенія Бондаренко - UX/UI дизайнерка в Radency