Malý repozitář pro WTL 3.I 2025/2026

skrabanek 22ec18730f add AI material navíc, README popisky všude		7 days ago
..
README.md	add AI material navíc, README popisky všude	7 days ago
ZADANI.md	add AI material navíc, README popisky všude	7 days ago
index.html	add AI material navíc, README popisky všude	7 days ago
reseni.css	add AI material navíc, README popisky všude	7 days ago
reseni.html	add AI material navíc, README popisky všude	7 days ago
style.css	add AI material navíc, README popisky všude	7 days ago

README.md

AI 01 - CSS Grid & Responzivní Layout

🎯 Cíl projektu

Naučit se pracovat s CSS Grid systémem a pokročilými CSS selektory, které jsou důležité pro pochopení Bootstrap grid systému.

📋 Co se naučíte

CSS Grid základy - display: grid, grid-template-columns
Grid gaps - mezery mezi položkami
Responzivní grid s media queries
Pokročilé CSS selektory - :nth-child(), :first-child, :last-child
CSS transformace - scale() při hover
Grid template areas - pojmenované oblasti

📂 Soubory v projektu

ZADANI.md - detailní zadání projektu s požadavky
index.html - startovací HTML soubor (s TODO komentáři pro vás)
style.css - CSS šablona (s TODO komentáři)
reseni.html - kompletní řešení (podívejte se, když zaseknete)
reseni.css - CSS s podrobnými komentáři vysvětlující každý řádek

🚀 Jak pracovat s projektem

Krok 1: Přečtěte si ZADANI.md

Otevřete ZADANI.md a přečtěte si celé zadání
Pochopte, co máte vytvořit
Prohlédněte si ukázky kódu

Krok 2: Začněte s index.html a style.css

Otevřete index.html a style.css
Najděte TODO komentáře - to jsou místa, kde máte psát kód
Postupujte podle TODO instrukcí

Krok 3: Testujte responzivitu

Otevřete index.html v prohlížeči
Otevřete Developer Tools (F12)
Zapněte Device Toolbar (Ctrl+Shift+M)
Testujte různé velikosti:
- Desktop (> 768px) - 3 sloupce
- Tablet (768px) - 2 sloupce
- Mobil (480px) - 1 sloupec

Krok 4: Když se zaseknete

Podívejte se do reseni.css - jsou tam podrobné komentáře
Zkuste pochopit PROČ to funguje, ne jen zkopírovat
Porovnejte své řešení s hotovým

💡 Klíčové koncepty

CSS Grid pattern:

/* Kontejner */
.grid-container {
    display: grid;  /* MUSÍ BÝT! */
    grid-template-columns: repeat(3, 1fr);  /* 3 sloupce */
    gap: 20px;  /* mezery */
}

/* Položky se umístí automaticky */
.grid-item {
    background-color: lightblue;
    padding: 20px;
}

Responzivní breakpointy:

/* Desktop (výchozí) - 3 sloupce */
.grid-container {
    grid-template-columns: repeat(3, 1fr);
}

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

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

Pokročilé selektory:

/* Liché položky (1, 3, 5, ...) */
.grid-item:nth-child(odd) {
    background-color: lightblue;
}

/* Sudé položky (2, 4, 6, ...) */
.grid-item:nth-child(even) {
    background-color: lightgreen;
}

/* První položka */
.grid-item:first-child {
    background-color: gold;
}

/* Poslední položka */
.grid-item:last-child {
    background-color: pink;
}

/* Hover efekt */
.grid-item:hover {
    transform: scale(1.05);  /* zvětší o 5% */
    cursor: pointer;
}

⚠️ Časté chyby

❌ Grid nefunguje → Zapomněli jste display: grid na kontejneru

❌ Responzivita nefunguje → Chybí <meta name="viewport"> v <head>

❌ nth-child nefunguje → Zkontrolujte syntax: :nth-child(odd) ne .nth-child(odd)

❌ Gap nefunguje → gap funguje pouze v grid/flex containeru

🎓 Hodnocení (10 bodů)

HTML struktura (2b) - správná struktura, 9+ položek
CSS Grid implementace (3b) - grid-template-columns, gap
Media queries (2b) - 3 breakpointy (desktop, tablet, mobil)
Pokročilé selektory (2b) - nth-child, first/last-child, hover
Responzivita (1b) - funguje na všech zařízeních

🔗 Užitečné odkazy

⏱️ Odhadovaný čas

45-60 minut

🎯 Po dokončení

Po dokončení tohoto projektu budete rozumět:

Jak funguje CSS Grid (základ pro Bootstrap grid)
Jak vytvořit responzivní layout bez frameworku
Pokročilé CSS selektory

➡️ Další projekt: AI 02 - Sémantické HTML5 & CSS Positioning