3I_WTL_2025/AI_extra_material/ai_04_prep_bootstrap

AI 04 - Komplexní Bootstrap Prep Projekt

🎯 Cíl projektu

Finální komplexní projekt kombinující VŠECHNY naučené koncepty. Po dokončení tohoto projektu budete plně připraveni na Bootstrap a budete rozumět, proč a jak framework funguje!

📋 Co tento projekt procvičuje

HTML:

✅ Sémantické elementy (nav, main, section, article, aside, footer) ✅ Formuláře ✅ Strukturu moderní webové stránky

CSS:

✅ Grid & Flexbox - komplexní layouty ✅ Positioning - všechny typy (fixed, sticky, relative, absolute) ✅ Media queries - plná responzivita ✅ CSS proměnné - custom properties ✅ Moderní jednotky - rem, em, vh, vw ✅ Gradienty, shadows, transitions ✅ Animations - fadeIn, slideIn ✅ Pokročilé selektory - nth-child, ::before, ::after

JavaScript:

✅ addEventListener ✅ DOM manipulace ✅ Form validation ✅ Event handling ✅ Scroll efekty ✅ Modals, accordions, toggles

📂 Soubory v projektu

• ZADANI.md - kompletní zadání projektu
• index.html - startovací HTML (s TODO komentáři)
• css/style.css - hlavní CSS (s TODO komentáři)
• css/animations.css - CSS animace
• js/main.js - hlavní JavaScript
• js/validation.js - form validace
• js/scroll.js - scroll efekty
• reseni/ - kompletní řešení se všemi soubory

🚀 Co budete vytvářet

Responzivní Landing Page pro fiktivní produkt (fitness app, e-learning, SaaS, atd.)

Struktura stránky:

┌─────────────────────────────────────┐
│  FIXNÍ NAVIGACE (position: fixed)   │
├─────────────────────────────────────┤
│                                     │
│         HERO SEKCE (header)         │
│      Call-to-Action tlačítko        │
│                                     │
├──────────────┬──────────────────────┤
│   STICKY     │                      │
│   ASIDE      │   FEATURES (grid)    │
│  (boční)     │                      │
│              │  PRICING CARDS       │
│              │     (grid)           │
│              │                      │
│              │  TESTIMONIALS        │
│              │     (flex)           │
│              │                      │
│              │  CONTACT FORM        │
│              │   (validation)       │
├──────────────┴──────────────────────┤
│           FOOTER                    │
└─────────────────────────────────────┘

💡 Klíčové techniky

1. CSS Grid Layout

Features sekce:

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 sloupce */
    gap: 2rem;
}

@media (max-width: 768px) {
    .features {
        grid-template-columns: repeat(2, 1fr);  /* 2 na tabletu */
    }
}

@media (max-width: 480px) {
    .features {
        grid-template-columns: 1fr;  /* 1 na mobilu */
    }
}

2. CSS Proměnné (Custom Properties)

:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --text-color: #333;
    --bg-color: #f8f9fa;
    --spacing-unit: 1rem;
    --border-radius: 8px;
}

.button {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
}

3. Pricing Toggle (JavaScript)

const toggle = document.getElementById("pricing-toggle");
const monthlyPrices = document.querySelectorAll(".monthly-price");
const yearlyPrices = document.querySelectorAll(".yearly-price");

toggle.addEventListener("change", function() {
    if (this.checked) {
        // Zobraz roční ceny
        monthlyPrices.forEach(el => el.style.display = "none");
        yearlyPrices.forEach(el => el.style.display = "block");
    } else {
        // Zobraz měsíční ceny
        monthlyPrices.forEach(el => el.style.display = "block");
        yearlyPrices.forEach(el => el.style.display = "none");
    }
});

4. Smooth Scroll k sekcím

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener("click", function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute("href"));
        target.scrollIntoView({
            behavior: "smooth",
            block: "start"
        });
    });
});

5. Scroll to Top tlačítko

const scrollTopBtn = document.getElementById("scroll-top");

window.addEventListener("scroll", function() {
    if (window.pageYOffset > 300) {
        scrollTopBtn.classList.add("show");
    } else {
        scrollTopBtn.classList.remove("show");
    }
});

scrollTopBtn.addEventListener("click", function() {
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
});

6. Modal okno

const modal = document.getElementById("myModal");
const openBtn = document.getElementById("openModal");
const closeBtn = document.querySelector(".close");

