Полный курс по Webflow

1. Теория: Базовый CSS

1.1. Что вы узнаете из курса и как пройти его эффективно

В уроке разберем какие навыки и знания вы получите из прохождения курса и почему это важно для работы с Каталогом секций.

‍

1.2. Регистрация в сервисе Webflow, создание проекта и предоставление ссылки Share

Из урока вы узнаете как правильно пройти регистрацию аккаунта в сервисе Webflow и почему стоит использовать почту от gmail.com

‍

1.3. Как зарегистрировать несколько аккаунтов Webflow на один email адрес

В этом уроке вы узнаете лайфхак, как вы сможете создать несколько бесплатным аккаунтов Webflow на один email адрес от gmail.com

‍

1.4. Обзор управления проектами и Workspace

Разберемся с тем, как создавать, удалять и копировать проекты. Покажу как выглядят рабочие пространства (Workspace) на разных платных тарифах и как распределять проекты по папкам.

‍

1.5. Обзор панели конструктора Webflow

На этом уроке вы научитесь создавать веб-страницы в конструкторе Webflow. Изучите процесс создания новой страницы, настройте ее внешний вид, добавьте необходимые элементы и оптимизируйте взаимодействие с пользователем. Так же разберетесь как можно снять ограничение на бесплатном аккаунте.

‍

1.6. Создание страниц, управление главной, настройка SEO, шаблон на 100 страниц

На этом уроке вы научитесь создавать веб-страницы в конструкторе Webflow. Изучите процесс создания новой страницы, настройте ее внешний вид, добавьте необходимые элементы и оптимизируйте взаимодействие с пользователем. Так же разберетесь как можно снять ограничение на бесплатном аккаунте.

‍

1.7. Из чего состоит сайт и что такое HTML, CSS, JavaScript

На этом уроке вы узнаете, из каких компонентов состоит сайт и познакомитесь с основными технологиями, такими как HTML, CSS и JavaScript. Изучите, как HTML определяет структуру и содержимое страницы, CSS задает ее внешний вид, а JavaScript добавляет интерактивность и функциональность. Получите фундаментальные знания для создания и разработки современных веб-сайтов.

‍

1.8. Основы работы с Каталогом секций

На этом уроке вы познакомитесь с Каталогом готовых секций для Webflow. Изучите большой выбор предварительно созданных секций, которые можно использовать в своих проектах. Откройте для себя возможность быстрого и удобного внедрения стильных и функциональных секций на веб-страницах без необходимости создания их с нуля.

‍

1.9. Глобальный класс, класс и подкласс.

На этом уроке вы узнаете, что такое классы и подклассы в CSS. Изучите, как классы используются для задания стилей и применения их к элементам на веб-странице. Познакомьтесь с понятием подклассов, которые позволяют добавлять дополнительные стили к элементам с определенными классами.

‍

1.10. Методология БЭМ названия классов

На этом уроке вы познакомитесь с концепцией блочной верстки и узнаете, как она работает. Изучите основные принципы размещения элементов на странице с использованием блоков и контейнеров. Получите понимание о гибкости и адаптивности блочной верстки, а также о ее преимуществах при создании веб-сайтов.

‍

1.12. Виды Display (block, Inline-block, Inline, non)

Урок о видах Display веб-разметки позволит вам познакомиться с основными типами отображения элементов на веб-странице. Вы узнаете о блочном (Block), строчно-блочном (Inline-block), строчном (Inline) и специальном типе "Display none". Каждый из них имеет свои особенности и применение, и понимание этих различий поможет вам правильно структурировать и располагать элементы на вашей веб-странице.

‍

1.13. Основы CSS Flexbox в Webflow

Урок "Основы CSS Flexbox в Webflow" позволит вам овладеть основами использования Flexbox для создания гибкой и адаптивной компоновки элементов на вашем веб-сайте. Вы изучите основные свойства Flexbox и научитесь применять их в Webflow, а также получите полезные советы и трюки для эффективного управления компоновкой страниц. Этот урок поможет вам создавать современные и удобные макеты, адаптированные под различные устройства и разрешения экранов.

‍

1.14. Игра Flexbox на запоминание как работают параметры

Flexbox Game - это интерактивная игра, которая поможет вам научиться использовать Flexbox для создания гибкой веб-вёрстки. В игре вам предстоит решать разнообразные задачи и головоломки, используя основные свойства Flexbox, такие как выравнивание, расположение и управление пространством элементов. Игра предоставляет визуальные инструменты и наглядные примеры, чтобы помочь вам освоить Flexbox и улучшить свои навыки веб-разработки.

‍

1.15. CSS Grid

