# 🌐 Webové Technologie (WTL) 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á 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)
- 📁 [Bonusové materiály](#-bonusové-materiály)
- 💻 [VS Code Setup](#-vývojové-prostředí---visual-studio-code)
- 🛠️ [Jak pracovat s materiály](#️-jak-pracovat-s-materiály)
- 💡 [Tipy pro úspěch](#-tipy-pro-úspěch)
- 🆘 [Pomoc](#-když-si-nevíte-rady)
---
## 🚀 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** | [Pokročilé HTML](02/) | Tabulky, seznamy, Emmet zkratky |
| **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
- **[AI_extra_material](AI_extra_material/)** - Doplňkové studijní materiály
- Bootstrap form validace ukázky
- XSS bezpečnostní demo
- Informační materiály pro učitele (ISP, hodnocení)
---
## 💻 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/
├── README.md # Průvodce lekcí s vysvětlením
├── 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. **Přečtěte si README.md** - každá složka má průvodce s vysvětlením
2. **Prostudujte kód z hodiny** - Otevřete `index.html` a projděte si kód
3. **Experimentujte** - Měňte hodnoty, zkoušejte vlastní úpravy
4. **Použijte Live Server** - Pravé tlačítko → "Open with Live Server"
5. **Testujte v prohlížeči** - Používejte Developer Tools (F12)
6. **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 `