openBtn.addEventListener("click", function() {
    modal.style.display = "block";
    document.body.style.overflow = "hidden";  // zakáže scrollování
});

closeBtn.addEventListener("click", function() {
    modal.style.display = "none";
    document.body.style.overflow = "auto";
});

// Zavření kliknutím mimo modal
window.addEventListener("click", function(e) {
    if (e.target === modal) {
        modal.style.display = "none";
        document.body.style.overflow = "auto";
    }
});

7. FAQ Accordion

const accordionHeaders = document.querySelectorAll(".accordion-header");

accordionHeaders.forEach(header => {
    header.addEventListener("click", function() {
        const content = this.nextElementSibling;
        const isActive = this.classList.contains("active");

        // Zavři všechny ostatní
        accordionHeaders.forEach(h => {
            h.classList.remove("active");
            h.nextElementSibling.style.maxHeight = null;
        });

        // Toggle aktuální
        if (!isActive) {
            this.classList.add("active");
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
});

8. Změna barvy navigace při scrollování

const navbar = document.querySelector("nav");

window.addEventListener("scroll", function() {
    if (window.pageYOffset > 100) {
        navbar.classList.add("scrolled");
    } else {
        navbar.classList.remove("scrolled");
    }
});

nav {
    background-color: transparent;
    transition: background-color 0.3s ease;
}

nav.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

🎨 CSS Animations

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Slide In */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

⚠️ Časté chyby a řešení

❌ Fixed navigace překrývá obsah

body {
    padding-top: 80px;  /* výška navigace */
}

❌ Smooth scroll nefunguje

html {
    scroll-behavior: smooth;  /* CSS alternativa */
}

❌ Modal scrolluje pozadí

// Při otevření modalu
document.body.style.overflow = "hidden";

// Při zavření
document.body.style.overflow = "auto";

🎓 Hodnocení (30 bodů)

• HTML struktura (5b) - sémantické elementy, správná struktura
• CSS Grid & Flexbox (6b) - grid pro features/pricing, flex pro navigaci
• Positioning (4b) - fixed nav, sticky aside, absolute badge
• JavaScript interaktivita (6b) - validace, scroll, modal, accordion
• Responzivita (4b) - funguje na mobilu, tabletu, desktopu
• Design & UX (3b) - hezký design, dobré barvy, transitions
• Clean code (2b) - čitelný, okomentovaný kód

🔗 Design inspirace

• Awwwards
• Dribbble
• Land-book

⏱️ Odhadovaný čas

4-6 hodin (pracujte postupně, ne vše najednou!)

💪 Bonus úkoly (nepovinné)

1. Counter animace - číselné statistiky se animují od 0
2. Lazy loading obrázků - obrázky se načtou až při scrollování
3. Dark mode toggle - přepínač světlý/tmavý režim
4. Carousel/Slider - pro testimonials (bez knihoven!)
5. Newsletter signup - s fake AJAX requestem
6. AOS (Animate On Scroll) - prvky plynule přijíždějí při scrollování

🎯 Po dokončení projektu

Co budete rozumět při učení Bootstrapu:

✅ Grid systém - víte, jak funguje pod kapotou ✅ Utility třídy - .m-2, .p-3 → víte, co dělají ✅ Komponenty - modals, accordions → umíte je vytvořit sami ✅ JavaScript plugins - rozumíte, jak fungují ✅ Responzivita - mobile-first přístup dává smysl

Bootstrap vám ušetří čas:

<!-- VÁŠE ŘEŠENÍ (40 řádků CSS) -->
<div class="pricing-card">
    <h3>Basic</h3>
    <p class="price">$9/mo</p>
    <button class="btn">Subscribe</button>
</div>

<!-- BOOTSTRAP (využívá hotové třídy) -->
<div class="card text-center">
    <div class="card-body">
        <h3 class="card-title">Basic</h3>
        <p class="display-4">$9/mo</p>
        <button class="btn btn-primary">Subscribe</button>
    </div>
</div>

Ale díky tomuto projektu víte, co se děje pod kapotou! 🎉

🏆 Gratulace!

Po dokončení všech AI projektů (01-04) jste připraveni na Bootstrap!

Jste schopni:

• ✅ Vytvořit kompletní responzivní web bez frameworku
• ✅ Rozumět, jak frameworky fungují interně
• ✅ Přizpůsobit Bootstrap vlastním potřebám
• ✅ Debugovat problémy v Bootstrapu

➡️ Další krok: Lekce 13 - Úvod do Bootstrapu