Урок "CSS Grid в Webflow" поможет вам изучить и применить мощные возможности CSS Grid для создания сложных и гибких сеток на вашем веб-сайте с помощью платформы Webflow. Вы узнаете основные концепции CSS Grid, такие как контейнеры, ячейки, треки и шаблоны, и научитесь использовать их для создания разнообразных макетов и компоновок. В конце урока вы сможете создавать профессиональные и адаптивные сетки с легкостью, что позволит вам эффективно организовывать содержимое на вашем веб-сайте.

‍

1.16. Quick Stack, V Flex, H Flex

Урок "Quick Stack, V Flex, H Flex в Webflow" представляет возможность изучить и применить три мощных инструмента компоновки в Webflow: Quick Stack, V Flex и H Flex. Quick Stack позволяет легко создавать стеки элементов, V Flex обеспечивает гибкое вертикальное расположение элементов, а H Flex предоставляет гибкую горизонтальную компоновку. Вы научитесь использовать эти инструменты для создания адаптивных и эстетически привлекательных макетов на вашем веб-сайте в Webflow. Этот урок поможет вам ускорить процесс веб-разработки и достичь профессиональных результатов.

‍

1.17. Columns колонки

Урок "Columns в Webflow" представляет возможность изучить и применить функциональность Columns для создания гибкой и многоколоночной компоновки на вашем веб-сайте с помощью Webflow. Дополнительно мы сравним верстку Columns и Flexbox

‍

1.18. Основные блоки Layout (Section, Container, DIV) и их семантическое значение

Урок позволяет изучить и применить ключевые элементы веб-разметки в Webflow: Section, Container и DIV. Вы узнаете, как правильно использовать эти элементы для организации и структурирования контента на вашем веб-сайте. Кроме того, вы познакомитесь со смысловыми элементами HTML, такими как заголовки, параграфы, списки и другие, и поймете их значение для доступности и семантики вашего веб-сайта.

‍

1.19. Обзор готовых блоков в Каталоге секций с построением Flexbox и Grid

Урок предлагает вам рассмотреть и изучить различные готовые секции, доступные в каталоге секций web-steps. На основании уже пройденного материала по позиционированию объектов вы сможете разобрать примеры верстки.

‍

1.20. Единицы измерения. Px,%, Auto, Em, Vh, Vw, Rem, CH, Svh, Svw, Auto

На этом уроке вы изучите различные единицы измерения в CSS, такие как пиксели (px), проценты (%), авто (auto), em, viewport height (vh), viewport width (vw), rem, контейнерная высота (ch), относительная высота viewport (svh) и относительная ширина viewport (cvw).

‍

1.21. Как подключить шрифты

Урок поможет вам научиться добавлять и использовать пользовательские шрифты в вашем проекте с помощью функциональности Webflow. Вы узнаете, как импортировать и подключить внешние шрифты, а также как использовать шрифты из библиотеки Google Fonts.

‍

1.22. Основы Типографики

Урок позволит вам овладеть основами использования типографики для создания эффективного и привлекательного дизайна веб-сайта с помощью Webflow. Вы изучите важные аспекты типографики, такие как выбор подходящих шрифтов, определение размеров, интерлиньяжа и межбуквенного пространства. Кроме того, вы научитесь применять стили текста, создавать заголовки и абзацы, а также применять другие эффекты и свойства к тексту.

‍

1.23. Значение text-wrap: normal, anywhere и break-word

Параметр CSS text-wrap: anywhere; и word-break: break-word; имеют влияние на перенос текста внутри элемента.

‍

2. Практикум

2.1. Верстка и адаптация первой секции Quick Stack

2.2. Верстка и адаптация второй секции Flex box

2.3. Верстка и адаптация третьей секции Grid

‍

3. Теория: Инструменты и настройки

3.1. CSS Overflow

Урок "CSS Overflow" поможет вам разобраться в свойстве overflow в CSS и его применении для управления содержимым блочных элементов. Вы узнаете, как управлять переполнением содержимого, если оно не помещается в заданные размеры блока. В уроке вы ознакомитесь с различными значениями свойства overflow, такими как visible, hidden, scroll и auto, и научитесь применять их для создания прокручиваемых областей или скрытия лишнего содержимого.

‍

3.2. Breakpoint (точки остановок)

Урок по брекпоинтам в Webflow поможет вам научиться создавать адаптивные веб-сайты, настраивать контент для различных экранов и управлять расположением элементов для создания современного и отзывчивого дизайна.

‍

3.3. Position (позиционирование)

Урок по позиционированию в CSS Webflow покажет, как эффективно располагать элементы на веб-странице с помощью различных методов позиционирования, от статического до позиционирования по блокам. Вы научитесь создавать уникальные макеты и контролировать положение элементов с помощью Webflow.

‍

3.4. Z-index управления уровнями слоев

Урок по брекпоинтам в Webflow поможет вам научиться создавать адаптивные веб-сайты, настраивать контент для различных экранов и управлять расположением элементов для создания современного и отзывчивого дизайна.

‍

3.5. Background в разных режимах

