diff --git a/.gitignore b/.gitignore
index 693d239..0fa03a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,5 +10,4 @@
.history/
CLAUDE.md
-AI/*
.claude/
\ No newline at end of file
diff --git a/01_uvod/README.md b/01_uvod/README.md
new file mode 100644
index 0000000..c9ddfac
--- /dev/null
+++ b/01_uvod/README.md
@@ -0,0 +1,40 @@
+# 01 - Úvod do HTML
+
+## 🎯 Co se naučíte
+
+V této lekci se seznámíte se základy HTML a strukturou webové stránky.
+
+## 📚 Témata lekce
+
+- **Základní struktura HTML dokumentu** (``, ``, ``, ``)
+- **Nadpisy** (`
` za sebou
+
+### Multi-cursor (ALT + klikání):
+- Držte **ALT** a klikejte na různá místa
+- Můžete psát text na více místech najednou
+- Užitečné pro opakující se text
+
+### Inline CSS:
+```html
+
+
Nadpis
+
+
+```
+
+## ⚠️ Důležité poznámky
+
+- Tabulky se dnes používají **pouze pro tabulková data**, ne pro layout
+- Pro layout použijte **CSS Grid** nebo **Flexbox** (naučíte se později)
+- **Emmet** je součástí většiny editorů (VS Code, Sublime, Atom)
+- Inline CSS je OK pro testování, ale pro produkci použijte externí CSS
+
+## 🔗 Související lekce
+
+- **Předchozí:** 01_uvod - základy HTML
+- **Další:** 03_css_uvod - stylování pomocí CSS
+- **Emmet dokumentace:** [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)
diff --git a/03_css_uvod/README.md b/03_css_uvod/README.md
new file mode 100644
index 0000000..e0db14a
--- /dev/null
+++ b/03_css_uvod/README.md
@@ -0,0 +1,53 @@
+# 03 - Úvod do CSS
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte základy CSS (Cascading Style Sheets) - stylování webových stránek.
+
+## 📚 Témata lekce
+
+- **Připojení CSS** k HTML (external, internal, inline)
+- **CSS selektory** (element, třída `.class`, ID `#id`)
+- **Barvy** (`color`, `background-color`)
+- **Text styling** (velikost, barva, zarovnání)
+- **Kombinace tříd** (více tříd na jednom elementu)
+- **Stylování seznamů a tabulek**
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML dokument s různými elementy
+- `style.css` - CSS soubor s definicemi stylů
+
+## 🎨 Ukázky v lekci
+
+```css
+/* Stylování třídou */
+.fancyText { color: blue; }
+
+/* Stylování ID */
+#uniqueElement { font-size: 20px; }
+
+/* Kombinace tříd */
+.fancyText.fancyBG { ... }
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Prozkoumejte soubor `style.css` - zde jsou definovány styly
+3. V HTML najděte atributy `class=""` a `style=""` - propojení s CSS
+4. Zkuste změnit barvy, velikosti nebo přidat nové třídy
+5. Vyzkoušejte kombinovat více tříd na jednom elementu
+
+## 💡 Tip pro studenty
+
+- **Inline CSS** (`style=""` přímo v HTML) - použijte jen výjimečně
+- **External CSS** (samostatný soubor) - nejlepší pro větší projekty
+- **Třída** (`.class`) - pro opakující se styly (můžete použít vícekrát)
+- **ID** (`#id`) - pro unikátní element (použijte jen jednou na stránce)
+- Element může mít více tříd najednou: `class="fancyText fancyBG"`
+
+## 🔗 Související lekce
+
+- **Předchozí:** 01_uvod, 02 - základy HTML
+- **Další:** 04_layout - pokročilejší layout techniky
diff --git a/04_layout/README.md b/04_layout/README.md
new file mode 100644
index 0000000..98f28ba
--- /dev/null
+++ b/04_layout/README.md
@@ -0,0 +1,45 @@
+# 04 - CSS Layout
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte vytvářet layout (rozvržení) webové stránky pomocí CSS.
+
+## 📚 Témata lekce
+
+- **Box Model** (margin, padding, border)
+- **Display property** (`block`, `inline`, `inline-block`)
+- **Float** (obtékání elementů)
+- **Clear** (ukončení obtékání)
+- **Width a Height** (šířka a výška elementů)
+- **Základní layouty** (dvousloupcový, třísloupcový)
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML struktura s layoutem
+- `style.css` nebo `css/` složka - CSS styly pro layout
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Prozkoumejte CSS - zaměřte se na vlastnosti `float`, `clear`, `width`
+3. Použijte Developer Tools (F12) a vyzkoušejte Box Model vizualizaci
+4. Zkuste změnit šířky sloupců a sledujte, jak se mění layout
+
+## 💡 Tip pro studenty
+
+- **Box Model**: `margin` (vnější odsazení) ≠ `padding` (vnitřní odsazení)
+- **Float** je starší technika - dnes se používá spíše Flexbox nebo Grid
+- Nezapomeňte používat `clear: both;` po float elementech
+- Developer Tools (F12) jsou váš nejlepší přítel pro debugování layoutu
+
+## ⚠️ Důležité poznámky
+
+- Float-based layout je starší přístup
+- V moderních projektech se používá **Flexbox** (lekce 10) nebo **Grid** (lekce 12)
+- Tato lekce je důležitá pro pochopení starších projektů
+
+## 🔗 Související lekce
+
+- **Předchozí:** 03_css_uvod - základy CSS
+- **Další:** 10_flex - moderní flexbox layout
+- **Související:** 12_grid - CSS Grid systém
diff --git a/05_js_intro/README.md b/05_js_intro/README.md
new file mode 100644
index 0000000..399be4a
--- /dev/null
+++ b/05_js_intro/README.md
@@ -0,0 +1,71 @@
+# 05 - Úvod do JavaScriptu
+
+## 🎯 Co se naučíte
+
+V této lekci se seznámíte se základy programování v JavaScriptu.
+
+## 📚 Témata lekce
+
+- **Připojení JavaScriptu** k HTML (inline, external)
+- **Console.log** - výpis do konzole (F12)
+- **Proměnné** (`let`, `const`, `var`)
+- **Datové typy**:
+ - Čísla (number)
+ - Texty (string)
+ - Pole (array)
+ - Objekty (object)
+ - Datum (Date)
+- **Podmínky** (`if`, `else`, `&&`, `||`)
+- **Cykly** (`for`)
+- **Funkce** (definice a volání)
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML soubor s připojením JS
+- `app.js` - JavaScript soubor s ukázkami základů
+
+## 💻 Ukázky v lekci
+
+```javascript
+// Proměnné
+let x = 5;
+const jmeno = "Jan";
+
+// Podmínky
+if (x > 3) {
+ console.log("x je větší než 3");
+}
+
+// Funkce
+function pozdrav() {
+ console.log("Ahoj!");
+}
+pozdrav(); // volání funkce
+
+// Cyklus
+for (let i = 0; i < 5; i++) {
+ console.log(i);
+}
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Otevřete **Developer Console** (F12 → záložka Console)
+3. Prohlédněte si soubor `app.js` v editoru
+4. Zkuste měnit hodnoty proměnných a sledujte výstup v konzoli
+5. Vytvořte vlastní funkce a zavolejte je
+6. Experimentujte s podmínkami a cykly
+
+## 💡 Tip pro studenty
+
+- **Console.log()** je váš nejlepší přítel při debugování
+- **let** vs **const**: použijte `const` pro hodnoty, které se nemění
+- **var** se dnes už moc nepoužívá - používejte `let` nebo `const`
+- Nezapomeňte volat funkci pomocí závorek: `nazevFunkce()`
+- Pro objekty používáme tečkovou notaci: `osobnost.jmeno`
+
+## 🔗 Související lekce
+
+- **Další:** 06_js_html - propojení JavaScriptu s HTML elementy
+- **Související:** 07_js_css_dom - manipulace s CSS přes JavaScript
diff --git a/06_js_html/README.md b/06_js_html/README.md
new file mode 100644
index 0000000..22b3f86
--- /dev/null
+++ b/06_js_html/README.md
@@ -0,0 +1,62 @@
+# 06 - JavaScript a HTML
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte propojit JavaScript s HTML elementy a vytvořit interaktivní kalkulačku.
+
+## 📚 Témata lekce
+
+- **getElementById()** - získání elementu podle ID
+- **innerHTML** - změna obsahu elementu
+- **innerText** - změna textu elementu
+- **onclick** - obsluha kliknutí na tlačítko
+- **Input elementy** - čtení hodnot z formulářových polí
+- **Number()** - převod textu na číslo
+- **Matematické operace** v JavaScriptu
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML s inputy a tlačítky
+- `js/app.js` - JavaScript s funkcí pro výpočet
+
+## 💻 Ukázka z lekce
+
+```html
+
+
+
+
+```
+
+```javascript
+// JavaScript
+function vypocitat(operator) {
+ let cislo1 = document.getElementById("num1").value;
+ let cislo2 = document.getElementById("num2").value;
+ // výpočet a zobrazení výsledku
+ document.getElementById("vysledek").innerHTML = vysledek;
+}
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Vyzkoušejte kalkulačku - zadejte čísla a klikněte na tlačítka
+3. Otevřete `js/app.js` a prozkoumejte funkci `vypocitat()`
+4. Sledujte, jak se hodnoty čtou z inputů pomocí `getElementById()`
+5. Zkuste přidat další operace (mocnina, odmocnina)
+6. Použijte Developer Console (F12) pro debugování
+
+## 💡 Tip pro studenty
+
+- **getElementById()** vrací element, ne hodnotu - musíte použít `.value`
+- **onclick** můžete použít přímo v HTML: `onclick="nazevFunkce()"`
+- Hodnoty z inputů jsou vždy **string** - použijte `Number()` pro převod
+- **innerHTML** vs **innerText**: innerHTML umožňuje HTML tagy, innerText jen text
+- Používejte **console.log()** pro kontrolu hodnot při vývoji
+
+## 🔗 Související lekce
+
+- **Předchozí:** 05_js_intro - základy JavaScriptu
+- **Další:** 07_js_css_dom - manipulace s CSS přes JavaScript
+- **Související:** 08_js_form - práce s formuláři
diff --git a/07_js_css_dom/README.md b/07_js_css_dom/README.md
new file mode 100644
index 0000000..ba582bc
--- /dev/null
+++ b/07_js_css_dom/README.md
@@ -0,0 +1,85 @@
+# 07 - JavaScript, CSS a DOM
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte měnit CSS styly pomocí JavaScriptu a pracovat s DOM (Document Object Model).
+
+## 📚 Témata lekce
+
+- **DOM (Document Object Model)** - struktura HTML v JavaScriptu
+- **style.property** - změna CSS vlastností přes JS
+- **onchange** event - reakce na změnu hodnoty
+- **Select element** - práce s rozbalovacím seznamem
+- **Input type="color"** - barevný picker
+- **Dynamická změna stylů** (barva textu, barva pozadí, font)
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML s select elementy a color pickery
+- `css/style.css` - základní CSS styly
+- `js/index.js` - JavaScript pro změnu barev
+- `js/changeFont.js` - JavaScript pro změnu fontu
+
+## 💻 Ukázka z lekce
+
+```html
+
+
Lorem ipsum...
+
+
+```
+
+```javascript
+// JavaScript
+function changeSColor() {
+ let element = document.getElementById("ltext");
+ let barva = document.getElementById("scolor").value;
+ element.style.color = barva;
+}
+
+function dynColor() {
+ let element = document.getElementById("ltext");
+ let barva = document.getElementById("tcolor").value;
+ element.style.color = barva;
+}
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Vyzkoušejte měnit barvu textu pomocí selectu a color pickeru
+3. Změňte font pomocí selectu
+4. Prozkoumejte JS soubory - jak se elementy mění pomocí `.style`
+5. Zkuste přidat další styly (velikost textu, tučnost, kurzíva)
+6. Experimentujte s různými CSS vlastnostmi
+
+## 💡 Tip pro studenty
+
+- **element.style.property** - property musí být v camelCase:
+ - CSS: `background-color` → JS: `backgroundColor`
+ - CSS: `font-size` → JS: `fontSize`
+- **onchange** se spouští při změně hodnoty (select, input)
+- **input type="color"** vrací hodnotu v HEX formátu (#000000)
+- Používejte **Developer Tools** (F12) → Elements → Styles pro inspekci CSS
+
+## 🎨 CSS vlastnosti, které můžete měnit přes JS
+
+```javascript
+element.style.color = "red";
+element.style.backgroundColor = "blue";
+element.style.fontSize = "20px";
+element.style.fontFamily = "Arial";
+element.style.fontWeight = "bold";
+element.style.textAlign = "center";
+element.style.padding = "10px";
+element.style.margin = "5px";
+```
+
+## 🔗 Související lekce
+
+- **Předchozí:** 06_js_html - propojení JS a HTML
+- **Další:** 08_js_form - validace formulářů s JavaScriptem
+- **Související:** 05_js_intro - základy JavaScriptu
diff --git a/08_js_form/README.md b/08_js_form/README.md
new file mode 100644
index 0000000..e2dfab7
--- /dev/null
+++ b/08_js_form/README.md
@@ -0,0 +1,94 @@
+# 08 - JavaScript a Formuláře
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte pracovat s formuláři v JavaScriptu - validace, odeslání, manipulace s daty.
+
+## 📚 Témata lekce
+
+- **Formulářové elementy** (input, textarea, select, checkbox, radio)
+- **Validace formulářů** s JavaScriptem
+- **event.preventDefault()** - zabránění odeslání formuláře
+- **Čtení hodnot** z různých typů inputů
+- **Kontrola povinných polí**
+- **Regex** (základy) - kontrola formátu emailu, telefonu
+- **Visual feedback** - zobrazení chyb uživateli
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML formulář
+- `js/` - JavaScript soubory pro validaci
+
+## 💻 Ukázka z lekce
+
+```html
+
+
+
+```
+
+```javascript
+// JavaScript
+function validateForm() {
+ let jmeno = document.getElementById("jmeno").value;
+ let email = document.getElementById("email").value;
+
+ if (jmeno === "") {
+ document.getElementById("error").innerHTML = "Jméno je povinné!";
+ return false; // zabrání odeslání
+ }
+
+ // Regex pro email
+ let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(email)) {
+ document.getElementById("error").innerHTML = "Neplatný email!";
+ return false;
+ }
+
+ return true; // formulář se odešle
+}
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Vyzkoušejte odeslat formulář s prázdnými poli
+3. Sledujte validační zprávy
+4. Prozkoumejte JS kód - jak funguje validace
+5. Zkuste přidat další validace (délka hesla, shoda hesel)
+6. Použijte console.log() pro debugování
+
+## 💡 Tip pro studenty
+
+- **return false** v `onsubmit` zabrání odeslání formuláře
+- **event.preventDefault()** je modernější způsob zabránění odeslání
+- **required** atribut v HTML je první úroveň validace (HTML5)
+- **JavaScript validace** je důležitá pro pokročilejší kontroly
+- **Regex** (regulární výrazy) jsou mocný nástroj pro validaci formátů
+- Vždy validujte i na **serveru** - JavaScript validace lze obejít
+
+## 🔍 Užitečné Regex vzory
+
+```javascript
+// Email
+/^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+// Telefon (CZ formát)
+/^(\+420)?[0-9]{9}$/
+
+// Heslo (min 8 znaků, velké, malé, číslo)
+/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/
+
+// Poštovní směrovací číslo
+/^[0-9]{3}\s?[0-9]{2}$/
+```
+
+## 🔗 Související lekce
+
+- **Předchozí:** 07_js_css_dom - manipulace s CSS
+- **Související:** AI/ai_03_form_validation - pokročilá validace s addEventListener
+- **Další:** 11_json - práce s JSON daty
diff --git a/09_mediaquerry/README.md b/09_mediaquerry/README.md
new file mode 100644
index 0000000..ff3b168
--- /dev/null
+++ b/09_mediaquerry/README.md
@@ -0,0 +1,100 @@
+# 09 - Media Queries a Responzivní Design
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte vytvářet responzivní webové stránky pomocí media queries.
+
+## 📚 Témata lekce
+
+- **Media Queries** - CSS pravidla pro různé velikosti obrazovek
+- **Viewport meta tag** - důležitý pro responzivitu
+- **Breakpointy** - body zlomu pro různá zařízení
+- **Mobile-first přístup** vs Desktop-first
+- **Responzivní obrázky** - přizpůsobení velikosti
+- **Responzivní layout** - změna rozvržení podle velikosti
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML s viewport meta tagem
+- `style.css` - CSS s media queries
+- `img/` - složka s obrázky
+
+## 💻 Ukázka z lekce
+
+```html
+
+
+
+
+```
+
+```css
+/* CSS - Media Queries */
+
+/* Desktop styly (výchozí) */
+.col-6 {
+ width: 50%;
+ float: left;
+}
+
+/* Tablet (do 768px) */
+@media (max-width: 768px) {
+ .col-6 {
+ width: 100%;
+ }
+}
+
+/* Mobil (do 480px) */
+@media (max-width: 480px) {
+ .col-6 {
+ width: 100%;
+ }
+ body {
+ font-size: 14px;
+ }
+}
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Otevřete **Developer Tools** (F12) a zapněte **Device Toolbar** (Ctrl+Shift+M)
+3. Změňte velikost okna nebo vyberte různá zařízení (iPhone, iPad, Desktop)
+4. Sledujte, jak se mění layout při různých velikostech
+5. Prozkoumejte `style.css` - najděte `@media` pravidla
+6. Zkuste přidat vlastní breakpointy a změny stylů
+
+## 💡 Tip pro studenty
+
+- **VŽDY použijte viewport meta tag** - bez něj responzivita na mobilu nebude fungovat!
+- **Breakpointy** (běžné hodnoty):
+ - Mobil: `max-width: 480px`
+ - Tablet: `max-width: 768px`
+ - Desktop: `min-width: 769px` nebo bez media query
+- **Mobile-first** přístup (doporučený):
+ - Výchozí styly pro mobil
+ - Media queries s `min-width` pro větší obrazovky
+- **Desktop-first** přístup:
+ - Výchozí styly pro desktop
+ - Media queries s `max-width` pro menší obrazovky
+- Testujte na **reálných zařízeních**, ne jen v prohlížeči
+
+## 📱 Testování responzivity
+
+**V prohlížeči:**
+1. F12 → Device Toolbar (Ctrl+Shift+M)
+2. Vyberte zařízení nebo nastavte vlastní rozměry
+3. Otočte zařízení (landscape/portrait)
+
+**Běžné rozlišení:**
+- iPhone: 375px × 667px
+- iPad: 768px × 1024px
+- Desktop: 1920px × 1080px
+
+## 🔗 Související lekce
+
+- **Předchozí:** 08_js_form - JavaScript a formuláře
+- **Další:** 10_flex - Flexbox layout
+- **Související:**
+ - 12_grid - CSS Grid (další layout systém)
+ - AI/ai_01_grid_responsive - praktický projekt s responzivitou
diff --git a/10_flex/README.md b/10_flex/README.md
new file mode 100644
index 0000000..79247ac
--- /dev/null
+++ b/10_flex/README.md
@@ -0,0 +1,129 @@
+# 10 - Flexbox Layout
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte vytvářet moderní layouty pomocí CSS Flexbox.
+
+## 📚 Témata lekce
+
+- **Flexbox základy** - `display: flex`
+- **Flex container** vlastnosti:
+ - `flex-direction` (row, column)
+ - `justify-content` (zarovnání na hlavní ose)
+ - `align-items` (zarovnání na vedlejší ose)
+ - `flex-wrap` (zalamování položek)
+ - `gap` (mezery mezi položkami)
+- **Flex items** vlastnosti:
+ - `flex-grow`, `flex-shrink`, `flex-basis`
+ - `align-self` (individuální zarovnání)
+- **Praktické použití** - navigace, karty, layout
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML struktura s flexbox layoutem
+- `style.css` - CSS s flexbox vlastnostmi
+
+## 💻 Ukázka z lekce
+
+```css
+/* Flex container */
+.wrapper {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 20px;
+}
+
+/* Flex items */
+.main {
+ flex: 2; /* flex-grow: 2 */
+}
+
+.aside {
+ flex: 1; /* flex-grow: 1 */
+}
+
+/* Navigace s flexbox */
+.navigace {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Otevřete **Developer Tools** (F12) a vyberte flexbox element
+3. V Chrome DevTools najdete **Flexbox** badge - klikněte pro vizualizaci
+4. Prozkoumejte `style.css` - jak funguje `display: flex`
+5. Zkuste měnit `flex-direction`, `justify-content`, `align-items`
+6. Změňte velikost okna a sledujte, jak se flex items přizpůsobují
+
+## 💡 Tip pro studenty
+
+### Kdy použít Flexbox:
+- ✅ Navigační menu (horizontální nebo vertikální)
+- ✅ Karty/produkty vedle sebe
+- ✅ Centrování elementů (horizontálně i vertikálně)
+- ✅ Jednosměrné layouty (řádek nebo sloupec)
+
+### Kdy raději Grid:
+- ❌ Komplexní dvourozměrné layouty (řádky + sloupce)
+- ❌ Galerie obrázků
+- ❌ Celostránkové layouty s header, sidebar, main, footer
+
+### Hlavní koncept:
+- **Flex container** = rodič s `display: flex`
+- **Flex items** = přímé potomci flex containeru
+
+### Důležité vlastnosti:
+```css
+/* Na kontejneru */
+display: flex;
+justify-content: center; /* horizontální zarovnání */
+align-items: center; /* vertikální zarovnání */
+gap: 20px; /* mezery mezi položkami */
+
+/* Na položkách */
+flex: 1; /* roztáhne položku */
+```
+
+## 🎯 Praktické příklady
+
+**Centrování:**
+```css
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+```
+
+**Horizontální navigace:**
+```css
+nav {
+ display: flex;
+ justify-content: space-between;
+}
+```
+
+**Responzivní karty:**
+```css
+.card-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+}
+.card {
+ flex: 1 1 300px; /* min šířka 300px */
+}
+```
+
+## 🔗 Související lekce
+
+- **Předchozí:** 09_mediaquerry - responzivní design
+- **Další:** 11_json - práce s JSON
+- **Porovnání:** 12_grid - CSS Grid (dvourozměrný layout)
+- **Praktický projekt:** AI/ai_04_prep_bootstrap - kombinace Flex a Grid
diff --git a/11_json/README.md b/11_json/README.md
new file mode 100644
index 0000000..9a6980c
--- /dev/null
+++ b/11_json/README.md
@@ -0,0 +1,117 @@
+# 11 - JSON a Práce s Daty
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte pracovat s JSON formátem a načítat data do JavaScriptu.
+
+## 📚 Témata lekce
+
+- **JSON formát** (JavaScript Object Notation)
+- **JSON.parse()** - převod JSON stringu na objekt
+- **JSON.stringify()** - převod objektu na JSON string
+- **Načítání dat z JSON souborů**
+- **Práce s JSON daty** v JavaScriptu
+- **Výpis dat na stránku** pomocí DOM manipulace
+- **Pole objektů** - procházení cyklem
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML s elementy pro zobrazení dat
+- `js/app.js` - JavaScript pro práce s JSON
+- `data/` (možná) - složka s JSON soubory
+
+## 💻 Ukázka z lekce
+
+```javascript
+// JSON objekt v JavaScriptu
+const osoba = {
+ "jmeno": "Jan",
+ "prijmeni": "Novák",
+ "vek": 20,
+ "mesto": "Praha"
+};
+
+// Výpis dat
+console.log(osoba.jmeno); // Jan
+
+// JSON string
+const jsonString = '{"jmeno":"Jan","vek":20}';
+
+// Převod stringu na objekt
+const obj = JSON.parse(jsonString);
+console.log(obj.jmeno); // Jan
+
+// Převod objektu na string
+const str = JSON.stringify(osoba);
+console.log(str); // {"jmeno":"Jan",...}
+
+// Pole objektů
+const osoby = [
+ {"jmeno": "Jan", "vek": 20},
+ {"jmeno": "Petra", "vek": 25},
+ {"jmeno": "Karel", "vek": 30}
+];
+
+// Procházení pole
+osoby.forEach(function(osoba) {
+ console.log(osoba.jmeno + " má " + osoba.vek + " let");
+});
+
+// Výpis na stránku
+let html = "";
+osoby.forEach(function(osoba) {
+ html += "
" + osoba.jmeno + "
";
+});
+document.getElementById("demo").innerHTML = html;
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Otevřete **Console** (F12) a sledujte výpis JSON dat
+3. Prozkoumejte `js/app.js` - jak se pracuje s JSON
+4. Zkuste vytvořit vlastní JSON objekt
+5. Vyzkoušejte převody mezi objektem a stringem
+6. Vytvořte pole objektů a vypište je na stránku
+
+## 💡 Tip pro studenty
+
+### JSON syntaxe:
+- **Klíče musí být v uvozovkách**: `{"jmeno": "Jan"}` ✅
+- **Hodnoty**: string (v uvozovkách), číslo, boolean, null, objekt, pole
+- **Čárka** mezi položkami, ale ne za poslední
+- **Žádné komentáře** v JSON!
+
+### Běžné chyby:
+```javascript
+// ❌ ŠPATNĚ - klíče bez uvozovek
+{jmeno: "Jan"}
+
+// ✅ SPRÁVNĚ
+{"jmeno": "Jan"}
+
+// ❌ ŠPATNĚ - čárka za posledním
+{"jmeno": "Jan", "vek": 20,}
+
+// ✅ SPRÁVNĚ
+{"jmeno": "Jan", "vek": 20}
+```
+
+### JSON vs JavaScript objekt:
+- **JSON** = textový formát (string), univerzální
+- **JS objekt** = datová struktura v paměti
+- **JSON.parse()** = převod z textu na objekt
+- **JSON.stringify()** = převod z objektu na text
+
+### Praktické použití:
+- 💾 Ukládání dat do localStorage
+- 🌐 Komunikace s API (fetch)
+- 📤 Odesílání dat na server
+- 📥 Načítání konfigurace
+
+## 🔗 Související lekce
+
+- **Předchozí:** 10_flex - Flexbox layout
+- **Další:** 12_grid - CSS Grid
+- **Pokročilé:** 20_ajax - AJAX a Fetch API (načítání JSON ze serveru)
+- **Praktické:** Práce s API a reálnými JSON daty
diff --git a/12_grid/README.md b/12_grid/README.md
new file mode 100644
index 0000000..e6d8fa6
--- /dev/null
+++ b/12_grid/README.md
@@ -0,0 +1,150 @@
+# 12 - CSS Grid Layout
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte vytvářet komplexní dvourozměrné layouty pomocí CSS Grid.
+
+## 📚 Témata lekce
+
+- **CSS Grid základy** - `display: grid`
+- **Grid container** vlastnosti:
+ - `grid-template-columns` (definice sloupců)
+ - `grid-template-rows` (definice řádků)
+ - `gap`, `column-gap`, `row-gap` (mezery)
+ - `grid-template-areas` (pojmenované oblasti)
+- **Grid items** vlastnosti:
+ - `grid-column`, `grid-row` (umístění položky)
+ - `grid-area` (pojmenovaná oblast)
+- **Responzivní Grid** - kombinace s media queries
+- **Galerie** - praktické použití Gridu
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML s grid strukturou
+- `style.css` - CSS s grid definicemi
+
+## 💻 Ukázka z lekce
+
+```css
+/* Grid container - galerie */
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr); /* 3 stejně široké sloupce */
+ gap: 20px; /* mezery mezi položkami */
+}
+
+/* Grid items */
+.grid-item {
+ background-color: lightblue;
+ padding: 20px;
+}
+
+/* První položka zabere 2 sloupce */
+.grid-item:first-child {
+ grid-column: span 2;
+}
+
+/* Responzivní Grid */
+@media (max-width: 768px) {
+ .grid-container {
+ grid-template-columns: repeat(2, 1fr); /* 2 sloupce na tabletu */
+ }
+}
+
+@media (max-width: 480px) {
+ .grid-container {
+ grid-template-columns: 1fr; /* 1 sloupec na mobilu */
+ }
+}
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Otevřete **Developer Tools** (F12) a vyberte grid element
+3. V Chrome DevTools najdete **Grid** badge - klikněte pro vizualizaci mřížky
+4. Prozkoumejte `style.css` - jak funguje `display: grid`
+5. Zkuste měnit počet sloupců: `grid-template-columns: repeat(4, 1fr)`
+6. Experimentujte s `gap`, `grid-column`, `grid-row`
+7. Změňte velikost okna a sledujte responzivitu
+
+## 💡 Tip pro studenty
+
+### Kdy použít Grid:
+- ✅ Komplexní dvourozměrné layouty (řádky + sloupce)
+- ✅ Galerie obrázků
+- ✅ Celostránkové layouty (header, sidebar, main, footer)
+- ✅ Dashboardy, karty v mřížce
+- ✅ Kalendáře
+
+### Kdy raději Flexbox:
+- ❌ Jednosměrné layouty (jen řádek nebo jen sloupec)
+- ❌ Navigační menu
+- ❌ Jednoduchá centrování
+
+### Hlavní jednotky:
+- **fr** (fraction) = podíl dostupného prostoru
+ - `1fr 2fr` = první sloupec 1/3, druhý 2/3
+- **px** = pevná velikost
+- **%** = procenta z containeru
+- **auto** = automatická velikost podle obsahu
+
+### Grid layout pattern:
+```css
+/* Kontejner */
+.grid-container {
+ display: grid; /* MUSÍ BÝT! */
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+}
+
+/* Položky se umístí automaticky */
+.grid-item {
+ /* žádné speciální vlastnosti potřeba */
+}
+```
+
+## 🎯 Praktické příklady
+
+**Galerie 3 sloupce:**
+```css
+.galerie {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+}
+```
+
+**Responzivní galerie (bez media queries!):**
+```css
+.galerie {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 20px;
+}
+```
+
+**Layout stránky:**
+```css
+.layout {
+ display: grid;
+ grid-template-columns: 250px 1fr; /* sidebar + main */
+ grid-template-rows: 80px 1fr 60px; /* header + content + footer */
+ gap: 10px;
+ height: 100vh;
+}
+```
+
+## ⚠️ Důležité poznámky
+
+1. **display: grid musí být na KONTEJNERU**, ne na položkách!
+2. **Grid položky** = pouze přímé děti grid containeru
+3. Použijte **Chrome DevTools Grid inspector** pro debugování
+4. **repeat()** funkce šetří psaní: `repeat(3, 1fr)` = `1fr 1fr 1fr`
+
+## 🔗 Související lekce
+
+- **Předchozí:** 11_json - práce s JSON
+- **Další:** 13_bootstrap_intro - úvod do Bootstrapu
+- **Porovnání:** 10_flex - Flexbox (jednosměrný layout)
+- **Praktický projekt:** AI/ai_01_grid_responsive - kompletní Grid projekt s responzivitou
diff --git a/13_boostrap_intro/README.md b/13_boostrap_intro/README.md
new file mode 100644
index 0000000..1a40c64
--- /dev/null
+++ b/13_boostrap_intro/README.md
@@ -0,0 +1,119 @@
+# 13 - Úvod do Bootstrapu
+
+## 🎯 Co se naučíte
+
+V této lekci se seznámíte s Bootstrap frameworkem a jeho základními komponentami.
+
+## 📚 Témata lekce
+
+- **Co je Bootstrap** - CSS framework pro rychlý vývoj
+- **Připojení Bootstrapu** k projektu (lokální soubory)
+- **Container** - základní obal pro obsah (`.container`)
+- **Grid systém** - 12sloupcová mřížka
+ - `.row` - řádek
+ - `.col` - sloupce (automatická šířka)
+ - `.col-6` - sloupec se šířkou 6/12
+- **Responzivní třídy** - `col-md-6`, `col-lg-3`
+- **Typography** - `display-1`, `display-5`
+- **Utility třídy**:
+ - Okraje: `m-2`, `mx-2`, `p-2`
+ - Borders: `border`, `border-danger`, `rounded`
+ - Další: ``, ``, ``
+
+## 📂 Soubory v projektu
+
+- `index.html` - HTML s Bootstrap třídami
+- `css/bootstrap.css` - Bootstrap CSS (lokální)
+- `js/bootstrap.js` - Bootstrap JavaScript (lokální)
+
+## 💻 Ukázka z lekce
+
+```html
+
+
+
Hello, Bootstrap!
+
+
+
+
+
+ Obsah sloupce
+
+
+
+ Další sloupec
+
+
+
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Prozkoumejte Bootstrap třídy v HTML
+3. Změňte velikost okna - sledujte responzivní chování
+4. Vyzkoušejte Developer Tools (F12) - Device Toolbar
+5. Experimentujte s různými utility třídami
+6. Změňte `col-md-6` na `col-lg-4` a sledujte změny
+
+## 💡 Tip pro studenty
+
+### Bootstrap Grid System:
+- **12 sloupců celkem** v každém řádku
+- **col-6** = 6/12 = 50% šířky
+- **col-4** = 4/12 = 33.33% šířky
+- **col** = automatická šířka (rovnoměrně rozdělí prostor)
+
+### Responzivní breakpointy:
+- **xs** (extra small) = < 576px (mobil) - není třeba psát, je výchozí
+- **sm** (small) = ≥ 576px
+- **md** (medium) = ≥ 768px (tablet)
+- **lg** (large) = ≥ 992px (desktop)
+- **xl** (extra large) = ≥ 1200px
+
+### Příklad responzivity:
+```html
+
+
+
+
+
+```
+
+### Container vs Container-fluid:
+- **container** = fixní šířka, centrovaný
+- **container-fluid** = 100% šířky
+
+### Důležité:
+- VŽDY používejte **row** pro řádky
+- Sloupce (**col**) musí být uvnitř **row**
+- Celkový součet sloupců by měl být **12** (nebo méně)
+
+## 🎨 Utility třídy:
+
+```html
+
+m-2 = margin všude
+mx-2 = margin vlevo a vpravo
+my-3 = margin nahoře a dole
+mt-4 = margin nahoře
+
+
+p-2 = padding všude
+px-3 = padding vlevo a vpravo
+
+
+border = přidá border
+border-primary = modrý border
+border-3 = tlustší border
+rounded = zaoblené rohy
+```
+
+## 🔗 Související lekce
+
+- **Předchozí:** 12_grid - CSS Grid (pochopení grid systému)
+- **Důležité přípravné projekty:**
+ - AI/ai_01_grid_responsive - CSS Grid praxe
+ - AI/ai_04_prep_bootstrap - komplexní příprava
+- **Další:** 14_bootstrap_layout - pokročilejší Bootstrap layouty
+- **Související:** 15_bootstrap_components - Bootstrap komponenty
diff --git a/14_bootstrap_layout/README.md b/14_bootstrap_layout/README.md
new file mode 100644
index 0000000..bb0fbdb
--- /dev/null
+++ b/14_bootstrap_layout/README.md
@@ -0,0 +1,162 @@
+# 14 - Bootstrap Layout
+
+## 🎯 Co se naučíte
+
+V této lekci se naučíte vytvářet kompletní layout stránky s pomocí Bootstrapu.
+
+## 📚 Témata lekce
+
+- **Header s navigací** - `nav`, `nav-pills`, `nav-item`
+- **Flexbox utility třídy** - `d-flex`, `justify-content-center`, `align-items-center`
+- **Main content** - hlavní obsah stránky
+- **Jumbotron** - velká úvodní sekce (hero section)
+- **Tabulky** - `table`, `table-hover`, `table-dark`, `table-info`
+- **Footer** - patička stránky s `mt-auto`
+- **Sticky footer** - přilepený footer (flexbox pattern)
+- **Buttons** - `btn`, `btn-primary`
+
+## 📂 Soubory v projektu
+
+- `index.html` - kompletní layout s header, main, footer
+- `css/bootstrap.css` - Bootstrap CSS
+- `js/bootstrap.js` - Bootstrap JS
+
+## 💻 Ukázka z lekce
+
+```html
+
+
+
+ Název Stránky
+
+```
+
+## 🚀 Jak s lekcí pracovat
+
+1. Otevřete `index.html` v prohlížeči
+2. Prozkoumejte různé komponenty
+3. Vyzkoušejte změnit barvy komponent (primary → success)
+4. Experimentujte s kombinacemi komponent
+5. Zkuste vytvořit vlastní kartu s obrázkem a tlačítkem
+6. Prozkoumejte Bootstrap dokumentaci pro více variant
+
+## 💡 Tip pro studenty
+
+### Card layout:
+```html
+
+
+ 
+ 
+