skrabanek
7 days ago
3 changed files with 391 additions and 2 deletions
@ -0,0 +1,9 @@ |
|||
{ |
|||
"permissions": { |
|||
"allow": [ |
|||
"Bash(mkdir:*)" |
|||
], |
|||
"deny": [], |
|||
"ask": [] |
|||
} |
|||
} |
|||
@ -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) |
|||
|
|||
Loading…
Reference in new issue