Бесплатное обучение webflow полный курс по созданию сайтов

Video Description

Уроки вебфлоу для начинающих. Полноценное обучение для новичка, что бы полностью в одном видео освоить сферу создания сайтов на вебфлоу, от основ до готового сайта. Базовый всеобъемлющий курс! 📌 СЕКРЕТНЫЕ МАТЕРИАЛЫ ➡️ https://t.me/webflow_free (да, это самая полезная ссылка 😉 там есть ВСЕ, что вам нужно) Содержание (нажимать по времени): 00:00 лучший бесплатный курс по webflow 01:02 демонстрация результата обучения 01:19 почему именно webflow, его возможности 02:20 для кого курс и как правильно его изучать 04:08 регистрация в вебфлоу 04:41 как создать проект (сайт) 04:53 интерфейс вебфлоу 06:16 с чего начать создание сайта? 06:23 настройка body 07:33 как подключить сторонний шрифт 08:07 продолжаем настраивать body 09:08 как включить русскую версию вебфлоу? 09:47 дальше настраиваем body 10:06 variables (избранные цвета и размеры) 15:26 что нужно знать перед началом разработки (дизайна) 18:02 добавляем первый элемент сайта (section) 19:09 панели инструментов webflow 21:08 структура любого сайта 21:30 настройки секции (section) 24:23 что ложить внутрь секции? (контейнер — ограничитель контента сайта по ширине) 27:12 свойства базовых елементов сайта без заданых параметров 27:43 задаем параметры для секции (фоновый цвет) 28:03 изминение ширины контента на сайте 30:09 помещаем заголовок (текст) внутрь контейнера (меняя его свойства) 31:58 добавляем DIV block (самый популярный (базовый) элемент на любом сайте) изучаем отступы и размеры 32:45 базовый функционал div блоков (изменяем его параметры) изучаем стили Style 46:16 добавляем больше div блоков и эксперементируем с ними изучая их возможности и функции 01:01:50 Flex (горизонтальное размещение и вертикальное объектов) 01:20:28 Grid (сетка для размещения элементов, аналог Flex) 01:26:04 помещаем div блок внурь div блока и изучаем их свойства влияния друг на друга 01:29:12 Position Relative — элемент сам по себе но может влиять на окружение (как вытащить объект за пределы объекта в котором он находится) 01:31:28 Position Absolute — элемент не зависящий не от чего и ни на что не влияющий 01:33:02 z-index — изменяем слоенность элементов (кто будет выше, кто ниже, кто кого перекрывает) 01:38:07 стандартная структура любого сайта 01:39:33 очиста не используемых стилей (удяляем лишний код) 01:39:44 как посмотреть какой код генерирует webflow когда мы задаем параметры объектов? Пора делать сайт! 01:41:28 создание первого экрана сайта (hero section) 01:45:51 как подбирать графику (изображения) для сайта 01:50:01 как подготовить и загрузить изображение на webflow 01:55:57 добавляем заголовок сайта 01:58:27 вспомагательный текст (перечень основных преимуществ) 02:18:33 как работать с grid на реальном примере 02:19:19 создаем классическую структуру первого экрана (текст слева картинка справа) 02:20:38 царь-кнопка (главная кнопка с призывом к действию) 02:22:15 картинка на первом экране выходит за пределы контейнера 02:29:44 добавляем grid в нашу версию вертикального первого экрана (делаем слева и справа текст с кнопкой) 02:37:55 стилизация кнопок на сайте 02:42:49 как сделать круглую кнопку 02:44:09 как сделать кнопку автономной что бы она была поверх чего-угодно 02:49:23 стилизация (оформление) главного изображения (обводки) 02:53:59 header (хедер) сайта (верхняя часть) 02:56:25 лого 03:13:07 где брать иконки текстом (эмодзи и символы) 03:19:24 адрес компании 03:21:57 номер телефона 03:25:19 кнопка заказа обратного звонка 03:31:04 как превратить кнопку в ссылку на webflow 03:34:00 пункты меню (разделы страницы или сайта) 03:39:06 dropdown (выпадающий список) 03:41:22 разделители между пунктами меню (декоративные элементы) 03:43:44 стилизация выпадающего списка 03:48:16 hover (эффект при наведении курсора мышки с помощью css) 03:35:40 hover анимациями js (interactions) вращение стрелочки выпадающего меню 04:02:45 проявление и стилизация скрытых элементов (на примере выпадающих пунктов списка) 04:13:42 замена стадартной (резкой) анимации появления пунктов выпадающего списка на плавную (с помощью анимаций interactions) 04:19:10 анимация hover (состояние при наведении курсора мышки) для любой кнопки (с помощью стилей css) 04:40:12 анимация этой же кнопки но уже с помощью js (interactions) 04:44:06 анимируем главное изображения 1-го экрана при загрузке страницы (проявление с непрозрачности, движение, увеличение и вращение) 05:00:15 анимация заголовка (h1) с помощью анимаций 05:05:14 альтернативная анимация заголовка (h1) с помощью новых анимаций GSAP (они утежеляют сайт + возможны глюки и баги, не рекомендую их использовать) но все таки покажу для общего понятия... 05:11:14 настройки страницы для seo (название, описание и илюстрация ссылки) 05:14:05 favicon (иконка сайта для вкладки браузера) 05:16:48 как конвертировать изображения в SVG 05:19:00 замена цвета SVG иконок 05:20:14 как в логотипе использовать SVG изображения 05:20:59 остальные таймкоды в закрепленном комментарии ↓↓↓ ✅ Вторая часть курса — https://youtu.be/yiZr96cMMoU