Webflow Crash Course

Explore

Модуль 1, Урок 1: Вступ до Webflow та основи Webflow

У цьому уроці ми надамо огляд курсу "Webflow Crash Course" та визначимо його цілі. Ми також дослідимо, що таке Webflow та обговоримо його переваги для клієнтів та розробників. Крім того, ми представимо деякі корисні ресурси для Webflow, такі як Awwwards, CSSDesign та форум Webflow.

Далі ми поглибимося в інтерфейс Webflow та знайомимося з HTML/CSS аспектами платформи. Ми детально розглянемо панель об’єктів, яка є необхідним інструментом для керування елементами в Webflow.

Потім ми навчимося створювати та стилізувати елементи з використанням Webflow. Ми розглянемо методології назв, такі як BEM (Block Element Modifier) та Tailwind, та обговоримо, як адаптувати бібліотеки стилів для покращення робочого процесу.

Нарешті, ми дослідимо роботу зі шрифтами в Webflow. Ми навчимося додавати різні шрифти до наших дизайнів та налаштовувати їх зовнішній вигляд, щоб досягти бажаного естетичного ефекту.

План:

Огляд курсу та встановлення цілей:

Розпочнемо урок, надавши огляд курсу "Webflow Crash Course" та його цілей.

Обговоримо важливість встановлення цілей та те, як вони можуть допомогти студентам протягом курсу.

Заохочуємо студентів встановлювати конкретні цілі, які вони хочуть досягти до кінця курсу, такі як наприклад, розробка веб-сайту портфоліо або створення проекту клієнта.

Що таке Webflow та його переваги для клієнтів:

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

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

Як Webflow допомагає розробникам:

Обговорюємо, як Webflow оптимізує процес розробки веб-сайтів для розробників, дозволяючи їм більше уваги приділяти дизайну та взаємодіїм.

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

Корисні ресурси для Webflow (Awwwards, CSSDesign, форум Webflow):

Надаємо список цінних ресурсів для студентів, щоб вони могли дізнатися більше про Webflow.

Згадуємо популярні веб-сайти-джерела натхнення, такі як Awwwards та CSSDesign, де студенти можуть знайти приклади дизайну веб-сайтів.

Рекомендуємо форум Webflow як місце, де можна задавати питання, шукати поради та зв'язуватися зі спільнотою Webflow.

Огляд інтерфейсу Webflow (HTML/CSS):

Проводимо студентів через інтерфейс Webflow, виділяючи ключові розділи та функції.

Пояснюємо різницю між візуальним редактором та редактором коду.

Надаємо огляд структури HTML/CSS в Webflow та її взаємозв'язку з елементами дизайну.

Вступ до панелі об'єктів:

Представляємо панель об'єктів, яка є центральним інструментом для керування та організації елементів в Webflow.

Пояснюємо, як отримати доступ до панелі об'єктів та її різні розділи, такі як Навігатор та Вкладки Стилів.

Демонструємо, як використовувати панель об'єктів для вибору, розташування та модифікації елементів на полотні.

Створення та стилізація елементів:

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

Показуємо, як маніпулювати властивостями розміру, позиції та стилю елементів за допомогою візуальних елементів керування або панелі стилів.

Наголошуємо на важливості використання послідовної системи найменувань для елементів, щоб зберігати чисту та організовану структуру проекту.

Методології найменування та адаптація бібліотек стилів (BEM, Tailwind):

Пояснюємо поняття методологій найменування, таких як BEM (Block Element Modifier) та Tailwind CSS, та те, як вони можуть покращити читабельність та підтримку коду.

Обговорюємо переваги використання бібліотек стилів, таких як Tailwind CSS, та те, як вони можуть прискорити процес дизайну, надаючи набір передвизначених стилів та службових класів.

Робота зі шрифтами:

Демонструємо, як включати різні шрифти в проект Webflow, як з вбудованої бібліотеки Webflow, так і з зовнішніх джерел, таких як Google Fonts.

Показуємо, як налаштовувати стиль, розмір та вагу шрифтів за допомогою засобів типографіки в Webflow.

Заохочуємо студентів експериментувати з різними комбінаціями шрифтів, щоб створити візуально привабливий дизайн.

Домашнє завдання:

Розробити простий сторінку-лендінг за допомогою Webflow, це має включати:

Додати шрифти

Змінити css налаштування для HTML тегів

Навігацію

Hero Section

Секцію: Про вас

Секцію: Про проєкт і цілі цього проєкту

Секцію сітку з картинками

Футер

Проаналізувати Awwwards по тегу “Webflow” та обрати проєкт до душі, щоб обговорити його (Обрати декілька студентів для обговорення)

Студент подає посилання на проєкт та Preview

Критерії прийому:

Дизайн проєкту відповідає дизайну файлу Figma

Якщо виникають складності – надається посилання на
`готову сторінку проєкту`⁠
Webflow першої ітерації та
`сторінку Webflow Preview`⁠
.

Розділ – Воркфлоу Tango

