diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..c14d84d
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,9 @@
+{
+ "permissions": {
+ "allow": [
+ "Bash(mkdir:*)"
+ ],
+ "deny": [],
+ "ask": []
+ }
+}
diff --git a/.gitignore b/.gitignore
index b60c46d..0dce45a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,6 @@
# Local History for Visual Studio Code
.history/
+CLAUDE.md
+AI/*
+.
\ No newline at end of file
diff --git a/README.md b/README.md
index 39cb7d7..9c7ac61 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,380 @@
-# 3I_WTL_2025
+# 🌐 Webové Technologie (WTL) 2025/2026
-Malý repozitář pro WTL 3.I 2025/2026
\ No newline at end of file
+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 ``?
+- [ ] Je správně nastavený ``?
+
+✅ **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 `