# 📚 AI Extra Material - Doplňkové Studijní Materiály

## 🎯 Účel této složky

Tato složka obsahuje **doplňkové studijní materiály** pro hlubší pochopení pokročilých konceptů webového vývoje. Tyto materiály jsou navíc k základnímu učivu a slouží k samostudiu.

## 📂 Co složka obsahuje

### 🎓 AI Projekty (Základní verze v /AI složce)

Tato složka obsahuje **duplikáty AI projektů** z hlavní složky `/AI`. Jsou zde pro pohodlný přístup k materiálům.

- **ai_01_grid_responsive** - CSS Grid & Responzivní Layout
- **ai_02_semantic_portfolio** - Sémantické HTML5 & CSS Positioning
- **ai_03_form_validation** - Pokročilá Validace Formulářů s JavaScript
- **ai_04_prep_bootstrap** - Komplexní Bootstrap Prep Projekt

### 📋 Informační Soubory

- **AI_PROJEKTY_README.md** - Přehled všech AI projektů
- **UCITEL_INFO.md** - Informace pro učitele o projektech, hodnocení, harmonogramu
- **ISP_WTL_3I.md** - Individuální studijní plán (ISP)
- **ISP_WTL_3I.txt** - ISP v textové podobě

### 🚀 Bootstrap Doplňkové Projekty

#### 18_form_validation_bootstrap
Ukázka validace formulářů s Bootstrap 5.
- Bootstrap validační třídy
- Custom validace s JavaScriptem
- Visual feedback pro uživatele
- Propojení s Bootstrap styly

**Kdy použít:** Pro pochopení, jak Bootstrap řeší validaci formulářů "out of the box".

#### 18a_form_xss_demo
**BEZPEČNOSTNÍ DEMO** - ukázka XSS (Cross-Site Scripting) zranitelnosti.
- Demonstrace nebezpečného kódu
- Jak vznikají XSS útoky
- Jak se bránit (sanitizace inputů)
- Best practices pro bezpečnost

**⚠️ VAROVÁNÍ:** Tento kód je záměrně zranitelný pro výukové účely. **NIKDY** nepoužívejte tento přístup v produkčním kódu!

## 🎓 Jak pracovat s těmito materiály

### Pro studenty:

1. **Nejdříve dokončete základní AI projekty** v hlavní složce `/AI`
2. **Pokud chcete víc:** Projděte si tyto doplňkové materiály
3. **Bootstrap validace:** Po dokončení AI 03, prozkoumejte `18_form_validation_bootstrap`
4. **Bezpečnost:** Po práci s formuláři si prostudujte `18a_form_xss_demo`

### Pro učitele:

- Přečtěte si **UCITEL_INFO.md** pro detailní informace o projektech
- **AI_PROJEKTY_README.md** obsahuje přehled všech AI projektů
- **ISP** soubory obsahují studijní plán

## 🔗 Návaznost na hlavní kurz

| Základní kurz | Extra Material | Proč je užitečný |
|---------------|----------------|------------------|
| 08_js_form | 18_form_validation_bootstrap | Ukáže Bootstrap přístup k validaci |
| AI 03 | 18a_form_xss_demo | Bezpečnostní aspekty formulářů |
| 13-17 Bootstrap | AI projekty (duplikáty) | Opakování před Bootstrapem |

## 💡 Doporučené Pořadí Studia

1. **Základní kurz** (01-20) - absolvujte nejdříve
2. **AI projekty** v hlavní složce `/AI` - praktické projekty
3. **Bootstrap validace** (`18_form_validation_bootstrap`) - po Bootstrap lekcích
4. **XSS Demo** (`18a_form_xss_demo`) - pro pochopení bezpečnosti
5. **ISP materiály** - pro samostudium dle potřeby

## ⚠️ Důležité poznámky

- ✅ Tyto materiály jsou **nepovinné** - jsou navíc k základnímu kurzu
- ✅ Projekty v této složce jsou **duplikáty** - hlavní verze jsou v `/AI`
- ⚠️ **XSS Demo** je záměrně zranitelný - slouží pouze k výukovým účelům
- 📚 **UCITEL_INFO.md** obsahuje hodnocení a harmonogram pro učitele

## 📖 Hlavní AI Projekty

**POZOR:** Hlavní verze AI projektů jsou v kořenové složce **`/AI`**!

Pro práci na projektech používejte soubory z `/AI`, ne z této složky. Tato složka slouží jako archiv a reference.

## 🎯 Cíle Extra Materiálů

Po prostudování těchto materiálů budete:
- ✅ Rozumět Bootstrap validaci formulářů
- ✅ Vědět, jak se bránit XSS útokům
- ✅ Mít hlubší pochopení bezpečnosti webových aplikací
- ✅ Umět propojit Bootstrap s custom validací

---

**Hodně štěstí s dalším studiem! 📚✨**

*Tyto materiály rozšiřují základní kurz a poskytují hlubší vhled do pokročilých témat.*