⁠

Реєстрація на Webflow та створення першого проєкту⁠

⁠

Основне меню Webflow HTML⁠

⁠

Розділ – Елементи

Section (Секція): Це відноситься до розділу контенту на веб-сторінці, який має семантичну відмінність від інших секцій.

Container (Контейнер): Це загальний термін для HTML-елемента, який містить інші елементи. Часто використовується для групування пов'язаного контенту.

Div (Блок): Це загальний блочний контейнерний елемент, який може використовуватися для різноманітних цілей, таких як групування пов'язаного контенту або застосування стилів до певного розділу сторінки.

Heading (Заголовок): Це один із шести HTML-елементів (h1-h6), які використовуються для позначення заголовків та підзаголовків контенту сторінки.

Paragraph (Абзац): Це HTML-елемент, який використовується для позначення абзаців тексту на веб-сторінці.

Span (спан) - це HTML-елемент, який використовується для відображення частини тексту або контенту в межах іншого елемента без зміни його семантичного значення. Елемент span дозволяє застосовувати стилі, класи або інші атрибути до конкретної частини тексту, що дозволяє розмічати та форматувати контент у більш детальний спосіб.

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

Footer: Footer (нижній колонтитул) - це частина веб-сторінки, яка містить інформацію, посилання або контактні дані, розташовані у нижній частині сторінки. Нижній колонтитул може містити посилання на інші сторінки, авторські права, контактну інформацію, посилання на соціальні мережі та інші додаткові елементи.

Hero section: Hero section (головний розділ) - це виділена частина на початку веб-сторінки, яка зазвичай містить великий заголовок, візуальний контент та виклик до дії. Головний розділ призначений для привернення уваги користувачів та залучення їх до подальшого взаємодії з веб-сайтом. Він може містити промо-зображення, текстові блоки, кнопки та інші елементи, що викликають дію.

Розділ – CSS налаштування

Display Block: Display Block (відображення блоком) - це значення властивості CSS, яке встановлює елемент як блоковий елемент. Блоковий елемент займає всю доступну ширину на сторінці та завжди починається з нового рядка. Це дозволяє розташовувати інші елементи до або після блокового елемента.

Display Flex: Display Flex (відображення гнучким) - це значення властивості CSS, яке встановлює контейнер і його дочірні елементи як гнучкий контейнер. Гнучкий контейнер дозволяє розташовувати дочірні елементи в одному рядку або в одній колонці та керувати їх розташуванням, розмірами та порядком за допомогою різних властивостей Flexbox.

Display Grid: Display Grid (відображення сіткою) - це значення властивості CSS, яке встановлює контейнер і його дочірні елементи як контейнер сітки. Сітка дозволяє розташовувати дочірні елементи у вигляді сітки з рядками та колонками. За допомогою різних властивостей та правил, можна контролювати розміри, міжрядкові та міжколонкові відстані, а також порядок розташування елементів на сітці.

Object Fit: Object Fit (підгонка об'єкта) - це властивість CSS, яка визначає, як зображення або відео повинні заповнювати контейнер, до якого вони прикріплені. За допомогою різних значень властивості Object Fit, таких як "fill", "contain", "cover” та інші, можна керувати масштабуванням, обрізанням та розміщенням зображення або відео в межах контейнера.

Object Fit Cover: Object Fit Cover (підгонка об’єкта за обкладинкою) - це значення властивості CSS, яке вказує, що зображення або відео повинні бути масштабовані та обрізані таким чином, щоб повністю заповнити контейнер, зберігаючи при цьому свої пропорції. Це забезпечує повне покриття контейнера зображенням або відео, приховуючи будь-які прогалини або зайву область.

Розділ – Основні поняття

HTML: HTML означає мову розмітки гіпертексту. Це стандартна мова розмітки, яка використовується для створення веб-сторінок. HTML описує структуру веб-сторінки та визначає різні елементи, які складають сторінку, такі як заголовки, абзаци, зображення, посилання тощо.

CSS: CSS означає каскадні таблиці стилів. Це мова таблиць стилів, яка використовується для опису представлення документа, написаного в HTML або XML. CSS визначає, як HTML-елементи повинні відображатися, такі як макет, кольори, шрифти та інші візуальні аспекти веб-сторінки.

BEM: BEM означає блок, елемент, модифікатор. Це конвенція найменування CSS-класів, які використовуються у веб-розробці. Методологія BEM використовується для створення модульних та повторно використовуваних компонентів для веб-розробки. У класах BEM є специфічна конвенція найменування, яка допомагає визначати призначення та ієрархію класу.

Tailwind: Tailwind - це CSS-фреймворк, який надає набір передвстановлених CSS-класів, які можна використовувати для стилізації HTML-елементів. Це фреймворк з утилітами першого класу, що означає, що він надає малі, одноцільові класи, які можна комбінувати для створення складних стилів. Tailwind полегшує створення адаптивних веб-дизайнів та прискорює процес розробки.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.