Курс Flexbox CSS - CSS Flexible Box Layout

Name: Курс Flexbox CSS - CSS Flexible Box Layout
Rating: 5.0 (4 reviews)

Модуль Flexbox CSS

Created byDmytro Topchiy

Last updated 12/2024

Russian

What you'll learn

Узнаете полностью все о технологии Flex Box CSS - терминологою, основные понятия, свойтсва и значения
Научитесь создавать реальные блоки и элементы и размещать их на странице
Создадите полноценный одностраничный сайт на 7 секций используя Flex Box CSS
Научитесь заливать сайт на бесплатный хостинг Netlify
Получите дополнительные полезные знания, которые сможете использовать в реальных проектах

Course content

5 sections • 43 lectures • 8h 7m total length

Введение в курс Flex Box CSS1:10
В этом вводном видео мы рассмотрим содержание курса Flex Box CSS.
Урок 1. Что такое Flex Box CSS?1:35
В этом видео уроке вы узнаете, что такое Flex Box CSS.
Урок 2. Основные понятия и терминология Flex Box CSS7:23
В этом видео уроке вы узнаете об основных понятиях и терминологии Flex Box CSS.
Урок 3. Свойство display10:38
В этом видео уроке вы узнаете, что такое свойстов display и как оно работает и применяется на примере.
Урок 4. Свойство flex-direction - управление направлением элементов10:37
В этом видео уроке вы узнаете, что такое свойство flex-direction.
Урок 5. Свойство flex-wrap - гибкая упаковка10:26
В этом видео уроке вы узнаете, что такое свойство flex-wrap.
Урок 6. Свойство flex-flow - гибкий поток11:44
В этом видео уроке вы узнаете, что такое свойство flex-flow.
Урок 7. Свойство justify-content - выравнивание содержимого по горизонтали11:32
В этом видео уроке вы узнаете, что такое свойство justify-content.
Урок 8. Свойство align-items - выравнивание содержимого по вертикали13:37
В этом видео уроке вы узнаете, что такое свойство align-items.
Урок 9. Свойство align-content - выравнивание контента или содержимого18:09
В этом видео уроке вы узнаете, что такое свойство align-content.
Урок 10. Свойства row-gap, column-gap, gap - пробелы между элементами10:01
В этом видео уроке вы узнаете, что такое свойства row-gap, column-gap, gap.
Урок 11. Свойство align-self - выравнивание отдельного гибкого элемента14:01
В этом видео уроке вы узнаете, что такое свойство align-self.
Урок 12. Свойство order - изменение порядка10:25
В этом видео уроке вы узнаете, что такое свойство order.
Урок 13. Свойство flex-basis - изначальный основной размер элемент9:39
В этом видео уроке вы узнаете, что такое свойство flex-basis.
Урок 14. Свойство flex-grow - растяжение элемента10:19
В этом видео уроке вы узнаете, что такое свойство flex-grow.
Урок 15. Свойство flex-shrink - сокращение элемента9:45
В этом видео уроке вы узнаете, что такое свойство flex-shrink.
Урок 16. Свойство flex - объединенное свойство9:25
В этом видео уроке вы узнаете, что такое свойство flex.
Урок 17. Вендорные префиксы для flexbox5:34
В этом видео вы узнаете, что такое вендорные префиксы и как они работают и применяются для Flex Box CSS.

Практический урок 1. Создаем меню используя Flex Box. Пример 1.11:43
В этом видео вы узнаете, как сделать меню используя свойство display: flex.
Практический урок 2. Создаем меню используя Flex Box. Пример 2.12:06
В этом видео вы узнаете, как сделать меню используя свойство display: flex и justify-content.
Практический урок 3. Создаем меню используя Flex Box. Пример 3.12:52
В этом видео вы узнаете, как сделать меню используя объединенное свойство flex.
Практический урок 4. Создаем вертикальное боковое меню используя Flex Box8:41
В этом видео вы узнаете, как сделать боковое вертикальное меню используя Flex Box CSS, свойство flex-direction и justify-content.
Практический урок 5. Создаем блок с сервисами используя Flex Box14:44
В этом видео вы узнаете, как сделать блок с сервисами используя Flex Box CSS свойство flex-direction: row-reverse.
Практический урок 6. Размещаем контент по центру используя Flex Box9:57
В этом видео вы узнаете, как разместить контент по центру внутри контейнера используя свойства Flex Box и свойство flex-direction, а также flex-flow.
Практический урок 7. Размещаем иконку по центру блока используя Flex Box4:38
В этом видео вы узнаете, как разместить иконку по центру блока используя свойства Flex Box.
Практический урок 8. Размещаем элементы по горизонтали и вертикали внутри блока16:45
В этом видеоуроке мы попрактикуемся размещать элементы внутри блока по горизонтальной (главной) оси и по вертикальной (поперечной) оси.
Практический урок 9. Создаем и адаптируем секцию Our Team используя Flex Box19:50
В этом видео вы узнаете, как создать и адаптировать секцию Our Team с помощью свойств Flex Box.
Практический урок 10. Создаем и адаптируем секцию Our Services используя FlexBox19:41
В этом видео вы узнаете, как создать и адаптировать секцию Our Services с помощью свойств Flex Box. Детальный разбор применения свойства align-items и row-gap, column-gap и gap.
Практический урок 11. Прижимаем footer (подвал сайта) к низу страницы8:04
В этом видео вы узнаете, как прижать footer к низу страницы используя Flex Box CSS.