Урок позволяет изучить различные варианты задания фона (background) веб-проекта с помощью платформы Webflow. В ходе урока рассматриваются такие темы, как задание цветового фона, использование изображений и видеофона, а также добавление анимации к фону.

‍

3.6. Border работа с границами

Урок "CSS Grid в Webflow" поможет вам изучить и применить мощные возможности CSS Grid для создания сложных и гибких сеток на вашем веб-сайте с помощью платформы Webflow. Вы узнаете основные концепции CSS Grid, такие как контейнеры, ячейки, треки и шаблоны, и научитесь использовать их для создания разнообразных макетов и компоновок. В конце урока вы сможете создавать профессиональные и адаптивные сетки с легкостью, что позволит вам эффективно организовывать содержимое на вашем веб-сайте.

‍

3.7. Blend mode (режимы наложения)

Урок поможет вам изучить возможности использования специальных эффектов на вашем веб-сайте, будем рассматривать различные режимы наложения, такие как: Multiply, Screen, Overlay и другие. Вы научитесь использовать эти режимы, чтобы создавать эффектные изображения, фоны и графические элементы на вашем сайте.

‍

3.8. Outline и Box shadows

Outline и Box shadows в Webflow - это свойства, которые позволяют создавать эффектные визуальные эффекты для элементов сайта. В этом уроке вы научитесь, как создать рамки с использованием свойств outline-style, outline-width и outline-color, а также как создавать тени с помощью свойства box-shadow.

‍

3.9. 2D Transforms основ

Transforms - это простое и в тоже время мощное свойство, которое можно использовать для изменения размеров, поворотов, наклона, а также переноса элементов HTML на веб-странице. Урок поможет понять, как использовать эту функцию на практике.

‍

3.10. 3D Transforms основы

Урок 3D трансформации в Webflow позволит вам создавать 3D-эффекты для веб-страницы. Вы научитесь применять 3D-трансформации к элементам вашей веб-страницы, таким как перспектива и вращение. Урок также поможет вам лучше понять работу с трансформациями общего вида.

‍

3.11. Transition (плавность анимации)

Урок поможет вам научится создавать плавные анимации между состояниями элементов веб-страницы. Вы узнаете, как изменить параметры перехода, установить время задержки и плавность анимации, включить эффекты при наведении курсора на элемент и многое другое.

‍

3.12. Filters и Backdrop filters

Урок предлагает погрузиться в увлекательный мир визуальных эффектов. Изучите возможности применения фильтров к изображениям и фонам, создавая эстетически привлекательные и насыщенные дизайны. Расширьте свои навыки веб-разработки, добавляя эффекты, которые придают вашему проекту уникальность и глубину

‍

3.13. Назначения курсоров

Изучите способы изменения внешнего вида курсора, добавляя индивидуальные стили и анимации. Поднимите ваш дизайн на новый уровень, создавая уникальные и привлекательные визуальные эффекты при взаимодействии пользователей с вашим сайтом.

‍

3.14. Добавление, настройка и оптимизация графики

На уроке вы узнаете основные методы внедрения графики в проекты, настраивая ее параметры для достижения желаемого визуального эффекта. Вы также изучите оптимизацию графических ресурсов для улучшения производительности сайтов.

‍

3.15. Вставка видео на сайт с Youtube и Vimeo

На уроке вы узнаете, как легко добавить видео с YouTube и Vimeo на ваш сайт, используя интеграцию с платформами. Вы также узнаете о настройках и возможностях для настройки внешнего вида видео и его воспроизведения.

‍

3.16. Добавление и управление Lottie анимацией

На уроке вы научитесь интегрировать Lottie анимации в ваш веб-сайт и управлять ими с помощью Webflow. Изучите методы вставки Lottie JSON файлов, настройку анимаций и использование интерактивных элементов для создания динамических и привлекательных визуальных эффектов.

‍

3.17. Создание и настройка форм в webflow

На уроке вы научитесь добавлять и оптимизировать видеофон на веб-страницах для создания эффектного фонового контента с возможностью настройки параметров видео.

‍

3.19. Navbar (меню) создание и настройка

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

‍

3.20. Lightbox создание и настройка

На уроке вы освоите создание стильных всплывающих окон (lightbox) для отображения контента поверх основного содержимого страницы. Вы также научитесь настраивать внешний вид, поведение, анимации и переходы lightbox, а также интегрировать его с различными типами контента, такими как изображения и видео, для улучшения визуального опыта пользователей на вашем сайте.

‍

3.21. Slider создание и настройка

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

‍

3.22. Tabs создание и настройка

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

‍

3.23. Element trigger базовая анимация

На уроке вы научитесь использовать элементы триггеры для создания анимаций при прокрутке или интерактивных действиях пользователя. Применять базовые анимации к элементам на веб-странице, чтобы сделать контент более привлекательным и динамичным.

‍