Ефективний лендинг подібний до структури класичної презентації або комерційної пропозиції і складається з обов'язкових змістовних блоків (секцій).

1. Header (Шапка сайту). Містить логотип, мінімалістичне меню (найчастіше у вигляді якірних посилань для скролу в межах сторінки) та швидку кнопку дії.
2. Hero Section (Перший екран/Головна секція). Найважливіша частина, де за статистикою потрібно протягом 3 секунд утримати увагу користувача. Складається з:
   • H1 (Унікальна торгова пропозиція). Чіткий, сильний заголовок.
   • Subheadline (Підзаголовок). Розшифрування заголовка (яку проблему вирішує продукт).
   • CTA (Call to Action) Button. Яскрава кнопка з закликом до дії.
   • Visual Assets. Тематичне зображення, інтерактивний елемент або ШІ-генерований відео-бекграунд.
3. Features/Benefits Block (Переваги). Пояснення, чому цей продукт або спільнота (наприклад, студентський гурток «Автоматизація веб-розробки») є цінними. Зазвичай реалізується у вигляді сітки карток.
4. Social Proof (Соціальний доказ). Відгуки, логотипи партнерів, лічильники, сертифікати або поточні результати діяльності, що викликають довіру.
5. Lead Capture Form (Форма захоплення потенційних клієнтів). Поля для введення даних (емейл, телефон, ім'я) з фінальним закликом.
6. Footer (Підвал сайту). Копірайт, посилання на соціальні мережі та юридичні документи (Privacy Policy).

Працюючи в генеративному середовищі (v0.dev, ChatGPT) методом ітераційного промптингу, майбутній спеціаліст повинен фокусуватися на трьох китах:

• UX-емпатія (Користувацький досвід). Контент має відповідати потребам цільової аудиторії. Не потрібно, щоб ШІ генерував абстрактні тексти типу «Ми найкраща компанія в світі». Використовуйте реальні тексти та контент-карту, що напрацьовані в ЛР №2.
• Візуальний фокус та ієрархія. Око користувача має чітко бачити, де головне, а де другорядне. Кнопки CTA повинні контрастувати з основним фоном сайту і миттєво зчитуватися.
• Контекстна стабільність. Під час точкового коригування елементів інструментом Pick Element слідкувати, щоб ШІ не порушив загальну дизайн-систему (колірну палітру, шрифти, радіуси закруглення елементів), затверджену в ЛР №4.

Процес створення сторінки в форматі HTML/Tailwind за допомогою ШІ-генераторів інтерфейсів складається з наступних кроків:

[Master Prompt] ──> [Нульова версія (v0)] ──> [Pick Element/Точкове редагування] ──> [Додавання інтерактивності] ──> [Експорт HTML]

1. Ініціалізація (Глобальний промпт). Надання ШІ ролі Senior frontend-розробника, опис структури сайту, колірної схеми та обмежень.
2. Аналіз первинного рендерингу. Оцінка структури, якщо ШІ глобально схибив з композицією, промпт уточнюється.
3. Ітераційне рафінування (мікро-промптинг). Використовуючи функцію вибору конкретного блоку, студент крок за кроком замінює "Lorem Ipsum" на реальні тексти, налаштовує іконки та адаптує сітки.
4. Впровадження інтерактивності. Опис логіки поведінки інтерфейсу (анімації при наведенні, відкривання модальних вікон, реакції на кліки кнопок).
5. Експорт коду. Отримання чистого, оптимізованого компонентного коду для подальшої публікації.

Технічні вимоги до згенерованого HTML/Tailwind коду

Навіть якщо код пише ШІ, відповідальність за його архітектуру несе студент. Фінальний HTML-код має відповідати наступним критеріям:

• Семантична розмітка. Замість суцільних <div> ШІ повинен використовувати теги <header>, <main>, <section>, <aside>, <footer>. Заголовки мають чітко підпорядковуватися ієрархії: один головний <h1> на сторінці, підсекції — <h2>, картки всередині секцій — <h3>.
• Utility-First підхід (Tailwind CSS). Стилізація має відбуватися виключно через атомарні класи Tailwind (наприклад, class="flex items-center justify-between p-6 bg-slate-900 text-white rounded-2xl"). Жодного кастомного інлайнового CSS-коду всередині тегу style="".
• 100% Адаптивність. Обов'язкове використання адаптивних префіксів Tailwind (sm:, md:, lg:, xl:). Вебсторінка повинна ідеально відображатися на екрані смартфона (сітки grid-cols-1 переходять в md:grid-cols-3 на десктопі), елементи не повинні поширюватися за межі екрана.
• Чистота та валідність. Код не повинен містити закоментованих компонентів, дубльованих класів чи залишків неіснуючих бібліотек.

Процес ітераційного промптингу нагадує класичний цикл розробки програмного забезпечення:

1. Промпт. Формулювання чіткої інструкції для однієї конкретної підзадачі.
2. Генерація. ШІ видає варіант HTML або CSS коду.
3. Аналіз. Розробник критично оцінює результат, перевіряє через Live Server, шукає помилки, несемантичні теги чи дублювання стилів.
4. Корекція. Написання наступного промпту, який виправляє знайдені недоліки. Цикл повторюється.

Практичний кейс. Розробка секції віджетів через ітерації

1. Ітерація 1. Створення сирої структури (Каркас)

   Промпт
   «Створи блок для віджетів погоди та курсів валют у файлі index.html. Використовуй поки що звичайні теги div, щоб просто намітити структуру.»
   

   • Результат ШІ. Генерує кілька вкладених блоків <div>.
2. Ітерація 2. Впровадження семантики та SEO

   Промпт (Корекція). 
   «Добре, а тепер перетвори цю div-мішанину на чисту семантику HTML5. Заміни зовнішній контейнер на тег aside, а кожну картку віджета загорни в окремий семантичний блок. Додай заголовок h3.»
   

   • Результат ШІ. Переписує структуру на <aside> та <section>.
3. Ітерація 3. Стилізація та підключення CSS-змінних

   Промпт (Корекція). 
   «Супер. Тепер перейди до style.css. Напиши стилі для цих віджетів, щоб вони вишикувалися вертикально з відступом 20px за допомогою Flexbox. Колір фону, тексту та бордери карток підтягни через CSS-змінні var() з :root.»
   

   • Результат ШІ. Видає чистий CSS-код, який відповідає принципу DRY.
4. Ітерація 4. Валідація та кросбраузерність

   Промпт (Корекція). 
   «Перевір цей фрагмент CSS-коду на кросбраузерність та додай легкий інтерактивний ефект підйому картки при наведенні курсору миші (hover).»
   

   • Результат ШІ. Додає властивості transition та transform: translateY().

Правила ітераційного промптингу для студента

• Контролювати контекст. Якщо ШІ на 4-й ітерації починає «забувати» стилі з 1-ї ітерації, виділити конкретний фрагмент коду в VS Code та натиснути Ctrl+I (або Cmd+I), щоб задати промпт локально.
• Вести Паспорт промптів. Для звіту з лабораторної фіксувати ці кроки. Викладач оцінює саме здатність керувати штучним інтелектом, а не майстерністю копіювати першу відповідь.
• Бути архітектором. Кожна ітерація повинна наближати код до світових стандартів чистого коду (Clean Code).

• Тег <iframe> (Inline Frame). Найпопулярніший інструмент для ембеддингу. Створює ізольоване «вікно» всередині сторінки, в якому відображається контент з іншого сайту. Прикладами використання є вбудовування інтерактивних карт (Google Maps), відео (YouTube), платіжних віджетів або форм (Google Forms).
• Теги <video> та <audio>. Нативні HTML5-теги, які використовуються, якщо мультимедійні файли зберігаються безпосередньо на локальному сервері, а не на сторонніх хостингах.
• Скрипти інтеграції (<script> та контейнер). Деякі складні інформери (погода, курси валют, чат-боти підтримки) надають JS-код, який динамічно завантажує віджет в заздалегідь підготовлений семантичний блок (наприклад, в <aside> або <section>).

Під час підготовки каркасу та роботи з ШІ-асистентом важливо дотримуватися наступних правил чистого коду:

• Семантична ізоляція. Будь-який сторонній віджет або інформер повинен міститися всередині чіткого семантичного тегу (наприклад, <section id="services"> для віджета послуг або <aside> для новинного інформера), а не губитися в "div-мішинині".
• Адаптивність через CSS Grid та Flexbox. Сторонні iframe часто мають фіксовану ширину. Щоб вони не руйнували макет сторінки, їх вбудовують в адаптивну сітку CSS Grid (наприклад, за допомогою grid-template-columns) або адаптують за допомогою Flexbox, щоб контейнер автоматично підлаштовувався під розміри екрана.
• Контроль параметрів безпеки та доступності. Для кожного <iframe> обов'язково додається атрибут title з коротким описом контенту (наприклад, title="Карта проїзду до сервісного центру"), щоб екранні рідери могли коректно його інтерпретувати. Використовуються атрибути безпеки (наприклад, пісочниці), щоб сторонній скрипт не мав несанкціонованого зв'язку з куками або DOM-деревом основного сайту.
• Керування відступами. Використання властивості gap в батьківському контейнері надає можливість надійно зафіксувати відстань між текстом та вбудованим мультимедійним блоком, запобігаючи "зсувам" дизайну.

Інтеграція інтерактивної карти (наприклад, Google Maps або OpenStreetMap) в HTML5-каркас — це класичний приклад практичного застосування технології ембеддингу, яка часто використовується на сторінках контактів або у футері сайтів.

1. HTML5 розмітка для мапи (Семантична ізоляція)

Згідно з правилами семантики, інтерактивна карта є окремим контентним або тематичним блоком. Її не можна залишати в "div-мішанині". Найкраще помістити її всередину тегу <section>, а для забезпечення доступності обов’язково додати атрибут title для <iframe>.

HTML
<section id="contacts-map" class="map-section">
	<h2>Наше розташування</h2>
	<div class="map-container">
		<iframe 
			src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2573.072235948753!2d24.029717!3d49.839683!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDUwJzIyLjkiTiAyNMKwMDEnNDcuMCJF!5e0!3m2!1suk!2sua!4v1710000000000!5m2!1suk!2sua" 
			title="Інтерактивна карта проїзду до сервісного центру" 
			allowfullscreen="" 
			loading="lazy" 
			referrerpolicy="no-referrer-when-downgrade">
		</iframe>
	</div>
</section>

Важливі атрибути для чистого HTML5.

• title="..." — необхідний для людей з порушеннями зору. Скрінрідери озвучать цей опис, пояснюючи, що знаходиться всередині фрейму.
• loading="lazy" — оптимізує завантаження сайту. Браузер почне завантажувати важкі скрипти карти лише тоді, коли користувач проскролить сторінку ближче до блоку карти.

Стилізація та адаптивність за допомогою CSS

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

CSS
:root {
  --map-border-radius: 12px;
  --map-height: 450px;
  --accent-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Контейнер карти інтегруємо в загальну сітку сайту */
.map-section {
  padding: var(--main-padding);
}
/* Робимо карту гнучкою та адаптивною */
.map-container {
  position: relative;
  width: 100%;
  height: var(--map-height);
  overflow: hidden;
  border-radius: var(--map-border-radius);
  box-shadow: var(--accent-shadow);
}
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* Видаляємо дефолтну рамку iframe */
}

Приклад інтеграції інтерактивної карти

Якщо доручити інтеграцію або оптимізацію карти штучному інтелекту через AI Chat в VS Code, можна використати точний запит:

Промпт для AI: 
"Дій як Senior Frontend Developer. Мені потрібно інтегрувати <iframe> з інтерактивною картою Google Maps у секцію контактів мого index.html. 
Проведи рефакторинг коду: обгорни карту в правильний семантичний тег, додай атрибути доступності (Accessibility) та лінивого завантаження. 
В файлі style.css зроби цей iframe повністю адаптивним під мобільні екрани, використовуючи CSS-змінні з :root для відступів, радіусу закруглення кутів та тіней. Код має відповідати принципу DRY."

Інтеграція відео (як через сторонні хостинги YouTube чи Vimeo, так і завантаженого безпосередньо на веб-сервер) — це ще один важливий аспект мультимедійного ембеддингу в сучасній верстці.

Залежно від технічного завдання (наприклад, фонове відео для hero секції, презентаційне відео в блоці послуг чи відеовідгук), підходи до написання чистого коду дещо відрізняються.

Варіант 1. Вбудовування стороннього відео (YouTube, Vimeo тощо)

Як і у випадку з інтерактивними картами, тут використовується тег <iframe>. Проте, відео вимагає суворого контролю пропорцій екрана (зазвичай 16:9), щоб навколо плеєра не з'являлися чорні смуги.

HTML5 розмітка (Семантичний блок). Загортаємо відео в логічний тег <article> (наприклад, якщо це картка окремої послуги чи відгуку) або <section>.

HTML
<section id="promo-video" class="video-section">
	<h2>Відеопрезентація нашого сервісу</h2>
	<div class="video-responsive">
		<iframe 
			src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
			title="Презентаційне відео про ремонт техніки в нашому сервісному центрі" 
			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
			allowfullscreen
			loading="lazy">
		</iframe>
	</div>
</section>

CSS (Адаптивність 16:9 за допомогою сучасних властивостей). Замість старих "хаків" з відступами, в сучасному CSS використовується властивість aspect-ratio.

CSS
:root {
  --video-max-width: 800px;
  --video-radius: 16px;
  --video-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.video-section {
  padding: var(--main-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-responsive {
  width: 100%;
  max-width: var(--video-max-width);
  /* Автоматично тримає пропорцію екрана 16:9 на будь-яких мобільних пристроях */
  aspect-ratio: 16 / 9; 
  overflow: hidden;
  border-radius: var(--video-radius);
  box-shadow: var(--video-shadow);
}
.video-responsive iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Приклад вбудованого стороннього відео з YouTube

Варіант 2. Нативне HTML5-відео (Локальні файли)

Якщо відео зберігається на сервері (наприклад, коротка зациклена анімація на фоні hero секції), використовується тег <video>.

HTML
<section class="hero-section">
	<video autoplay loop muted playsinline class="hero-bg-video">
		<source src="assets/videos/hero-background.mp4" type="video/mp4">
		<source src="assets/videos/hero-background.webm" type="video/webm">
		Ваш браузер не підтримує тег відео.
	</video>

	<div class="hero-content">
		<h1>Професійний ремонт вашої техніки</h1>
		<p>Якість, що перевірена часом та штучним інтелектом.</p>
	</div>
</section>

Важливі атрибути для нативного відео:

• autoplay — запускає відео автоматично.
• muted — Критично важливо! Сучасні браузери (Chrome, Safari, Edge) блокують автоматичне відтворення відео, якщо в ньому увімкнений звук. Без muted відео просто застигне першим кадром.
• loop — зациклює відтворення.
• playsinline — надає відео можливість програватися прямо на сторінці мобільного телефону, а не відкриватися на весь екран в системному плеєрі iOS/Android.

Якщо доручити інтеграцію відео штучному інтелекту через AI Chat в VS Code, можна використати точний запит:

Промпт для ШІ. 
"Дій як Senior Frontend Developer. Мені потрібно інтегрувати YouTube-відео у файл index.html всередину секції послуг. 
Зроби HTML-структуру семантичною, додай обов'язковий атрибут доступності title та ліниве завантаження loading="lazy". 
В файлі style.css реалізуй адаптивність цього плеєра, використовуючи сучасну властивість aspect-ratio: 16/9. 
Винеси максимальну ширину та закруглення кутів відео у змінні в :root. 
Переконайся, що код чистий і не має дублювання."

Приклад нативного HTML5-відео

Безперервний бекграунд (loop)

Інтеграція динамічних інформерів (віджетів погоди, точного часу або курсів валют) кардинально відрізняється від карт чи відео. Оскільки дані в таких інформерах постійно змінюються, вони майже ніколи не будуються на базі статичних iframe.

Найчастіше сторонні сервіси надають комбіновані JavaScript-скрипти, які завантажують актуальні дані через API та рендерять інтерфейс прямо всередині сторінки.

1. HTML5 розмітка (Підготовка семантичного контейнера)

Динамічні інформери зазвичай виконують роль додаткового, супутнього контенту. Згідно з правилами HTML5, найкращим місцем для них є бічна панель (<aside>) або спеціальний блок у футері (<footer>).

Замість "div-мішанини", потрібно створити чітко зафіксований семантичний вузол, всередині якого скрипт розгорне віджет:

HTML
<aside class="informer-sidebar">
	<section class="widget-card weather-widget">
		<h3>Погода у місті</h3>
		<div id="weather-informer-container">
			Завантаження погоди...
		</div>
	</section>

	<script src="https://weather-service.com/api/widget.js" async defer></script>
</aside>

Атрибути async та defer змушують браузер завантажувати сторонній скрипт у фоновому режимі. Сайт не «зависне» під час завантаження, навіть якщо сервер інформера погоди буде працювати повільно.

Віджет покладено в <aside> (сайдбар) та загорнуто в тематичний <section>, що надає семантичну ізоляцію.

2. Стилізація та архітектура CSS-змінних

Зовнішні віджети часто приходять зі своїми шрифтами та кольорами, які можуть руйнувати дизайн-систему сайту. Щоб підлаштувати інформер під колірну гаму проєкту, варто перевизначити стилі через :root:

CSS
:root {
  --widget-bg: #ffffff;
  --widget-text: #2c3e50;
  --widget-border: 1px solid #e2e8f0;
  --widget-radius: 12px;
}
/* Організовуємо розташування віджетів за допомогою Flexbox або Grid */
.informer-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Захищає віджети від налізання один на одного */
  padding: var(--main-padding);
}
.widget-card {
  background-color: var(--widget-bg);
  color: var(--widget-text);
  border: var(--widget-border);
  border-radius: var(--widget-radius);
  padding: 15px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.widget-card:hover {
  transform: translateY(-2px); /* Легкий інтерактивний ефект */
}

Якщо доручити генерацію або оптимізацію блоку з інформерами штучному інтелекту через AI Chat в VS Code, можна використати точний запит.

Промпт для ШІ. 
"Дій як Senior Frontend Developer. Мені потрібно інтегрувати динамічний інформер курсу валют та погоди у файл index.html. Розмісти їх всередині семантичного тегу <aside> (для сайдбару). 
Підготуй чисту HTML-структуру з контейнерами та підключи зовнішній скрипт асинхронно за допомогою async. 
В файлі style.css стилізуй ці віджети як картки, використовуючи Flexbox для їх вертикального вирівнювання та властивість gap. Всі кольори фону, тексту та закруглення кутів карток зв'яжи з CSS-змінними в :root, щоб дизайн відповідав загальному стилю сайту. 
Код має бути лаконічним і без дублювання."

Приклади уставляння інформації з соціальних мереж

Переглянути цей допис в Instagram

Допис, поширений ECOLINES (@ecolinesbus)

Інформери

Інтерактивні віджети

See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen.

Codepen.io

FreeCurrencyRates.com

В сучасних ШІ-інструментах (GitHub Copilot, Codeium, Claude Code) цей метод реалізовано через інтерактивне виділення коду:

• Мишкою або гарячими клавішами виділяється рядок або блок коду (наприклад, несемантичну картку <div>).
• Натиснення комбінації Ctrl+I (або Cmd+I на macOS) для виклику вікна швидких дій ШІ.
• ШІ автоматично обмежує свій контекст лише цим фрагментом (працює індикатор Pick element або Selection).
• Розробник пише точковий промпт на зміну лише цього елемента.

Точковий рефакторинг є значно ефективнішим за повний перепис.

• Захист від «галюцинацій» та втрати логіки. Якщо ШІ працює з файлом на 300 рядків, він може випадково змінити класи в іншому кінці документа. Точковий рефакторинг гарантує, що решта коду залишиться недоторканою.
• Ші працює швидше й точніше, оскільки фокусується на 2-3 рядках, аналізуючи лише їхні стилі та вкладеність.
• Глибока оптимізація допомагає ідеально вичистити дрібні елементи, на які при глобальній генерації ШІ не звертає уваги (наприклад, додати правильний transition або винести колір кнопки в :root).

Практичні приклади застосування методу (Кейси для ЛР)

Кейс 1. Точкове виправлення «div-мішанини» в HTML

Наприклад, всередині макету картку відгуку створено через звичайний блок. Виділений фрагмент коду:

HTML
<div class="user-review">
	<div class="user-name">Олексій</div>
	<div class="review-text">Чудовий сервіс!</div>
</div>

Точковий промпт (Ctrl+I).

«Застосуй метод Pick element: перетвори цей блок на семантичний вузол article. Імена авторів та відгуки мають бути оформлені за стандартами W3C для семантики відгуків.»

Результат рефакторингу:

HTML
<article class="user-review">
	<header><strong class="user-name">Олексій</strong></header>
	<p class="review-text">Чудовий сервіс!</p>
</article>

Кейс 2. Оптимізація та впровадження принципів DRY в CSS

На сторінці є кнопка, колір якої прописано жорстким шістнадцятковим кодом. Виділений фрагмент коду:

CSS
.cta-button {
  background-color: #3b82f6;
  padding: 10px 20px;
  border: none;
}

Точковий промпт (Ctrl+I).

«Оптимізуй цей елемент: заміни колір фону на CSS-змінну --primary-color, а паддінги — на --main-padding. Додай плавний перехід transition для hover-ефекту.»

Результат рефакторингу.

CSS
.cta-button {
  background-color: var(--primary-color);
  padding: var(--main-padding);
  border: none;
  transition: background-color 0.3s ease;
}

• Глобальний системний промпт (Master Prompt) — комплексний інженерний запит високого рівня, який завантажується на початку сесії роботи з ШІ для задання загального контексту, ролі штучного інтелекту, базової дизайн-системи, структури майбутнього сайту та жорстких технічних обмежень.
• Ітераційний промптинг (Iterative Prompting) — методологія покрокового, циклічного надання запитів ШІ-моделі (наприклад, секція за секцією), що допомагає контролювати якість генерації, вчасно виправляти помилки коду та досягати максимальної деталізації інтерфейсу.
• Метод точкового рефакторингу (Pick element) — інженерна навичка виділення конкретної ізольованої ділянки коду (окремої секції, кнопки, форми чи селектора) для спрямованого надання інструкцій ШІ без необхідності переписування або аналізу всієї вебсторінки.
• Заглушка — спеціальний тимчасовий маркер або коментар в структурі коду (наприклад, текстовий блок "Lorem Ipsum"), який вказує ШІ або розробнику на місце майбутньої інтеграції реального контенту чи стороннього віджета.
• Контекстне вікно (Context Window) — максимальний обсяг оперативної пам'яті (в токенах або символах), який ШІ-модель здатна одночасно утримувати й аналізувати в межах однієї діалогової сесії. Перевищення цього ліміту призводить до того, що ШІ «забуває» початкові інструкції чи дизайн-систему.
• Генеративний UI (Generative User Interface) — сучасний підхід у фронтенд-розробці, за якого компоненти, стилі або користувацькі інтерфейси створюються автоматично в реальному часі за допомогою ШІ на основі текстових описів або динамічного контексту користувача.
• Промпт-паспорт (Prompt Log) — обов'язковий артефакт звіту лабораторної роботи, в якому студент записує історію своїх запитів до ШІ, зафіксовані помилки генерації (галюцинації коду) та команди, за допомогою яких ці помилки було усунуто.
• Галюцинації ШІ (AI Hallucinations) — явище, за якого велика мовна модель генерує синтаксично правильний, але логічно помилковий, неіснуючий або неробочий код через занадто великий обсяг завдань або брак контексту в одному промпті.

• Лендинг (Landing Page) — односторінковий вебсайт, що побудований за чіткою маркетинговою логікою блоків, головною метою якої є спонукання відвідувача до виконання конкретної дії (реєстрації, покупки, заповнення форми).
• UX/UI-оркестрація — роль сучасного розробника, яка полягає не в ручному написанні рутинного коду, а в інтелектуальному керуванні ШІ-інструментами, критичній оцінці згенерованого результату, емпатії до користувача та контролі архітектурних рішень.
• Дизайн-система (Design System) — набір зафіксованих правил, стандартів та обмежень інтерфейсу (палітра кольорів в HEX-кодах, шрифтові пари, сітки, радіуси закруглень, правила відступів), які забезпечують візуальну єдність всього вебпроєкту.
• Головний екран (Hero Section) — перший візуальний блок сайту, який користувач бачить без прогортання сторінки. Зазвичай містить головний заголовок, фонове зображення/відео та кнопку заклику до дії.
• Заклик до дії (Call to Action, CTA) — критично важливий елемент сайту (кнопка, форма, банер), що створений для спонукання відвідувача до виконання певної дії: реєстрації, підписки, завантаження файлу чи покупки.
• Адаптивна верстка (Responsive Layout) — підхід до проектування вебсторінок, який забезпечує їх коректне, пропорційне та естетичне відображення на пристроях з будь-якими розмірами екранів (від смартфонів до 4K моніторів).
• Зсув макета (Layout Shift) — небажаний ефект у веб-дизайні, коли елементи сторінки раптово змінюють своє розташування під час завантаження через те, що важкі сторонні фрейми або зображення не мають зафіксованих пропорцій чи розмірів.

• Ембединг (Embedding) — технологія інтеграції стороннього інтерактивного або мультимедійного вмісту безпосередньо в структуру HTML-сторінки, за якої вся логіка та обробка даних виконуються на стороні сервера-провайдера.
• Тег <iframe> (Inline Frame) — базовий HTML-елемент, що призначений для створення ізольованого вікна всередині поточної вебсторінки, в якому відображається вміст абсолютно іншого зовнішнього веб-ресурсу.
• Динамічний інформер (Віджет) — автономний інтерактивний програмний модуль (наприклад, інформер погоди, курсу валют чи стрічка соцмереж), який вбудовується на сайт і динамічно оновлює дані в реальному часі за допомогою зовнішніх скриптів або API.
• Атрибут loading="lazy" — атрибут оптимізації, який вказує браузеру відкласти завантаження важких фреймів (<iframe>) або зображень до того моменту, поки користувач не наблизиться до них під час прогортання сторінки.
• Атрибут title (для iframe) — обов'язковий атрибут доступності, який містить короткий опис вмісту вбудованого фрейму для правильного зчитування екранними рідерами та пошуковими роботами Google.

• Netlify — хмарна платформна автоматизації та публікації (деплою) статичних сайтів і сучасних веб-додатків безпосередньо з репозиторіїв або локальних каталогів розробника.
• Деплой (Deployment/Розгортання) — процес перенесення напрацьованого локального коду проєкту на віддалений глобальний веб-сервер, після чого сайт стає доступним для всіх користувачів мережі Інтернет.
• Ітераційне оновлення (Deploy updates) — процес перепублікації сайту на сервері (зокрема на Netlify через Drag and drop), за якого оновлюється лише змінена папка проєкту, зберігаючи постійну адресу та налаштування ресурсу.
• SSL-сертифікат — криптографічний протокол, який забезпечує безпечне, зашифроване з'єднання між браузером користувача та веб-сервером, візуально позначаючись замком та префіксом https:// в адресному рядку браузера.
• Live Server — локальний інструмент розробника (плагін в VS Code), який запускає тимчасовий локальний сервер для тестування сайту в реальному часі, автоматично оновлюючи сторінку в браузері при будь-якій зміні в коді.