Обзор адаптивного одностраничного сайта на 7 секций5:02
Это обзор адаптивного одностраничного сайта на 7 секций.
Подготовительные стили для сайта - Landing page preparation6:32
В этом видео уроке вы узнаете, как подготовить сайт для дальнейшей удобной работы. Я покажу как добавить подготовительные стили для сайта. Изображения можно скачать в ресурсах и добавить в папку с проектом.
Создаем адаптивное меню для сайта - Landing page Header25:50
В этом видео уроке вы узнаете, как сделать адаптивный Header для одностраничного сайта шаг за шагом.
Создаем Home Section для сайта - Landing page Section Home9:17
В этом видео уроке вы узнаете, как сделать секцию Home section шаг за шагом.
Создаем About Section для сайта - Landing page Section About13:15
В этом видео уроке вы узнаете, как сделать секцию About section шаг за шагом.
Создаем Services Section для сайта - Landing page Section Services14:32
В этом видео уроке вы узнаете, как сделать секцию Services section шаг за шагом.
Создаем Projects Section для сайта - Landing page Section Projects14:55
В этом видео уроке вы узнаете, как сделать секцию Projects section шаг за шагом.
Создаем Pricing Section для сайта - Landing page Section Pricing17:01
В этом видео уроке вы узнаете, как сделать секцию Pricing section шаг за шагом.
Создаем Review Section для сайта - Landing page Section Review15:05
В этом видео уроке вы узнаете, как сделать секцию Review section шаг за шагом.
Создаем Contact Section для сайта - Landing page Section Contact11:36
В этом видео уроке вы узнаете, как сделать секцию Contact section шаг за шагом.
Создаем Footer для сайта - Landing page Footer15:19
В этом видео уроке вы узнаете, как сделать Footer шаг за шагом.
Добавляем вендорные префиксы и тестируем отображение сайта в разных браузерах9:19
В этом видео вы узнаете, как добавить вендорные префиксы для лучшей кроссбраузерности в код, а также мы протестируем отображение сайта в разных браузерах: Google, Opera, Firefox и Microsoft Edge.
Заливаем сайт на бесплатный хостинг и тестируем отображение сайта на мобильном6:19
В этом видео вы узнаете, как залить проект на бесплатный хостинг и протестируем отображение сайта на мобильном устройстве.

Requirements

Нужны минимальные знания HTML
Нужны минимальные знания CSS Box model (блочной модели)
Нужен редактор кода: Visual Studio Code

Description

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

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

Также с помощью знаний полученных на курсе вы создадите сайт на 7 секций с использованием технологии Flex Box CSS и зальёте этот сайт на бесплатный хостинг Netlify, это позволит вам в полной мере понимать как работает Flex Box CSS и поможет закрепить полученные знания при создании реального сайта.

Также вы научитесь добавлять вендорные префиксы, чтобы весь код написанный вами мог корректно работать и отображаться во всех известных браузерах: Google Chrome, Opera, Mozilla Firefox, Safari и Microsoft Edge.

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

Спасибо и успехов в обучении)

Who this course is for:

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

Курс Flexbox CSS - CSS Flexible Box Layout

What you'll learn

Explore related topics

Course content

Теоретическая часть курса Flex Box CSS18 lectures • 2hr 56min

Практическа часть курса Flex Box CSS11 lectures • 2hr 19min

Адаптивный одностраничный сайт на 7 секций + footer13 lectures • 2hr 44min

Полезные ресурсы1 lecture • 8min

Проверка знаний - тесты0

Requirements

Description

Who this course is for: