Раніше підключення сторонньої бібліотеки вимагало завантаження архівів, правильного розподілу файлів по папках проекту та тривалого читання сухої документації англійською мовою. Сьогодні, завдяки хмарним середовищам та потужним ШІ-моделям, цей процес став інтелектуальним та займає лічені хвилини. ШІ виступає наставником, він не просто генерує код ініціалізації, а й адаптує його під унікальні UI-компоненти, налаштовує складні візуальні ефекти та допомагає уникнути конфліктів скриптів. Звісно, що ШІ надає швидкість підключення, але розуміння архітектури, правильного завантаження ресурсів (CDN) та логіки ініціалізації залишається за розробником.

Стек інструментів для роботи

• StackBlitz. Хмарне середовище розробки (IDE) для створення, тестування та розгортання веб-додатків.
• Локальне інженерне середовище Visual Studio Code (VS Code).
• Інструменти доставки коду (CDN) unpkg/cdnjs/jsDelivr.
• JS-бібліотеки для інтеграції: Swiper.js, Fancybox (v5), Typed.js.
  • Swiper.js. — сучасний та потужний мобільний слайдер/карусель.
  • Fancybox (v5) (від SphinxIT) або Lightbox2 — бібліотеки для створення інтерактивних модальних вікон перегляду зображень.
  • Unite Gallery - альтернативний плагін для побудови адаптивних медіагалерей).
  • Typed.js - бібліотека, що надає можливість реалізувати ефект друкування тексту на сайті.
  • Інші популярні плагіни за вибором студента
• ШІ-асистенти. IDX AI, ChatGPT (OpenAI), Claude (Anthropic) або Gemini.
• Контроль версій та хостинг: Git (Git Bash), GitHub.
• Платформи хмарного деплою (CI/CD Pipeline): Vercel або Netlify.

JavaScript — це мова програмування, яка надає інтерактивності до веб-сайту (наприклад: ігри, реакція на натиснення кнопок, введення даних через форми, динамічна зміна стилів, анімація).

JavaScript-бібліотека — це збірка корисних функцій, методів або об'єктів, які розробник може викликати для спрощення написання коду (наприклад, для роботи з анімаціями, HTTP-запитами чи маніпуляцій з DOM-деревом). Бібліотека надає інструменти, але архітектуру коду контролює розробник.

JS-плагін — це вузькоспеціалізоване, готове рішення, що розширює можливості конкретної бібліотеки. Плагін зазвичай вирішує одну конкретну задачу: створює слайдер-карусель зображень, реалізує модальне вікно, валідує форму або додає ефект друку тексту.

Популярність використання зовнішніх JS-плагінів зростає завдяки низки переваг.

1. В популярних плагінах вже вирішено проблеми сумісності зі старими браузерами та специфічними мобільними операційними системами.
2. Популярні плагіни оптимізовані за пам'яттю, підтримують тач-жести (свайпи) на смартфонах, апаратне прискорення зсувів (CSS3 3D Transforms) та ліниве завантаження (Lazy Loading).
3. Розробники отримують надшвидке під’єднання інструментів світового рівня, а зекономлений час можна інвестувати в унікальну бізнес-логіку або інтеграцію ШІ-моделей.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Мережа доставки контенту CDN

CDN (Content Delivery Network) — це географічно розподілена мережа серверів, яка оптимізує доставку статичного контенту (шрифтів, стилів, зображень та JS-бібліотек) до кінцевого користувача. Якщо підключається, наприклад, Swiper.js через CDN (cdnjs, jsDelivr, unpkg), браузер користувача завантажує файли з найближчого до нього сервера. В цьому випадку буде надано високу швидкість завантаження, зменшення навантаження на власний сервер та високу ймовірність того, що цей файл вже є в кеші браузера користувача (якщо раніше відвідано інші сайти, що використовують цей CDN).

JS-плагіни, що базуються на jQuery (вимагають його підключення)

Slick Carousel. Популярна JavaScript-бібліотека на основі jQuery для створення адаптивних слайдерів і каруселей з підтримкою автопрогортання, навігації, сенсорного керування та різноманітних ефектів переходу. Бібліотека є простою у використанні та підходить для швидкого додавання слайдерів до вебсайтів.

Приклад Slick Carousel

Unite Gallery. JavaScript-бібліотека для створення адаптивних фотогалерей з різними варіантами відображення, зокрема сіткою мініатюр, слайдерами та плитковими макетами. Вона підтримує сенсорне керування, масштабування зображень і має широкий набір налаштувань для оформлення галерей.

Magnific Popup. Легка JavaScript-бібліотека для створення модальних вікон (lightbox), яка підтримує відображення зображень, галерей, відео, HTML-контенту та AJAX-вмісту. Вона вирізняється простотою інтеграції, адаптивністю та високою швидкодією.

Приклад Magnific Popup

Lightbox2. Проста JavaScript-бібліотека для відображення зображень в модальному вікні поверх сторінки з затемненням фону. Вона надає можливість створювати базові галереї з навігацією між зображеннями та легко інтегрується в звичайні HTML/CSS проєкти. Для роботи бібліотеки потрібне підключення бібліотеки jQuery. Підключення Lightbox2 до сторінки

<!DOCTYPE html>
  <html lang="uk">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Приклад Lightbox2</title>
 <!-- 1. Підключення CSS Lightbox2 через CDN -->
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css"
  />
 <style>
  body {
  font-family: sans-serif;
  background: #f5f5f5;
  padding: 40px;
  }
 h1 { margin-bottom: 24px; }
 /* Сітка галереї */
  .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  }
 .gallery a img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: opacity 0.2s;
  }
 .gallery a:hover img {
  opacity: 0.8;
  }
  </style>
  </head>
  <body>
	 <h1>Галерея зображень (Lightbox2)</h1>
	 <div class="gallery">
	 <!-- Одиночне зображення: data-lightbox має унікальне ім'я -->
	  <a href="https://picsum.photos/seed/a/800/600"
	  data-lightbox="photo-1"
	  data-title="Пейзаж 1">
	  <img src="https://picsum.photos/seed/a/400/300" alt="Пейзаж 1" />
	  </a>
	 <!-- Група зображень: data-lightbox однакове → утворює слайдшоу -->
	  <a href="https://picsum.photos/seed/b/800/600"
	  data-lightbox="gallery"
	  data-title="Місто вночі">
	  <img src="https://picsum.photos/seed/b/400/300" alt="Місто вночі" />
	  </a>
	 <a href="https://picsum.photos/seed/c/800/600"
	  data-lightbox="gallery"
	  data-title="Гори">
	  <img src="https://picsum.photos/seed/c/400/300" alt="Гори" />
	  </a>
	 <a href="https://picsum.photos/seed/d/800/600"
	  data-lightbox="gallery"
	  data-title="Море">
	  <img src="https://picsum.photos/seed/d/400/300" alt="Море" />
	  </a>
	 </div>
	 <!-- 2. Підключення JS Lightbox2 через CDN (перед </body>) -->
	  <!--    jQuery потрібен — Lightbox2 залежить від нього            -->
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
	 <!-- 3. Опційне налаштування Lightbox2 -->
	  <script>
	  lightbox.option({
	  resizeDuration: 200,   // швидкість зміни розміру (мс)
	  wrapAround: true,      // зациклення галереї
	  albumLabel: 'Фото %1 з %2',  // підпис лічильника
	  fadeDuration: 300      // плавне появлення
	  });
	  </script>
</body>
</html>

Приклад Lightbox

JS-плагіни, що не базуються на jQuery (працюють на чистому/ванільному JS)

Swiper.js.. Популярна JavaScript-бібліотека для створення сучасних адаптивних слайдерів і каруселей з підтримкою сенсорного керування, анімації та мобільних пристроїв. Вона легко інтегрується з HTML, CSS, JavaScript і сучасними фреймворками, такими як React, Vue та Angular. Підключення Swiper.js до сторінки

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<body>
  <div class="swiper my-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Слайд 1</div>
      <div class="swiper-slide">Слайд 2</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
  <script> 
    document.addEventListener("DOMContentLoaded", function() {
      const swiper = new Swiper('.my-slider', {
        loop: true,
        autoplay: { delay: 3000 },
        pagination: { el: '.swiper-pagination', clickable: true }
      });
    });
  </script>
</body>

Приклад Swiper.js

Fancybox (v5). Сучасна JavaScript-бібліотека для створення модальних вікон (lightbox), яка надає можливість зручно відображати зображення, відео, HTML-контент і галереї. Підтримує сенсорне керування, масштабування, анімацію, адаптивний дизайн і легко інтегрується з сучасними вебпроєктами. Підключення Fancybox до сторінки

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
</head>
<body>
  <a href="large-image1.jpg" data-fancybox="gallery" data-caption="Опис фото 1">
    <img src="thumb1.jpg" alt="Прев'ю 1">
  </a>
  <a href="large-image2.jpg" data-fancybox="gallery" data-caption="Опис фото 2">
    <img src="thumb2.jpg" alt="Прев'ю 2">
  </a>
 
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
 
  <script> 
    Fancybox.bind("[data-fancybox='gallery']", {
      Thumbs: { autoStart: true },
      Toolbar: { display: { left: ["infobar"], right: ["close"] } }
    });
  </script>
</body>

Приклад Fancybox

AOS.js (Animate On Scroll). Бібліотека, що додає сайту «дихання». Вона відстежує положення скролу сторінки і плавно анімує появу UI-блоків (плавне випливання знизу, згасання, розгортання), коли користувач доходить до них. Працює на базі CSS3 анімацій, тому є дуже швидкою. Підключення AOS.js до сторінки

<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
  <div data-aos="fade-up" data-aos-duration="1000" style="margin-top: 100vh;">
    <p>Цей блок плавно випливе знизу, коли користувач проскролить сторінку!</p>
  </div>
 
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 
  <script> 
    document.addEventListener("DOMContentLoaded", function() {
      AOS.init({
        once: true // Анімація програється лише один раз при першому скролі 
      });
    });
  </script>
</body>

Typed.js. JavaScript-бібліотека, яка створює ефект “друкування тексту” в реальному часі, коли символи з’являються один за одним як під час набору на клавіатурі. Вона часто використовується для заголовків і лендингів, щоб додати динамічності та привернути увагу користувача.

Покроковий хід виконання роботи

Етап I. Прототипування та ШІ-генерація в StackBlitz

Крок 1. Підготовка робочого простору

1. Перейти на сайт stackblitz.com та авторизуватися через кнопку Sign in за допомогою акаунту GitHub.
2. В панелі керування натиснути New Project та обрати шаблон Vite/HTML або Static Web.
3. Відкриється хмарна IDE. Очистити дефолтні файли й підготувати базову структуру у файлі index.html.

Крок 2. Робота з CDN. Концепція та реалізація

CDN (Content Delivery Network) — це мережа серверів, що географічно розподілені по світу і надають можливість миттєво завантажувати файли бібліотек з найближчого до користувача сервера.

Додати в тег <head> сторінки стилі CSS для плагінів:

HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />

Перед закриваючим тегом </body> підключити JS-файли плагінів:

HTML
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> 

Крок 3. Генерація HTML-структури та ініціалізація Swiper.js через ШІ

Будь-який сучасний плагін вимагає строгого дотримання специфікації HTML-тегів та написання об'єкта конфігурації в JavaScript.

1. Відкрити ШІ-чат (Bolt.new або Codeflow AI) на панелі StackBlitz.
2. Надіслати детальний промпт для створення секції відгуків:

"Дій як Senior Frontend Developer. Мені потрібно створити секцію відгуків для сайту кав'ярні. 
Згенеруй HTML-код слайдера відгуків, використовуючи офіційну семантичну розмітку Swiper.js версії 11 та класи Tailwind CSS для стилізації. 
Кожен слайд повинен містити: текст відгуку, ім'я клієнта, його аватар з Unsplash, рейтинг 5 зірок. 
Додай стрілки навігації, пагінацію. 
Код має бути повністю адаптивним."

3. ШІ згенерує HTML-розмітку, яку потрібно вставити в index.html:

HTML
<section class="py-16 bg-neutral-900 text-white">
	<div class="max-w-6xl mx-auto px-4">
		<h2 class="text-4xl font-extrabold text-center mb-12">Відгуки гостей</h2>

		<div class="swiper reviews-swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide bg-neutral-800 p-8 rounded-2xl border border-neutral-700 flex flex-col justify-between">
					<p class="text-neutral-300 italic mb-6">"Найкращий еспресо в місті! Затишна атмосфера та неймовірно швидкий сервіс."</p>
						<div class="flex items-center gap-4">
							<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150" alt="Клієнт" class="w-12 h-12 rounded-full object-cover border-2 border-amber-500">
							<div>
							<h4 class="font-bold text-amber-500">Марія Рева</h4>
							<p class="text-xs text-neutral-400">Дизайнер</p>
						</div>
					</div>
				</div>
			</div>

			<div class="swiper-pagination"></div>
			<div class="swiper-button-prev !text-amber-500"></div>
			<div class="swiper-button-next !text-amber-500"></div>
		</div>
	</div>
</section>

4. Запитати у ШІ код ініціалізації:

"Напиши JavaScript код для налаштування Swiper.js для класу .reviews-swiper. 
Вимоги: нескінченний цикл (loop), автоматична прокрутка (autoplay) кожні 3.5 секунди із зупинкою при наведенні миші. 
Пагінація клікабельна. 
Налаштуй адаптивні брейкпоінти: мобільні — 1 слайд, планшети — 2 слайди, десктопи — 3 слайди одночасно."

5. Отриманий JS-код додати перед закриваючим тегом </body> у тег <script>.

JavaScript
document.addEventListener('DOMContentLoaded', function () {
	// Конструктор New Swiper приймає селектор та об'єкт конфігурації
	const swiper = new Swiper('.reviews-swiper', {
		loop: true,
		spaceBetween: 30,
		autoplay: {
		delay: 3500,
		disableOnInteraction: false,
		pauseOnMouseEnter: true, // Інженерний стандарт: зупинка при ховері
		},
		pagination: {
		el: '.swiper-pagination',
		clickable: true,
		},
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},
		breakpoints: {
		320: { slidesPerView: 1 },
		768: { slidesPerView: 2 },
		1024: { slidesPerView: 3 }
		}
	});
});

Крок 4. Реалізація Fancybox (v5) через ШІ

Fancybox працює за допомогою зв'язування HTML дата-атрибутів (data-fancybox) з JS-обробником подій.

1. Промпт для ШІ:

"Створи адаптивну галерею інтер'єру кав'ярні у вигляді CSS Grid з 3 картинок. 
Використовуй атрибути data-fancybox="coffee-gallery" для об'єднання їх в один альбом та додай підписи через data-caption. 
Напиши скрипт ініціалізації з ефектом розмиття (fade) та увімкненим зумом."

2. Отриманий код розмітки та скрипту:

HTML
<div class="max-w-6xl mx-auto px-4 py-16">
	<h3 class="text-3xl font-bold mb-8 text-white">Наша галерея</h3>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
		<a href="https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1200" data-fancybox="coffee-gallery" data-caption="Головний зал">
			<img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=500" class="rounded-xl shadow-lg hover:scale-[1.03] transition duration-300 w-full h-64 object-cover cursor-zoom-in" alt="Зал" />
		</a>
	</div>
</div>
<script>
	// Зв'язування плагіна з дата-атрибутом на чистому JS
	Fancybox.bind("[data-fancybox='coffee-gallery']", {
		Carousel: { Transition: "fade" },
		Images: { Panzoom: { maxScale: 3 } }
	});
</script>

Крок 5. Інтеграція ефекту друкування тексту (Typed.js)

1. Додати в Hero-секцію тег, де буде друкуватися текст: <span id="typed-text"></span>.
2. Ініціалізуйте плагін в тезі <script>:

JavaScript
const typed = new Typed('#typed-text', {
strings: ['Найкраща кава у твоєму місті.', 'Свіжа випічка щоранку.', 'Затишна атмосфера.'],
typeSpeed: 50,    // Швидкість друкування в мс
backSpeed: 30,    // Швидкість стирання
loop: true        // Зациклення ефекту
});

3. Перевірити роботу всього функціоналу на вкладці Web Preview в StackBlitz, зберегти проєкт (Ctrl+S).

Етап II. Локальна міграція коду у Visual Studio Code та робота з Git

