Курси по WebFlow
Порівняння усіх курсів
- 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
Більше інформації
- 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
Більше інформації
- Web & Mobile Design / UI/UX
Ви навчитеся проєктувати, створювати та запускати адаптивні сайти у візуальному редакторі. Ці уроки дадуть вам уявлення про інтерфейс, основні елементи конструктора і найкращі практики створення сайтів. Опанувавши його, ви зможете швидко і якісно створювати сайти під ключ самостійно або в команді.
Програма курсу
Теми:
- Початок роботи
- Веб-структура
- Основні елементи
- Компоненти
- Основи стилізації
- Розмітка
- Адаптивний дизайн
- Основні поняття взаємодії
- CMS і динамічний вміст
- Колекції полів CMS
Особливості курсу
- Самостійне онлайн навчання у власному темпі
- Стартуй навчання у будь-який момент
- Керс англійською мовою але є субтитри
- Тільки теорія
- No-code / Low-code
Опануйте різні види анімацій у Webflow та навчіться забезпечувати інтерактивний користувацький досвід.
Програма курсу
Принципи анімації та підготовка проєкту у Webflow
- Принципи анімації:
- easing
- timing
- delay
- Webflow Setup: підготовка структури посадкової сторінки
Вступна анімація та стартовий екран
- Вступні анімації
- Взаємодія з рухом миші
Анімації при прокручуванні та циклічні анімації
- Анімації при прокручуванні
- Циклічні анімації
Створення інтерактивних продуктових карток
- Створення інтерактивних продуктових карток
- Спеціальні взаємодії при наведенні
Розширені можливості анімацій у Webflow: підключення JavaScript бібліотеки
- Основи підключення анімацій, що базуються на JS бібліотеках
- Фінальні правки та тестування
Після курсу ти зможеш
- Застосовувати базові принципи анімації у Webflow
- Створювати вступні анімації
- Реалізовувати циклічні анімації та анімації при прокручуванні
- Працювати з анімаціями зі зміною пропорцій
- Створювати інтерактивні продуктові картки
- Створювати мікровзаємодії
Особливості курсу
- Перевірка домашніх робіт
- Отримання сертифіката
- Практика
- Підтримка від спільноти студентів
- Додаткові матеріали
- Служба підтримки Cases
Викладачі курсу
Йосип Кобаль - UI/UX-дизайнер, сертифікований експерт з Webflow
Більше інформації- Web & Mobile Design / UI/UX
Курс присвячений практичним аспектам роботи з редактором Webflow та створенню простих посадкових сторінок з його допомогою.
Програма курсу
Знайомство з інтерфейсом
- Вступ до курсу
- Знайомство з інтерфейсом Webflow
- Webflow проти інших онлайн-конструкторів
Створення розмітки
- HTML-розмітка у Webflow
- Розмітка сторінки в Webflow (HTML-частина) та робота з блоками DIV
- Робота з текстом в Webflow
- Робота з зображеннями та компонентами
- Створення навігації
Створення розмітки сторінки
Створення розмітки невеликої посадкової сторінки.
Підключення стилів
- Панель стилів у Webflow
- Робота з селекторами
- Робота з версткою тексту
- Робота з тлом, обведенням та ефектами
- Анімації у Webflow та їхні типи
Підключення стилів
Підключення стилів та додавання на сторінку візуального оформлення.
Адаптивна верстка
- Робота з точками перебудови (breakpoints)
- Робота з класами в адаптивному дизайні
- Особливості створення адаптивного сайту
- Анімація на мобільних пристроях
Створення адаптивної версії сторінки
Створення адаптивної версії дизайн посадкової сторінки.
Публікація сайту
- Мета-інформація та інші додаткові елементи сайту
- Базова робота із інспектором коду
- Робота з доменом та хостингом
Підготовка сайту до публікації
Публікація готового сайту на Webflow
Особливості курсу
- За попередньою підпискою стартуй навчання в будь-який момент
- Самостійне навчання онлайн у власному темпі
- Сертифікат після проходження курсу
- Бажано мати знання роботи з Figma для проходження курсу
Викладачі курсу
Антон Лукащук - дизайнер цифрових продуктів та партнер в HAPPY Design studio, експерт Креативної Практики
Більше інформації
- 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)
Більше інформації
- No-code / Low-code
- WEB Developer / Webmaster
Курс допоможе опанувати професію Web Developer та навчитись No-code розробці у Webflow. На заняттях ви навчитесь швидко робити сайти та додатки, працювати зі скриптами, а також будете мати широкий функціонал для налаштування аналітики.
Програма курсу
Основи створення сайту
- З чого складається якісний сайт?
- Основи прототипу та правила дизайну.
- Робота з макетами сайту та дизайнерами.
Базова робота з Webflow
- Інтерфейс Webflow.
- Структура сторінки та робота з блоками.
- Робота зі стилями, кольорами тощо.
- Додаємо зображення та медіафайли.
- Налаштовуємо адаптивність сторінки.
- Працюємо з анімацією на сторінці.
- Фінальні налаштування сторінки на її завантаження.
Просунута робота з сайтом
- Базова робота зі скриптами та їх додавання на сторінку.
- Оптимізація сайту.
- Багатосторінкові сайти.
- Розбираємося з CMS (керування контентом сайту та робота з інтернет магазинами).
- Інтеграція з іншими веб-сервісами.
Пошук клієнтів та створення власного портфоліо
- Як працювати з фріланс біржами.
- Оформлення власного портфоліо.
- Керування проектами.
- Робота із замовником.
- Як вийти на міжнародний ринок та працювати із замовниками якісніше і в довгу.
Особливості курсу
- Програма курсу складається 10 онлайн-занять
- Практика та розбір питань на кожному уроці
- Telegram-чат з тренером та командою турботи GetEd
- Персональний зв'язок з куратором для вирішення питань під час навчання
- Сертифікат після завершення курсу
Викладачі курсу
Дмитро Кавецький - веб-розробник в онлайн університеті GetEd, має досвід роботи в сфері ІТ більше 7 років.
Більше інформації
- 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, щоб не пропустити анонси нових курсів.
