H1

Привіт. Ось ти вже на третьому занятті з фронтенду, так тримати!

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

Сьогодні ти дізнаєшся, як використовувати Flexbox для створення рядків, стовпців і сіток елементів — і що насправді це досить легко та інтуїтивно.

Орієнтовний час на опрацювання теорії: 60 хвилин. 

Орієнтовний час на виконання практики: 60-90 хвилин.

Завдання на тиждень

Усі чотири уроки ти працюватимеш над створенням свого першого вебсайту з зображеннями:

• У першому уроці ми встановимо VScode та розберемось з першими кроками в HTML. На практиці створимо сайт-галерею для улюблених зображень (майже Інстаграм :)
• У другому уроці розглянемо як за допомогою CSS додати кольорів і стилю нашому сайту;
• У третьому уроці дізнаємось що таке Flexbox та як спростити життя з його допомогою;
• У четвертому уроці ще трошки поговоримо про CSS та як за допомогою більш просунутих команд прокачати наш сайт.

‍

Структура уроку

1. Теорія Flexbox
2. Практика
3. Виконане завдання
4. Додаткові ресурси

‍

Теорія Flexbox

Перш за все, пропонуємо переглянути відео від Beetroot Academy:

‍

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

‍

Flexbox

‍

Додаткові матеріали:

Learn Flexbox in 15 minutes

Також радимо прочитати інструкцію:

• A Complete Guide to Flexbox

Практика

• Додай, будь ласка, ще одну картку із зображенням;
• Огорни всі картки в cards-container div;
• Покажи картки в ряд (не в колонку).

Приклад:

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

• Додай проміжки між картками (підказка: margin)

• Помічаєш проблему? Наші зображення мають різну орієнтацію. Це може здатися складним для виправлення, але спробуймо крок за кроком.

• Також перемістимо опис донизу, щоб він не рухав зображення.

• Додамо ще кілька карток із зображеннями
• Покажемо їх у вигляді гріда (сітки)! Додай властивість flex-wrap: wrap до .cards-container , щоб сказати Flexbox перемістити картки в новий рядок, якщо їм бракує місця.

• І от в нас вже майже готова галерея🚀

Виконане завдання: https://github.com/interstates21/personal-gallery-tutorial/tree/part-3

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

Пам'ятай, що основне при виконанні домашнього завдання - це зрозуміти, наскільки тобі цікаво займатись цією спеціальністю та продовжувати розвиватись в подальшому. 
‍
Щось не так з текстом/відео/посиланнями? - звернись до координатора курсу в телеграмі

‍Відчуваєш, що застряг(-ла) з виконанням домашнього завдання? - звернись за допомогою в студентський чат в телеграмі*

*в ось такому форматі "Привіт, в домашньому завданні : "Project Management. Урок 2" не дуже розумію що таке юзер сторіс..."

‍

Додаткові ресурси

Є класна гра для вивчення Flexbox! Спробуй пройти перші 13 уроків. 

• https://flexboxfroggy.com/