3I_WTL_2025/AI_extra_material

📚 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 - Extra Cvičné Projekty

Tato složka obsahuje originální cvičné projekty navíc, které jsem vytvořil pro hlubší pochopení konceptů před Bootstrap lekcemi.

• 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

🚀 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. Projděte si AI projekty (ai_01 až ai_04) - důležitá příprava před Bootstrapem
2. Bootstrap validace: Po dokončení ai_03, prozkoumejte 18_form_validation_bootstrap
3. Bezpečnost: Po práci s formuláři si prostudujte 18a_form_xss_demo

🔗 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_01 až ai_04	Příprava před Bootstrap lekcemi

💡 Doporučené Pořadí Studia

1. Základní kurz (01-12) - absolvujte HTML, CSS a JavaScript základy
2. AI projekty (ai_01 až ai_04) - praktické projekty před Bootstrapem
3. Bootstrap lekce (13-17) - Bootstrap framework
4. Bootstrap validace (18_form_validation_bootstrap) - po Bootstrap lekcích
5. XSS Demo (18a_form_xss_demo) - pro pochopení bezpečnosti

⚠️ Důležité poznámky

• ✅ Tyto materiály jsou extra obsah navíc k základnímu kurzu
• ✅ AI projekty (ai_01 až ai_04) jsou důležitá příprava před Bootstrap lekcemi
• ⚠️ XSS Demo je záměrně zranitelný - slouží pouze k výukovým účelům

🎯 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.