H1

Тепер коли твоя сторінка має стилі, залишилося додати їй трохи інтерактивності. Так її стане ще й цікаво використовувати :)

В цьому уроці ти дізнаєшся про використання CSS для створення естетичного дизайну сторінок і спробуєш впровадити кілька шляхів взаємодії з користувачем. Наведення, або ховер, — один із найпростіших способів оживити статичний макет. Ти познайомитеся з кількома іншими властивостями стилів, як-от тіні, масштабування, обертання тощо. Уперед!

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

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

‍

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

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

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

‍

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

1. Практика
2. Виконане завдання

‍

Практика

Спробуймо зробити сторінку більш інтерактивною у кілька кроків.

1. Додай cursor: pointer; до .card . Це замінить курсор за замовчуванням на іконку руки і допоможе користувачам зрозуміти, що з елементом можна взаємодіяти.

2. Тепер можемо зробити ховер. Це стан елемента, коли користувач наводить на нього курсор миші. Для цього стану ми можемо вказати будь-які CSS-стилі. Наприклад, змінимо background-color картки та збільшимо її.

3. Додамо transition на збільшення. Це не масштабує елемент одразу після наведення курсора, а поступово збільшує його (наприклад, протягом 0,2 секунди). Виглядає набагато краще, ніж раптовий зум. Можна також спробувати інші значення часу.

4. Додамо легку тінь навколо картки під час наведення, щоб вона була виразнішою. Рамка в нас фіолетова, тому використаємо цей же колір для тіні та відрегулюємо значення.

5. Більше про застосування тіней тут: https://css-tricks.com/almanac/properties/b/box-shadow/

6. Пропонуємо зазирнути також до галереї цікавих тіней: https://alligator.io/css/box-shadow-examples/

‍

Приклад:

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

‍

Можемо спробувати щось більш незвичайне. Як щодо поворотів?

‍

Ми можемо створити кола за допомогою CSS і div. Наприклад, створимо жовте коло під описом картки. Нам просто потрібен порожній div і кілька CSS-правил:

‍

Можемо знов використати ту ж техніку, але цього разу створимо велике коло за картками.

Створи щось на свій смак і спробуй використати різні стилі й типи елементів.

‍

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

‍

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

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

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

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