CSS Flexbox

Про курс

Flexbox – це сучасний інструмент верстання, який дозволяє швидко створювати складні гнучкі макети та функції, спрощуючи вирішення завдань, для яких раніше ми використовували чистий CSS.

Даний курс дозволить вам на практиці розглянути прийоми використання технології Flexbox. Ви познайомитесь із загальними поняттями та принципами логіки роботи технології, навчитеся застосовувати основні властивості, розглянете способи взаємодії між елементами, побачите, як можна комбінувати медіа запити з флексбоксом та багато іншого.

Цей курс входить до спеціальності:

Frontend Developer Верстальник сайтів React Developer Ruby Developer

Попередні Вимоги

Базові знання верстання HTML & CSS. Бажано ознайомлення з технологією верстання Flexbox

Ви навчитеся

- Виконувати верстання хедера макета та меню в ньому.
- Створювати просте меню на сайті за допомогою флексбокс технології.
- Використовувати властивості flex-grow та flex-shrink для створення «гумового» верстання.
- Виконувати планшетну та мобільну версії простої сторінки без використання додаткових правил медіа запитів.
- Розуміти функції властивостей align-items, flex-wrap, order, а також їх нюанси та переваги використання.
- Працювати з додатковим потоком у flexbox, розміщуючи елементи у потрібній позиції.
- Розуміти, як, навіщо і коли потрібно змінити напрямок основного потоку.
- Розміщувати багато рядових блоків, незалежно від їхньої кількості, працюючи з флексбоксами.

Завантажити матеріали курсу Для отримання матеріалів курсу необхідно авторизуватися

Отримати сертифікат Для отримання сертифікату необхідно авторизуватися

Олексій Кучеренко

Frontend developer

Інші курси автора

Тривалість: 3 год 0 хв
Курс створено: 07.03.2023
Уроків: 4
Оновлено: 07.03.2023
Мова: українська

Що входить до курсу

4 відео уроків
Домашні завдання
Тестування
Сертифікат

ДИВИТИСЯ

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

№1

Ознайомлення з Flexbox

0:30:26

Матеріали уроку Домашні завдання Тестування

Мета уроку - познайомитися з основами технології Flexbox, загальними поняттями та принципами логіки роботи технології Flexbox, виробити розуміння того, як використовувати Flexbox на практиці. Познайомитись із початковою простою структурою перед створенням лендингу сторінки (односторінковий лендинг) та розібратися з тим, як робити перші кроки при верстанні. Також розглянути створення простого меню на сайті з використанням флексбокс технології.

Верстання трьох секцій

1:06:22

Матеріали уроку Домашні завдання Тестування

Мета уроку - познайомитися з основними властивостями, що використовуються на практиці, і отримати розуміння того, коли їх використовувати. Розібрати, які є можливості у властивостей align-items, flex-wrap, order, а також їх нюанси та переваги використання.

Зміна потоку та медіа запити

0:33:16

Матеріали уроку Домашні завдання Тестування

Мета уроку – розібрати, як, навіщо і коли потрібно змінити напрямок основного потоку. Переглянути, які аспекти з'являються при зміні потоку. Розглянути, якою стає поведінка у властивості margin з flexbox елементами, яким чином можна використовувати медіа запити при верстанні макета, використовуючи Flexbox технологію. Ознайомитися з властивістю flex-direction і тим, як змінює свою поведінку властивість margin з використанням флексбоксів.

Адаптивне верстання сайту

0:50:24

Матеріали уроку Домашні завдання Тестування

Мета уроку - познайомитися з властивостями flex-grow і flex-shrink для створення «гумового» верстання. Ознайомитись із процесом завершення планшетної та мобільної версії простої сторінки без використання додаткових правил медіа запитів.

Наступний курс:

JavaScript Стартовий

ПОКАЗАТИ ВСЕ