🌐 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ý Start

Pro nové studenty:

1. Naklonujte repozitář:

   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	HTML struktura, základní tagy, seznamy, tabulky
02	Formuláře	Input fieldy, validace, form atributy
03	Úvod do CSS	Selektory, box model, barvy, fonty
04	CSS Layout	Display, margin, padding, základní layout
05	JavaScript Intro	Proměnné, datové typy, operátory, funkce
06	JS + HTML	DOM manipulace, getElementById, innerHTML
07	JS + CSS + DOM	Změna stylů, classList, dynamické prvky
08	JS Formuláře	Form handling, události, základní validace
09	Media Queries	Responzivní design, breakpointy
10	Flexbox	Flex container, flex items, align, justify
11	JSON & AJAX	JSON formát, fetch API, async operace

🎨 ČÁST II: CSS Grid (Lekce 12)

Lekce	Téma	Zaměření
12	CSS Grid	Grid system, grid-template, gap, areas

🎯 ČÁST III: Bootstrap Framework (Lekce 13-17)

Lekce	Téma	Zaměření
13	Bootstrap Intro	Grid system, container, row, col
14	Bootstrap Layout	Responsive utilities, spacing, display
15	Bootstrap Components	Cards, buttons, navbar, alerts
16	Carousel	Bootstrap carousel komponenta
17	Modal	Modal dialogy a jejich použití

🚀 ČÁST IV: Pokročilé Techniky (Lekce 18-20)

Lekce	Téma	Zaměření
18	Bootstrap Forms	Form validace s Bootstrapem
19	Todo List	Praktický projekt - dynamická aplikace
20	AJAX	Asynchronní komunikace se serverem

📁 Bonusové Materiály

• 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
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:

{
  "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:

  <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)
• 🎨 CSS Grid (12)
• 🎯 Bootstrap (13-17)
• 🚀 Pokročilé (18-20)
• 💻 VS Code Setup
• 💡 Tipy pro úspěch
• 🆘 Pomoc