nmk

Лабораторне заняття №7 (2 години). Робота з SVG, іконками та медіа-запитами.

Мета

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

План

1. Різниця між растровою графікою (PNG, JPG) та векторною (SVG).
2. Підключення векторних іконок через зовнішні бібліотеки (Phosphor, Heroicons, FontAwesome) або напряму (Inline SVG).
3. Додавання іконки кошика в Header (кнопку), та логотипів месенджерів у Footer.
4. Створення кнопки “Бургер-меню” (Hamburger Menu) для мобільної версії max-width: 768px.
5. Полірування відступів (padding, margin) та типографіки для малих екранів.

Хід роботи

Увага: Продовжуємо фіналізувати зовнішній вигляд інтернет-магазину “TechShop”.

1. Додавання SVG-іконок:
   • Найпростіший спосіб сучасної розробки — скопіювати код іконки прямо в HTML (Inline SVG). Зайдіть на сайт Heroicons.com або Phosphor Icons.
   • Знайдіть іконку кошика (shopping-cart). Скопіюйте її код (кнопка Copy SVG).
   • У вашому index.html вставте цей код у <header> всередину кнопки кошика замість тексту (або поруч з текстом):

     <button class="btn btn-cart">
       <!-- Ваш скопійований SVG буде тут. Зменшіть його width та height до 24px -->
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
         width="24"
         height="24"
       >
         ...
       </svg>
       Кошик
     </button>
     

   • Застосуйте display: flex; align-items: center; gap: 0.5rem; до класу .btn-cart, щоб іконка та текст стали рівно в рядок горизонтально.
2. Іконки соціальних мереж у Footer:
   • Знайдіть SVG-іконки Instagram, Telegram чи YouTube.
   • Вставте їх в список у вашому <footer>:

     <ul class="social-links">
       <li>
         <a href="#"><svg>...</svg></a>
       </li>
       <li>
         <a href="#"><svg>...</svg></a>
       </li>
     </ul>
     

   • За допомогою CSS змініть їх колір (для векторної графіки, яка вбудована як inline SVG, колір задається властивістю fill: var(--primary-color) або stroke замість color). Задайте їм стан :hover.
3. Мобільне меню (Бургер) — Розмітка:
   • Що робити з горизонтальним списком розділів (<ul>) на телефоні? Він не влазить.
   • У <header> перед вашою навігацією додайте іконку бургера (3 горизонтальні лінії):

     <!-- Кнопка має бути прихована на комп'ютерах! -->
     <button class="menu-toggle" aria-label="Відкрити меню">
       <svg width="24" height="24">...</svg>
     </button>
     

4. Адаптація та Медіа-запити (Mobile First vs Desktop First):
   • У style.css сховайте бургер-меню для всіх пристроїв за замовчуванням:

     .menu-toggle {
       display: none;
       background: none;
       border: none;
       cursor: pointer;
     }
     

   • Але в кінці файлу, всередині вашого медіа-запиту @media screen and (max-width: 768px), покажіть цю кнопку і повністю сховайте <ul> з посиланнями:

     @media screen and (max-width: 768px) {
       .menu-toggle {
         display: block; /* Показуємо бургер */
       }
       .main-nav ul {
         display: none; /* Ховаємо горизонтальне меню. У JS семестрі ми навчимось відкривати його по кліку */
       }
     
       /* Зменшуємо шрифти для мобільних */
       h2 {
         font-size: 1.5rem;
       }
       .page-layout {
         padding: 1rem; /* Відступи на телефоні мають бути менші */
       }
     }
     

5. Збереження (Commit & Push):
   • Перевірте на мобільному емуляторі (DevTools), що іконка бургера з’являється, горизонтальне меню зникає, а картки товарів та іконки соцмереж виглядають гармонійно.
   • Виконайте git add . та git commit -m "Add inline SVGs and refine mobile responsive view".
   • Запушіть зміни і злийте в main.

Результат

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

Контрольні питання

1. В чому ключова різниця між зображенням у форматі .jpg та .svg (розмір, якість при масштабуванні, можливість редагування коду)?
2. Чому спосіб вбудовування “Inline SVG” (прямо в HTML-код) є набагато гнучкішим, ніж вставка через тег <img src="icon.svg">?
3. Якою CSS властивістю можна перефарбувати Inline SVG (його лінію та внутрішню заливку)? Чи спрацює властивість color або background-color?
4. Яка мета кнопки “Hamburger menu” на сучасних мобільних інтерфейсах?
5. Що станеться, якщо у тегу <meta name="viewport" content="width=device-width, initial-scale=1.0"> (в <head>) випадково видалити width=device-width? Як виглядатиме сайт на мобільному пристрої?