KURZ: Jak vytvořit jednostránkový web bez programování pomocí ChatGPT a Replit Agent

📘 3.1. Co je to „stylizace webu“

V modulu 2 jsme vytvořili kostru (HTML strukturu). Nyní musíme přidat vizuální stránku — vše, co uživatel vidí.

To se dělá pomocí CSS (Cascading Style Sheets) — tabulek stylů. Ale místo toho, abychom je psali ručně, budeme „mluvit“ s Replit Agentem o tom, jak má design vypadat.

🧠 3.2. Princip: „Mluvte jako designér, ne jako programátor“

Replit Agent nepotřebuje technické příkazy — potřebuje popis toho, jak chcete, aby web vypadal.

🖋️ 3.3. Základní dotaz na stylizaci

Než začnete web stylizovat, otevřete svůj projekt v Replitu (ten vytvořený v modulu 2).

1. Klikněte na 🤖 Ask AI (Replit Agent).
2. Zadej požadavek:

🔍 Co agent udělá

• • Připojí písmo Poppins v souboru index.html.
• • Přidá CSS do souboru style.css.
• • Vytvoří odsazení, barvy a kontrast.
• • Přidá transition pro plynulé efekty.
• • Nastaví responzivitu.

🎨 3.4. Pochopení základních prvků designu

Abychom mohli sebevědomě formulovat dotazy, rozeberme klíčové parametry, které je vhodné v promptech zmiňovat.

🧩 3.5. Příklad úplného dotazu na stylizaci

🧱 3.6. Jak Replit Agent mění style.css

Zde je příklad stylů, které může agent vytvořit:

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. Výběr barevných palet

🔹 Dotaz na ChatGPT:

Příklad odpovědi:

1. Energetické: oranžová, černá, bílá.
2. Prémiové: černá, zlatá, krémová.
3. Minimalistické: bílá, šedá, modrá.

Po výběru schématu — dotaz pro Replit Agent:

🖋️ 3.8. Práce s Google Fonts

Písma jsou „oblečením“ pro text. Lze je vybrat přes ChatGPT:

Příklady:

• • Playfair Display — klasický, elegantní.
• • Poppins — moderní a čitelný.
• • Montserrat — geometrický, technický.

Po výběru písma — dotaz pro Replit Agent:

💡 3.9. Animace a efekty

Nyní přidáme plynulé pohyby a jemné efekty.

🔹 Dotaz pro Replit Agent:

Agent vytvoří kód jako:

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

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

a přidá JS, který při rolování aktivuje třídu visible.

📱 3.11. Adaptace designu pro mobilní zařízení

Aby design vypadal dobře na chytrých telefonech:

Replit automaticky přidá do CSS něco podobného:

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

🧭 3.12. Kontrola výsledku

1. Klikni na Run.
2. Otevřete web na nové kartě.
3. Otevřete vývojářské nástroje (F12 → „Toggle Device Toolbar“) a zkontrolujte, jak web vypadá na iPhone/Androidu.
4. Pokud něco nesedí — upřesněte:

   „Udělej text na telefonu větší a přidej více prostoru mezi bloky.“

🧩 3.13. Typické problémy se stylizací

🧠 3.15. Shrnutí modulu 3