КУРС: Як створити односторінковий сайт без програмування через ChatGPT і Replit Agent

📘 3.1. Що таке "стилізація сайту"

У Модулі 2 ми створили каркас (HTML-структуру). Тепер потрібно додати візуальність — усе, що бачить користувач.

Це робиться через CSS (Cascading Style Sheets) — таблиці стилів. Але замість того, щоб писати їх вручну, ми будемо "говорити" Replit Agent, яким має бути дизайн.

🧠 3.2. Принцип: "Говори, як дизайнер, не як програміст"

Replit Agent не потребує технічних команд — йому потрібен опис, як ти хочеш, щоб сайт виглядав.

🖋️ 3.3. Базовий запит на стилізацію

Перед тим як стилізувати сайт, відкрий свій проєкт у Replit (той, що створений у Модулі 2).

1. Натисни 🤖 Ask AI (Replit Agent).
2. Введи запит:

🔍 Що зробить агент

• • Підключить шрифт Poppins у index.html.
• • Додасть CSS у style.css.
• • Створить відступи, кольори, контрастність.
• • Додасть transition для плавних ефектів.
• • Налаштує адаптивність.

🎨 3.4. Розуміння основних елементів дизайну

Щоб упевнено формулювати запити, розберімо ключові параметри, які варто згадувати у промптах.

🧩 3.5. Приклад повного запиту на стилізацію

🧱 3.6. Як Replit Agent змінює style.css

Ось приклад стилів, які агент може створити:

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #333;
}

header {
  background-color: #0066ff;
  padding: 20px;
  text-align: center;
  color: white;
  position: fixed;
  width: 100%;
  top: 0;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
}

section {
  padding: 100px 20px;
  max-width: 1000px;
  margin: auto;
}

.service {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s;
}

.service:hover {
  transform: translateY(-5px);
}

🎯 3.7. Вибір кольорових палітр

🔹 Запит до ChatGPT:

Приклад відповіді:

1. Енергійна: помаранчевий, чорний, білий.
2. Преміум: чорний, золотий, кремовий.
3. Мінімалістична: білий, сірий, синій.

Після вибору схеми — запит до Replit Agent:

🖋️ 3.8. Робота з шрифтами Google Fonts

Шрифти — це "одяг" для тексту. Їх можна обрати через ChatGPT:

Приклади:

• • Playfair Display — класичний, елегантний.
• • Poppins — сучасний і читабельний.
• • Montserrat — геометричний, технічний.

Після вибору шрифту — запит до Replit Agent:

💡 3.9. Анімації та ефекти

Тепер додамо плавні рухи та м'які ефекти.

🔹 Запит до Replit Agent:

Агент створить код на кшталт:

section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

і додасть JS, який активує клас visible при прокрутці.

📱 3.11. Адаптація дизайну для мобільних пристроїв

Щоб дизайн виглядав добре на смартфонах:

Replit автоматично додасть у CSS щось подібне:

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
  section {
    padding: 60px 10px;
  }
  h1 {
    font-size: 1.8rem;
  }
}

🧭 3.12. Перевірка результату

1. Натисни Run.
2. Відкрий сайт у новій вкладці.
3. Відкрий інструмент розробника (F12 → "Toggle Device Toolbar") і перевір, як сайт виглядає на iPhone/Android.
4. Якщо щось не підходить — уточни:

   "Зроби текст більшим на телефоні та додай більше повітря між блоками."

🧩 3.13. Типові проблеми стилізації

🧠 3.15. Підсумок Модуля 3