Крок 1. Перенесення коду до Лендингу

1. Відкрити локальну папку з лендингом (розробленим в попередніх роботах) в програмі Visual Studio Code.
2. Відкрити створений в StackBlitz проєкт, скопіювати згенеровані секції HTML та вставити їх у відповідні місця локального файлу index.html.
3. Скопіювати підключення CDN-стилів у <head> та CDN-скриптів разом з блоками ініціалізації <script> в кінець файлу index.html (або винести JS в окремий файл js/main.js та підключити його).
4. Запустити локальний сервер за допомогою плагіна Live Server в VS Code, щоб переконатися, що слайдери та галереї працюють коректно на локальному комп'ютері.

Крок 2. Ініціалізація та налаштування локального репозиторію Git

1. Відкрийти вбудований термінал в VS Code або запустити термінал Git Bash і перейти в папку проєкту за допомогою команди cd.
2. Ініціалізація Git-репозиторію:
   • git init
3. Перевірити статус файлів робочої області:
   • git status
4. Додати всі створені та змінені файли до індексу (Staging Area):
   • git add .
5. Зафіксувати зміни історії, зробити коміт відповідно до інженерних стандартів:
   • git commit -m "feat: інтегровано Swiper.js, Fancybox та Typed.js через CDN"

Крок 3. Публікація репозиторію на GitHub

1. Зайти у свій профіль на github.com. Натиснути кнопку New, щоб створити новий репозиторій.
2. Назвати його (наприклад, advanced-landing-page), встановити режим Public і натиснути Create repository.
3. Скопіювати блок команд для зв'язування з існуючим репозиторієм з вікна GitHub та виконати їх в терміналі локального комп’ютера:
   • git remote add origin https://github.com/ваш-логін/назва-репозиторію.git
   • git branch -M main
   • git push -u origin main
4. Оновити сторінку на GitHub, щоб переконатися, що весь код успішно завантажено в хмару.

Етап III. Хмарний деплой проєкту (Vercel/Netlify)

Для публікації сучасних вебпроєктів стандартні сервери хостингу заміняються на платформи автоматичного деплою з підтримкою Edge-мереж та автоматичного відстеження оновлень через Git. На вибір студента пропонується розгортання через сервіс Vercel або Netlify.

Варіант А. Розгортання через платформу Vercel

1. Перейти на сайт vercel.com та натиснути Sign Up або Log In, обрати спосіб авторизації Continue with GitHub.
2. Після успішного входу на головній панелі (Dashboard) натиснути кнопку Add New... -< Project.
3. В списку репозиторіїв з GitHub знайти проєкт advanced-landing-page та натиснути кнопку Import.
4. У вікні налаштувань конфігурації (Configure Project)
   • Поле Framework Preset залишити як Other (оскільки проєкт на чистому HTML/CSS/JavaScript).
   • Поле Root Directory залишити за замовченням (./).
5. Натиснути кнопку Deploy. Платформа запустить хмарний збирач, зчитає файли з коміту гілки main та проведе оптимізацію.
6. За 30–60 секунд з'явиться вікно успішного релізу з візуальним превью та унікальним посиланням (https://назва-проєкту.vercel.app), яке є Live Demo завантаженого лендингу.

Варіант Б. Розгортання через платформу Netlify

1. Перейти на сайт netlify.com та авторизуватися через кнопку Log In за допомогою акаунта GitHub.
2. На сторінці Dashboard натиснути кнопку Add new site -< Import an existing project.
3. В списку провайдерів обрати GitHub, підтвердити доступ платформи до ваших сховищ.
4. Обрати репозиторій advanced-landing-page.
5. На екрані налаштувань (Deploy settings) переконатися, що в полі Branch to deploy вказано гілку main. Поля збірки (Build command та Publish directory) залишити порожніми.
6. Натиснути кнопку Deploy site.
7. Перейти на вкладку Site configuration, щоб за бажанням змінити випадково згенероване ім'я домену на власне (наприклад, my-coffee-landing.netlify.app).

Перевага підходу CI/CD (Continuous Integration/Continuous Deployment)

З цього моменту ваш репозиторій зв'язаний з хмарою. Якщо змінити будь-який рядок коду локально у VS Code, зробити коміт та надаслати його на GitHub за допомогою команди:

git push origin main

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

Приклад реалізованого алгоритму (відкрити в новому вікні)

Створено сучасну та адаптивну вебсторінку для кав'ярні, яка наочно демонструє інтеграцію всіх перелічених в лабораторній роботі JS-плагінів: Swiper.js, Fancybox v5 та Typed.js.

Для оформлення використано сучасний дизайн на базі Tailwind CSS, а також інтегровано спеціальну інтерактивну "Панель моніторингу ЛР №10", яка надає студентам можливість протестувати працездатність скриптів та побачити симуляцію процесу Git-комітів та деплою.

Вміст згенерованого файлу:

1. Реалізація Typed.js
   • В секції Hero анімується три різні рекламні слогани для кав'ярні, демонструючи тонке налаштування затримок (backDelay), швидкості друку (typeSpeed) та зациклення ефекту (loop).
2. Галерея з Fancybox v5 (Vanilla JS)
   • Створено сітку зображень на базі CSS Grid. Всі фотографії мають однаковий атрибут data-fancybox="coffee-gallery", завдяки чому вони об'єднані в єдиний інтерактивний альбом. Користувач може зумити картинки та гортати їх з ефектом плавного згасання (fade).
3. Інтерактивний Swiper.js v11
   • Секція відгуків містить слайдер, який показує 1 слайд на мобільних телефонах, 2 слайди на планшетах та 3 слайди на моніторах завдяки налаштованим брейкпоінтам (breakpoints).
   • Реалізовано автопрогортання зі зручною фічею pauseOnMouseEnter — коли користувач наводить курсор на картку відгуку, гортання зупиняється.
4. Симулятор Git Терміналу та DevOps (CI/CD):
   • Щоб лабораторна робота була максимально інтерактивною, додано віджет-симулятор терміналу. Студент може вводити справжні команди Git (git status, git add ., git commit, git push), спостерігаючи за реакцією системи та хмарним автодеплоєм на Vercel/Netlify.

Завдання на лабораторну роботу

1. В своєму локальному вебпроєкті (файли ЛР №7) створити окрему інтерактивну секцію («Портфоліо», «Галерея робіт» або «Відгуки клієнтів»).
2. За допомогою сервісу StackBlitz та ШІ-асистентів розробити прототип цієї секції.
3. Інтегрувати в проєкт щонайменше 2 плагіни на чистому JS (Vanilla JS) через технологію CDN, наприклад:
   • Компонент 1. Інтерактивний слайдер Swiper.js (мінімум 5 слайдів) з увімкненим автоплеєм, адаптивністю, стрілками та пагінацією.
   • Компонент 2. Галерея зображень Fancybox (групування в єдиний альбом через data-fancybox, налаштування ефектів переходу та зуму).
4. Завдання підвищеної складності (на вибір). Додатково підключити третю бібліотеку, наприклад, Typed.js для створення текстової друкованої анімації в головному блоці (Hero) сайту або AOS.js для анімації елементів при скролі.
5. Перенести весь відлагоджений код до робочого середовища в VS Code.
6. Ініціалізувати репозиторій Git, зафіксувати зміни історії коммітів та опублікувати код на GitHub.
7. Реалізувати деплой проєкту на хмарну платформу Vercel або Netlify за допомогою автоматичного пайплайну з GitHub та перевірити роботу оновлень коду.

Зміст звіту та технічні фінальні артефакти

Фінальні технічні артефакти (що має бути створено)

1. Локальний робочий проєкт. Повністю функціональна папка проєкту (або робочий простір в хмарному IDE StackBlitz, що містить чисту HTML-сторінку з підключеними через CDN стилями й скриптами.
2. Ініціалізований та налаштований віджет. Робоча карусель/галерея (Swiper, Slick або Unite Gallery), яка коректно відображає унікальні графічні активи (UI assets), що згенеровані в ЛР №3, не ламає верстку сторінки та має адаптивні брейкпоінти (перевіряється через мобільний режим DevTools).
3. Опублікований проект на хмарному хостингу.

Структура звіту з лабораторної роботи

1. Титульний лист з назвою лабораторної роботи, даними студента та обраною бізнес-тематикою.
2. Коротке обґрунтування вибору конкретного плагіна (чому обрано саме Swiper чи Slick для цієї бізнес-тематики).
3. Посилання на створений публічний репозиторій на GitHub.
4. Посилання на опублікований живий сайт на Vercel або Netlify (Live Demo).
5. Технічний скриншот-звіт:
   • Скриншот робочого середовища StackBlitz
   • Скриншот терміналу VS Code з виконаними командами Git
   • Скриншот панелі управління репозиторію на GitHub та успішний статус збірки в панелі деплою (Vercel/Netlify).
6. Вихідний код. Фрагмент HTML/JS коду, який відповідає за підключення бібліотек через CDN та безпосередній блок скрипту з об'єктом конфігурації (налаштуваннями) плагіна.
7. Висновок щодо архітектурних переваг бібліотек Vanilla JS над jQuery та принципів роботи CI/CD систем.
8. Промпт-паспорт (Prompt Log). Точні скріншоти або тексти промптів, де зафіксовано процес генерації коду плагінів та ініціалізації.

Критерії оцінювання лабораторної роботи

• Технічна коректність підключення. Всі скрипти та лінки підключено в правильних секціях документа через надійні CDN. Відсутні помилки в консолі браузера (DevTools).
• Рівень кастомізації та UX плагінів. Налаштовано адаптивність слайдера під мобільні екрани (Breakpoints), додано інтерактивні ефекти, коректно працюють елементи навігації (стрілки/крапки). Галерея підтримує гортання та тач-жести на смартфонах.
• Оформлення та структура коду. Код структурований, скрипти ініціалізації обгорнуто в обробник події завантаження DOM (DOMContentLoaded).
• Промпт-паспорт. Наявність в звіті логу запитів до ШІ, які демонструють процес рафінування та уточнення параметрів конфігурації.
• Захист роботи. Усна відповідь на запитання викладача.

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

1. Чому файли стилів (CSS) плагіна потрібно підключати в тезі <head>, а JS-файли скриптів — в самому кінці сторінки перед закриваючим тегом </body>?
2. Що таке CDN (Content Delivery Network) і яка головна перевага його використання для підключення таких плагінів, як Swiper чи Slick?
3. Якщо плагін (наприклад, Slick Carousel або Unite Gallery) базується на jQuery, чому суворо заборонено міняти місцями теги <script> підключення jQuery та самого плагіна?
4. Що таке «об'єкт конфігурації» в JavaScript і яку роль він має під час ініціалізації сторонніх плагінів?
5. Що станеться, якщо забути обгорнути код ініціалізації jQuery-плагіна в обробник події $(document).ready()?
6. Як в плагінах (наприклад, Swiper) реалізується адаптивність під мобільні пристрої та планшети? Який параметр за це відповідає?
7. Під час захисту викладач зменшує вікно браузера, і картинки в каруселі Slick починають наповзати одна на одну або стають занадто вузькими. Якої помилки в CSS-стилізації припустився студент?
8. Що робить функція autoplay в налаштуваннях слайдера та який супутній параметр зазвичай регулює швидкість цієї дії?
9. Як за допомогою вбудованого інструмента інспектора браузера (DevTools) перевірити, чи коректно працює тач-скрол на мобільних пристроях для віджета?
10. В чому полягає різниця між параметром speed (швидкість) та параметром autoplay speed/delay (затримка автоплею) в конфігурації слайдера?
11. Що таке ефект FOUC (Flash of Unstyled Content) стосовно слайдерів і як студент може запобігти йому за допомогою базового CSS?
12. Ви скопіювали промпт для ініціалізації галереї Unite Gallery, але на сторінці нічого не з'явилося, а в консолі горить помилка jQuery is not defined. Що це означає?
13. Якщо в об'єкті конфігурації виставити параметр infinite: true (або loop: true), як змінюється поведінка каруселі під час досягнення останнього слайда?
14. В чому головна технологічна відмінність сучасного плагіна Swiper.js від старішого Slick Carousel в контексті архітектури коду?

Глосарій термінів. Інтеграція динамічних медіакомпонентів та JS-бібліотек

Рекомендовано для вивчення перед захистом Лабораторної роботи №10