Про курс
Webflow — популярний та потужний no-code інструмент для створення швидких та легких в масштабуванні вебсайтів. Проєкти на Webflow зсередини працюють і виглядають так, ніби їх написав професійний веброзробник. Проте насправді для роботи знадобиться лише зручний інтерфейс, розуміння деяких нюансів та трохи терпіння.
Попри відносну простоту у використанні завдяки Webflow можна створювати й односторінкові лендинги, і онлайн магазини зі складною структурою. При цьому в обох варіантах ми зможемо легко редагувати дизайн та контент, а також матимемо оптимізований та зрозумілий код. Останнє важливо, якщо в майбутньому з цим сайтом працюватиме розробник для впровадження нових функцій.
На курсі покроково пройдемо всі основні етапи для ефективної роботи з інструментом. Від реєстрації й до першого створеного сайту, який навчимося адаптувати під різні екрани та умови використання. Також дізнаємося, як створювати анімації, покращити SEO та розробити CMS для роботи з контентом.
відеокурс
дивіться, коли зручно
1 500 грн
оплачуйте самостійно або через роботодавця
12 лекцій
і будете на «ти» з WebFlow
Куратор
Product Designer у Djinni.
Програма курсу
-
Знайомство з інтерфейсом 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 лекцій, доступ до яких відкривається одразу. Ви можете дивитись їх коли завгодно, проте краще дотримуватись запропонованого куратором порядку.
Додаткові матеріали
Куратор ретельно підібрав для вас додаткові матеріали та корисні джерела для поглибленого розуміння матеріалу.
ГРАФІК
Мова викладання
українська
Запитання
Скільки всього буде лекцій?
Курс складається з 12 лекцій і чеклистів для самоперевірки, а також із довгого списку додаткових матеріалів до кожної лекції.
Чи можна дивитися лекції в будь-який зручний день?
Так, звісно. Ви одразу отримаєте доступ до всіх лекцій і зможете переглядати їх, коли буде зручно.
Чи отримаю я сертифікат після проходження курсу?
Ні, без практики немає сертифікатів. Але головне — це знання, правда ж? Ви зможете перевірити їх, використовуючі чеклисти для самоперевірки після кожної лекції.