ai text

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(mkdir:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.gitignore

@@ -9,3 +9,6 @@
 # Local History for Visual Studio Code
 .history/
 
+CLAUDE.md
+AI/*
+.

README.md

@@ -1,3 +1,380 @@
-# 3I_WTL_2025
+# 🌐 Webové Technologie (WTL) 2025/2026
 
-Malý repozitář pro WTL 3.I 2025/2026
+Vítejte v repozitáři pro předmět **Webové Technologie** (WTL) - 3. ročník IT!
+
+Tento repozitář obsahuje **kódy a příklady z hodin** - materiály pro výuku moderního webového vývoje od základů HTML a CSS až po práci s Bootstrap frameworkem a pokročilé koncepty.
+
+---
+
+## 🚀 Rychlý Start
+
+### Pro nové studenty:
+
+1. **Naklonujte repozitář:**
+   ```bash
+   git clone [URL_REPOZITARE]
+   cd 3I_WTL_2025
+   ```
+
+2. **Otevřete v editoru:**
+   - Používáme **Visual Studio Code**
+   - Nainstalujte doporučená rozšíření (viz níže)
+
+3. **Začněte s lekcí 01:**
+   - Otevřete složku `01_uvod`
+   - Pravé tlačítko na `index.html` → "Open with Live Server"
+   - Prostudujte kód a komentáře
+
+4. **Postupujte chronologicky:**
+   - Lekce 01-11 → Základy HTML, CSS a JavaScriptu
+   - Lekce 12 → CSS Grid
+   - Lekce 13-20 → Bootstrap framework a pokročilé techniky
+
+---
+
+## 📚 Struktura Kurzu
+
+### 📖 ČÁST I: Základy Webových Technologií (Lekce 01-11)
+
+| Lekce | Téma | Zaměření |
+|-------|------|----------|
+| **01** | [Úvod do HTML](01_uvod/) | HTML struktura, základní tagy, seznamy, tabulky |
+| **02** | [Formuláře](02/) | Input fieldy, validace, form atributy |
+| **03** | [Úvod do CSS](03_css_uvod/) | Selektory, box model, barvy, fonty |
+| **04** | [CSS Layout](04_layout/) | Display, margin, padding, základní layout |
+| **05** | [JavaScript Intro](05_js_intro/) | Proměnné, datové typy, operátory, funkce |
+| **06** | [JS + HTML](06_js_html/) | DOM manipulace, getElementById, innerHTML |
+| **07** | [JS + CSS + DOM](07_js_css_dom/) | Změna stylů, classList, dynamické prvky |
+| **08** | [JS Formuláře](08_js_form/) | Form handling, události, základní validace |
+| **09** | [Media Queries](09_mediaquerry/) | Responzivní design, breakpointy |
+| **10** | [Flexbox](10_flex/) | Flex container, flex items, align, justify |
+| **11** | [JSON & AJAX](11_json/) | JSON formát, fetch API, async operace |
+
+### 🎨 ČÁST II: CSS Grid (Lekce 12)
+
+| Lekce | Téma | Zaměření |
+|-------|------|----------|
+| **12** | [CSS Grid](12_grid/) | Grid system, grid-template, gap, areas |
+
+### 🎯 ČÁST III: Bootstrap Framework (Lekce 13-17)
+
+| Lekce | Téma | Zaměření |
+|-------|------|----------|
+| **13** | [Bootstrap Intro](13_boostrap_intro/) | Grid system, container, row, col |
+| **14** | [Bootstrap Layout](14_bootstrap_layout/) | Responsive utilities, spacing, display |
+| **15** | [Bootstrap Components](15_bootstrap_components/) | Cards, buttons, navbar, alerts |
+| **16** | [Carousel](16_carousel/) | Bootstrap carousel komponenta |
+| **17** | [Modal](17_modal/) | Modal dialogy a jejich použití |
+
+### 🚀 ČÁST IV: Pokročilé Techniky (Lekce 18-20)
+
+| Lekce | Téma | Zaměření |
+|-------|------|----------|
+| **18** | [Bootstrap Forms](18_forms/) | Form validace s Bootstrapem |
+| **19** | [Todo List](19_todolist/) | Praktický projekt - dynamická aplikace |
+| **20** | [AJAX](20_ajax/) | Asynchronní komunikace se serverem |
+
+### 📁 Bonusové Materiály
+
+- **[novyprojekt_bootstrap](novyprojekt_bootstrap/)** - Šablona pro nové Bootstrap projekty
+
+---
+
+## 💻 Vývojové Prostředí - Visual Studio Code
+
+### Instalace VS Code
+
+1. Stáhněte z [code.visualstudio.com](https://code.visualstudio.com/)
+2. Nainstalujte pro váš operační systém
+3. Spusťte VS Code
+
+### ⭐ Doporučená Rozšíření (Extensions)
+
+Stiskněte `Ctrl + Shift + X` a nainstalujte:
+
+#### Nezbytné:
+- **Live Server** (Ritwick Dey)
+  - Automatické obnovení stránky při uložení
+  - Pravé tlačítko na HTML → "Open with Live Server"
+
+- **Prettier - Code formatter** (Prettier)
+  - Automatické formátování kódu
+  - `Alt + Shift + F` pro formátování
+
+#### Velmi doporučené:
+- **Auto Rename Tag** (Jun Han)
+  - Automatické přejmenování párových HTML tagů
+
+- **HTML CSS Support** (ecmel)
+  - IntelliSense pro CSS třídy v HTML
+
+- **CSS Peek** (Pranay Prakash)
+  - Náhled CSS definic přímo z HTML
+  - `Ctrl + Click` na třídu/ID
+
+- **JavaScript (ES6) code snippets** (charalampos karypidis)
+  - Snippety pro rychlejší psaní JS kódu
+
+#### Užitečné:
+- **Indent Rainbow** (oderwat)
+  - Barevné odsazení pro lepší přehlednost
+
+- **Bracket Pair Colorizer 2** (CoenraadS)
+  - Barevné závorky pro lepší orientaci
+
+- **Path Intellisense** (Christian Kohler)
+  - Autocomplete pro cesty k souborům
+
+- **Live Server Preview** (negokaz)
+  - Náhled stránky přímo v editoru
+
+### Užitečná Nastavení VS Code
+
+Otevřete Settings (`Ctrl + ,`) a nastavte:
+
+```json
+{
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "editor.wordWrap": "on",
+  "emmet.triggerExpansionOnTab": true,
+  "liveServer.settings.donotShowInfoMsg": true
+}
+```
+
+### Užitečné Keyboard Shortcuts
+
+| Klávesa | Funkce |
+|---------|--------|
+| `Ctrl + /` | Zakomentovat/odkomentovat |
+| `Alt + Shift + F` | Formátovat dokument |
+| `Ctrl + D` | Vybrat další výskyt slova |
+| `Alt + Up/Down` | Přesunout řádek |
+| `Ctrl + Shift + P` | Command palette |
+| `Ctrl + B` | Zobrazit/skrýt sidebar |
+| `Ctrl + `` ` `` | Otevřít terminál |
+| `F12` | Otevřít Developer Tools v prohlížeči |
+| `!` + `Tab` | Vytvořit HTML5 kostru (Emmet) |
+
+---
+
+## 🛠️ Jak Pracovat s Materiály
+
+### Struktura Složek
+
+Každá lekce obvykle obsahuje:
+```
+XX_nazev_lekce/
+├── index.html          # Hlavní HTML soubor s příklady
+├── style.css           # CSS styly (nebo složka css/)
+├── script.js           # JavaScript (nebo složka js/)
+└── css/                # Složka se styly (u Bootstrap lekcí)
+    └── bootstrap.css
+└── js/                 # Složka s JS soubory
+    └── bootstrap.bundle.js
+```
+
+### Postup Práce
+
+1. **Prostudujte kód z hodiny** - Otevřete `index.html` a projděte si kód
+2. **Experimentujte** - Měňte hodnoty, zkoušejte vlastní úpravy
+3. **Použijte Live Server** - Pravé tlačítko → "Open with Live Server"
+4. **Testujte v prohlížeči** - Používejte Developer Tools (F12)
+5. **Commitujte změny** - Používejte Git pro verzování
+
+---
+
+## 🆘 Když si Nevíte Rady
+
+### Debugging Checklist
+
+✅ **HTML problémy:**
+- [ ] Máte zavřené všechny tagy?
+- [ ] Jsou správně vnořené?
+- [ ] Máte `<!DOCTYPE html>`?
+- [ ] Je správně nastavený `<meta charset="UTF-8">`?
+
+✅ **CSS problémy:**
+- [ ] Je CSS soubor správně připojený?
+- [ ] Nemáte překlep v selektoru?
+- [ ] Máte správné závorky `{}`?
+- [ ] Nekončí každá vlastnost středníkem `;`?
+- [ ] Zkontrolujte Developer Tools (záložka Elements)
+
+✅ **JavaScript problémy:**
+- [ ] Je JS soubor správně připojený?
+- [ ] Je `<script>` před `</body>`?
+- [ ] Koukněte do konzole (F12) - jsou tam chyby?
+- [ ] Používáte `console.log()` pro debugging?
+- [ ] Máte správné ID elementů?
+
+✅ **Live Server problémy:**
+- [ ] Je nainstalované rozšíření Live Server?
+- [ ] Otevřeli jste HTML soubor pravým tlačítkem → "Open with Live Server"?
+- [ ] Zkontrolujte, zda neběží jiný server na stejném portu
+
+### Zdroje Pomoci
+
+1. **Developer Tools** (F12) - konzole ukazuje chyby
+2. **Předchozí lekce** - příklady použití
+3. **Komentáře v kódu** - často tam je vysvětlení
+4. **Spolužáci** - diskutujte společně
+5. **Učitel** - konzultační hodiny
+
+### Časté Chyby a Řešení
+
+#### CSS Grid
+- **Problém:** Grid nefunguje
+- **Řešení:** Zkontrolujte, zda má parent element `display: grid`
+
+#### Positioning
+- **Problém:** `position: absolute` nefunguje správně
+- **Řešení:** Parent element musí mít `position: relative`
+
+#### addEventListener
+- **Problém:** Event listener nefunguje
+- **Řešení:** Nepište `addEventListener(function())` ale `addEventListener(function)`
+
+#### Media Queries
+- **Problém:** Responzivita nefunguje
+- **Řešení:** Zkontrolujte, zda máte v `<head>` viewport meta tag:
+  ```html
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  ```
+
+---
+
+## 💡 Tipy pro Úspěch
+
+### Pro Začátečníky
+
+1. **Postupujte chronologicky** - Každá lekce navazuje na předchozí
+2. **Nezbrkejte se** - Raději pomalu, ale pořádně
+3. **Experimentujte** - Zkoušejte vlastní úpravy kódu
+4. **Používejte DevTools** - F12 v prohlížeči je váš kamarád
+5. **Pište si poznámky** - Co jste se naučili
+
+### Při Vývoji Projektů
+
+1. **Začněte HTML** - Pak CSS, na konec JavaScript
+2. **Mobile-first** - Začněte od mobilní verze
+3. **Testujte často** - Každých pár změn zkontrolujte v prohlížeči
+4. **Commitujte průběžně** - Git commit po každé dokončené sekci
+5. **Čtěte komentáře** - V příkladech z hodin je mnoho užitečných informací
+
+### Emmet Shortcuts (zkrátí vám práci)
+
+Emmet je vestavěný v VS Code a umožňuje rychle psát HTML/CSS:
+
+```
+!                  → HTML5 kostra
+div.container      → <div class="container"></div>
+ul>li*5            → <ul> s 5 <li> elementy
+a[href="#"]        → <a href="#"></a>
+div#header         → <div id="header"></div>
+.row>.col*3        → <div class="row"> s 3 <div class="col">
+```
+
+---
+
+## 🎯 Co se Naučíte
+
+Po dokončení celého kurzu budete umět:
+
+### HTML
+✅ Vytvořit sémanticky správnou strukturu stránky
+✅ Pracovat s formuláři a validací
+✅ Používat HTML5 elementy (`nav`, `section`, `article`, `aside`)
+✅ Implementovat accessibility best practices
+
+### CSS
+✅ Stylovat moderní responzivní webové stránky
+✅ Používat Flexbox i CSS Grid
+✅ Vytvářet animace a transitions
+✅ Pracovat s různými jednotkami (px, rem, em, vh, vw)
+✅ Používat pokročilé selektory a pseudo-třídy
+✅ Psát responzivní CSS s media queries
+
+### JavaScript
+✅ Manipulovat s DOM
+✅ Zpracovávat uživatelské události
+✅ Validovat formuláře
+✅ Pracovat s JSON daty
+✅ Používat fetch API pro AJAX
+✅ Psát čistý, čitelný kód
+
+### Bootstrap
+✅ Používat Bootstrap Grid System
+✅ Implementovat Bootstrap komponenty
+✅ Přizpůsobovat Bootstrap svým potřebám
+✅ Rozumět, co framework dělá "pod kapotou"
+✅ Rozhodnout, kdy Bootstrap použít a kdy ne
+
+---
+
+## 🌟 Co Dál?
+
+Po dokončení tohoto kurzu budete pokračovat v:
+
+### **Node.js**
+- JavaScript na serveru
+- NPM (Node Package Manager)
+- Express.js framework
+- REST API
+- Práce s databázemi
+
+### **Vue.js**
+- Moderní JavaScript framework
+- Komponenty a reaktivita
+- Vue Router
+- Vuex (state management)
+- Single Page Applications (SPA)
+
+---
+
+## 📖 Důležité Poznámky
+
+### Pro Studenty
+- 📝 Všechny materiály jsou v **češtině**
+- 💻 Žádný build proces - soubory otevřete přímo v prohlížeči
+- 🔄 Používejte Git pro verzování vašeho pokroku
+- 🤝 Spolupracujte, ale nekopírujte řešení
+- ❓ Ptejte se, když něčemu nerozumíte
+
+### Filosofie Kurzu
+Tento kurz učí **postupně a důkladně**. Začínáte s čistým HTML a CSS, postupně přidáváte JavaScript, a až pak přecházíte k Bootstrap frameworku. Tímto způsobem pochopíte, jak věci skutečně fungují, a nebudete jen "kopírovat kód z dokumentace".
+
+**Nespěchejte. Kvalita > Kvantita.**
+
+---
+
+## 📞 Kontakt
+
+Při problémech nebo dotazech:
+- 💬 Konzultační hodiny s vyučujícím
+- 📧 Školní email
+- 👥 Diskuze se spolužáky
+
+---
+
+## 📜 Licence a Použití
+
+Materiály jsou určené pro výukové účely studentů kurzu Webové Technologie.
+
+---
+
+**Hodně štěstí s učením! 🚀**
+
+*Vytvořeno pro studenty 3. ročníku IT - Školní rok 2025/2026*
+
+---
+
+## 🗺️ Rychlá Navigace
+
+- 📖 [Základní lekce (01-11)](#část-i-základy-webových-technologií-lekce-01-11)
+- 🎨 [CSS Grid (12)](#část-ii-css-grid-lekce-12)
+- 🎯 [Bootstrap (13-17)](#část-iii-bootstrap-framework-lekce-13-17)
+- 🚀 [Pokročilé (18-20)](#část-iv-pokročilé-techniky-lekce-18-20)
+- 💻 [VS Code Setup](#vývojové-prostředí---visual-studio-code)
+- 💡 [Tipy pro úspěch](#tipy-pro-úspěch)
+- 🆘 [Pomoc](#když-si-nevíte-rady)