skrabanek
7 days ago
14 changed files with 23 additions and 1124 deletions
@ -1,249 +0,0 @@ |
|||||
# 🤖 AI Projekty - Příprava na Bootstrap |
|
||||
|
|
||||
Tyto projekty byly vytvořeny pro důkladné procvičení HTML, CSS a JavaScript konceptů před začátkem práce s Bootstrap frameworkem. |
|
||||
|
|
||||
## 📋 Přehled projektů |
|
||||
|
|
||||
### 🎨 AI 01 - CSS Grid & Responzivní Layout |
|
||||
**Složitost:** ⭐⭐ Střední |
|
||||
**Čas:** 45-60 minut |
|
||||
**Zaměření:** CSS Grid, pokročilé selektory, media queries |
|
||||
|
|
||||
**Co se naučíte:** |
|
||||
- CSS Grid (grid-template-columns, gap) |
|
||||
- nth-child, first-child, last-child selektory |
|
||||
- Responzivní design s media queries |
|
||||
- CSS transformace při hover |
|
||||
|
|
||||
**Soubory:** |
|
||||
- `ai_01_grid_responsive/ZADANI.md` - Detailní zadání |
|
||||
- `ai_01_grid_responsive/index.html` - Startovací HTML |
|
||||
- `ai_01_grid_responsive/style.css` - CSS šablona |
|
||||
- `ai_01_grid_responsive/reseni.html` - Kompletní řešení |
|
||||
- `ai_01_grid_responsive/reseni.css` - CSS řešení s komentáři |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
### 🏗️ AI 02 - Sémantické HTML5 & CSS Positioning |
|
||||
**Složitost:** ⭐⭐⭐ Náročné |
|
||||
**Čas:** 60-90 minut |
|
||||
**Zaměření:** Sémantické elementy, positioning, jednotky |
|
||||
|
|
||||
**Co se naučíte:** |
|
||||
- HTML5 sémantické elementy (nav, main, section, article, aside) |
|
||||
- Position: fixed, sticky, relative, absolute |
|
||||
- CSS jednotky: rem, em, vh, vw |
|
||||
- Strukturu moderní webové stránky |
|
||||
|
|
||||
**Soubory:** |
|
||||
- `ai_02_semantic_portfolio/ZADANI.md` |
|
||||
- `ai_02_semantic_portfolio/index.html` |
|
||||
- `ai_02_semantic_portfolio/style.css` |
|
||||
- `ai_02_semantic_portfolio/reseni.html` |
|
||||
- `ai_02_semantic_portfolio/reseni.css` |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
### ✅ AI 03 - Pokročilá Validace Formulářů |
|
||||
**Složitost:** ⭐⭐⭐ Náročné |
|
||||
**Čas:** 90-120 minut |
|
||||
**Zaměření:** JavaScript validace, event handling, RegEx |
|
||||
|
|
||||
**Co se naučíte:** |
|
||||
- addEventListener vs inline events |
|
||||
- Form validation s JavaScriptem |
|
||||
- Regulární výrazy (RegEx) |
|
||||
- DOM manipulace (classList, innerHTML) |
|
||||
- Real-time validace s visual feedbackem |
|
||||
|
|
||||
**Soubory:** |
|
||||
- `ai_03_form_validation/ZADANI.md` |
|
||||
- `ai_03_form_validation/index.html` |
|
||||
- `ai_03_form_validation/style.css` |
|
||||
- `ai_03_form_validation/script.js` |
|
||||
- `ai_03_form_validation/reseni.html` |
|
||||
- `ai_03_form_validation/reseni.css` |
|
||||
- `ai_03_form_validation/reseni.js` |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
### 🚀 AI 04 - Komplexní Bootstrap Prep Projekt |
|
||||
**Složitost:** ⭐⭐⭐⭐ Velmi náročné |
|
||||
**Čas:** 4-6 hodin |
|
||||
**Zaměření:** Komplexní projekt kombinující VŠE |
|
||||
|
|
||||
**Co se naučíte:** |
|
||||
- Všechny předchozí koncepty dohromady |
|
||||
- CSS proměnné (custom properties) |
|
||||
- Pokročilé animace |
|
||||
- Scroll efekty |
|
||||
- Modal okna, accordions |
|
||||
- Mobile-first přístup |
|
||||
|
|
||||
**Soubory:** |
|
||||
- `ai_04_prep_bootstrap/ZADANI.md` - Komplexní zadání |
|
||||
- `ai_04_prep_bootstrap/index.html` |
|
||||
- `ai_04_prep_bootstrap/css/style.css` |
|
||||
- `ai_04_prep_bootstrap/css/animations.css` |
|
||||
- `ai_04_prep_bootstrap/js/main.js` |
|
||||
- `ai_04_prep_bootstrap/js/validation.js` |
|
||||
- `ai_04_prep_bootstrap/js/scroll.js` |
|
||||
- `ai_04_prep_bootstrap/RESENI_PRIKLAD.md` - Tips & příklady |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🎯 Doporučený postup |
|
||||
|
|
||||
### Týden 1: |
|
||||
- **Den 1-2:** AI 01 - CSS Grid (+ opakování Grid konceptů) |
|
||||
- **Den 3-4:** AI 02 - Sémantika & Positioning (+ opakování HTML5) |
|
||||
|
|
||||
### Týden 2: |
|
||||
- **Den 1-3:** AI 03 - Validace formulářů (+ opakování JavaScript) |
|
||||
- **Den 4-5:** Příprava na AI 04 (zopakovat vše) |
|
||||
|
|
||||
### Týden 3: |
|
||||
- **Celý týden:** AI 04 - Komplexní projekt |
|
||||
- **Prezentace:** Konec týdne |
|
||||
|
|
||||
### Týden 4: |
|
||||
- **Začátek Bootstrap!** 🎉 |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📚 Co budete znát po dokončení všech projektů |
|
||||
|
|
||||
### HTML: |
|
||||
✅ Sémantické HTML5 elementy |
|
||||
✅ Formuláře a jejich atributy |
|
||||
✅ Správná struktura dokumentu |
|
||||
✅ Accessibility best practices |
|
||||
|
|
||||
### CSS: |
|
||||
✅ CSS Grid systém |
|
||||
✅ Flexbox |
|
||||
✅ Positioning (všechny typy) |
|
||||
✅ Media queries & responzivita |
|
||||
✅ CSS proměnné |
|
||||
✅ Jednotky (rem, em, vh, vw) |
|
||||
✅ Pseudo-třídy a pseudo-elementy |
|
||||
✅ Animations & transitions |
|
||||
✅ Gradienty, shadows, filters |
|
||||
|
|
||||
### JavaScript: |
|
||||
✅ DOM manipulace |
|
||||
✅ Event handling (addEventListener) |
|
||||
✅ Form validation |
|
||||
✅ Podmínky a cykly |
|
||||
✅ Funkce (function declaration, arrow functions) |
|
||||
✅ Regulární výrazy (RegEx) |
|
||||
✅ Práce s objekty a poli |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🔍 Proč tyto projekty před Bootstrapem? |
|
||||
|
|
||||
Bootstrap je mocný framework, ale bez pochopení základních konceptů můžete: |
|
||||
- Neumět framework přizpůsobit svým potřebám |
|
||||
- Vytvářet neefektivní kód |
|
||||
- Záviset na frameworku místo pochopení problému |
|
||||
- Mít problém při debugování |
|
||||
|
|
||||
**Po těchto projektech budete:** |
|
||||
- Rozumět, co Bootstrap dělá "pod kapotou" |
|
||||
- Umět rozhodnout, kdy Bootstrap použít a kdy ne |
|
||||
- Efektivně přizpůsobovat Bootstrap komponenty |
|
||||
- Psát lepší a čistší kód |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 💡 Tips pro studenty |
|
||||
|
|
||||
### Při řešení projektů: |
|
||||
1. **Nejdřív HTML struktura** - Vždy začněte správnou HTML strukturou |
|
||||
2. **Pak mobile styling** - CSS začněte od mobile verzí (mobile-first) |
|
||||
3. **JavaScript na konec** - Interaktivitu přidávejte, když máte hotové HTML & CSS |
|
||||
4. **Časté testování** - Testujte často v browseru, nečekejte na konec |
|
||||
5. **Developer tools** - Používejte Chrome DevTools (F12) pro debugování |
|
||||
6. **Commit často** - Pokud používáte Git, commitujte po každé sekci |
|
||||
|
|
||||
### Užitečné VS Code extensions: |
|
||||
- Live Server - pro live reload |
|
||||
- Prettier - pro formátování kódu |
|
||||
- Auto Rename Tag - automatické přejmenování párových tagů |
|
||||
- CSS Peek - rychlý náhled CSS definic |
|
||||
|
|
||||
### Keyboard shortcuts: |
|
||||
- `Ctrl + /` - zakomentovat/odkomentovat |
|
||||
- `Alt + Shift + F` - formátovat dokument |
|
||||
- `Ctrl + D` - vybrat další výskyt slova |
|
||||
- `Alt + Up/Down` - přesunout řádek nahoru/dolů |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🆘 Když si nevíte rady |
|
||||
|
|
||||
1. **Přečtěte si zadání znovu** - Často je odpověď v zadání |
|
||||
2. **Podívejte se na předchozí lekce** - V `01_uvod` až `11_json` najdete příklady |
|
||||
3. **Použijte console.log()** - Pro debugging JavaScriptu |
|
||||
4. **Zkontrolujte Developer Tools** - Konzole často ukazuje chyby |
|
||||
5. **Postupujte po malých krocích** - Neřešte vše najednou |
|
||||
6. **Koukněte na reseni.html/css/js** - Ale zkuste to sami nejdřív! |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📊 Self-assessment checklist |
|
||||
|
|
||||
Po dokončení všech projektů byste měli umět odpovědět ANO na tyto otázky: |
|
||||
|
|
||||
### HTML: |
|
||||
- [ ] Znám rozdíl mezi `<div>` a sémantickými elementy? |
|
||||
- [ ] Umím vytvořit správnou strukturu formuláře? |
|
||||
- [ ] Vím, kdy použít `<section>`, `<article>`, `<aside>`? |
|
||||
|
|
||||
### CSS: |
|
||||
- [ ] Rozumím rozdílu mezi Grid a Flexbox? |
|
||||
- [ ] Umím vytvořit responzivní layout bez frameworku? |
|
||||
- [ ] Znám všechny typy positioningu a kdy je použít? |
|
||||
- [ ] Umím pracovat s rem, em jednotkami? |
|
||||
- [ ] Vím, jak fungují media queries? |
|
||||
|
|
||||
### JavaScript: |
|
||||
- [ ] Umím validovat formulář pomocí JavaScriptu? |
|
||||
- [ ] Rozumím event listenerům? |
|
||||
- [ ] Umím manipulovat s DOM? |
|
||||
- [ ] Znám základy RegEx? |
|
||||
- [ ] Umím vytvořit jednoduchou interaktivitu? |
|
||||
|
|
||||
**Pokud máte většinu zaškrtlou, jste připraveni na Bootstrap!** 🎉 |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📈 Co dál po Bootstrap? |
|
||||
|
|
||||
Po zvládnutí Bootstrap můžete pokračovat v: |
|
||||
- **Tailwind CSS** - utility-first framework |
|
||||
- **React** - JavaScript library pro UI |
|
||||
- **Vue.js** - progresivní JavaScript framework |
|
||||
- **SASS/SCSS** - CSS preprocessor |
|
||||
- **Node.js & Express** - backend JavaScript |
|
||||
- **Databáze** - MySQL, MongoDB |
|
||||
- **Full-stack projekty** |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🙏 Acknowledgments |
|
||||
|
|
||||
Projekty vytvořeny pro předmět **Webové Technologie** (WTL) |
|
||||
Cílová skupina: Studenti 3. ročníku IT |
|
||||
Generováno: 2025 |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
**Hodně štěstí s projekty! Pokud máte jakékoliv dotazy, neváhejte se zeptat.** 🚀 |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📞 Kontakt na učitele |
|
||||
|
|
||||
Při problémech nebo dotazech se obraťte na vyučujícího během konzultačních hodin nebo přes školní email. |
|
||||
@ -1,21 +0,0 @@ |
|||||
Ahoj, |
|
||||
|
|
||||
posílám seznam témát které budeme dělat na programovaní, na náš kurzu na amos "PRG 1 - ročník 25/26" (máme společně s Radkem Rybákem, máme je rozdělené na skupiny) |
|
||||
moje skupina má studijní materiály z hodiny zde: https://git.asgard.odbornaskola.cz/skrabanek/1i_prg |
|
||||
|
|
||||
Seznam témat: |
|
||||
- input, podminky, cykly |
|
||||
- ošetření chyb |
|
||||
- základní moduly (random, os, time, datetime) |
|
||||
- seznamy |
|
||||
- práce se soubory |
|
||||
- funkce |
|
||||
- pokročilá práce s funkcemi |
|
||||
- práce s textem a stringy |
|
||||
- instalace knihoven a pip |
|
||||
- CLI aplikace |
|
||||
- Objektově orientované programování (OOP) |
|
||||
- JSON & HTTP requests |
|
||||
|
|
||||
Děkuji, snad jsem na nic nezpoměl |
|
||||
Jakub Škrabánek |
|
||||
@ -1,428 +0,0 @@ |
|||||
# Individuální studijní plán - Webové technologie (WTL) |
|
||||
## 3. ročník IT - školní rok 2025/2026 |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Základní informace |
|
||||
|
|
||||
**Předmět:** Webové technologie (WTL) |
|
||||
**Ročník:** 3. ročník IT |
|
||||
**Vyučující:** [Jméno vyučujícího] |
|
||||
**Studijní materiály:** https://[odkaz na váš repozitář] |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## Celkový přehled kurzu |
|
||||
|
|
||||
Kurz Webových technologií je rozdělen do **dvou pololetí**: |
|
||||
|
|
||||
### **1. pololetí (září - leden)** |
|
||||
- Základy HTML, CSS a JavaScriptu |
|
||||
- Responzivní webdesign |
|
||||
- Bootstrap framework |
|
||||
- Webová bezpečnost (XSS útoky) |
|
||||
- Komplexní frontend projekty |
|
||||
|
|
||||
### **2. pololetí (únor - červen)** |
|
||||
- PHP základy |
|
||||
- Databáze (MySQL/MariaDB) |
|
||||
- Backend web development |
|
||||
- Webové aplikace (frontend + backend) |
|
||||
- Závěrečný projekt |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📋 Seznam témat - 1. pololetí (Frontend) |
|
||||
|
|
||||
### 1. Úvod do HTML |
|
||||
- Struktura HTML dokumentu |
|
||||
- Sémantické elementy (header, nav, main, footer, article, section, aside) |
|
||||
- Nadpisy, odstavce, seznamy |
|
||||
- Odkazy a obrázky |
|
||||
- Tabulky |
|
||||
- **Výstup:** Základní webová stránka |
|
||||
|
|
||||
### 2. HTML Formuláře |
|
||||
- Formulářové elementy (input, textarea, select, button) |
|
||||
- Typy inputů (text, email, password, number, date, atd.) |
|
||||
- Atributy formulářů (required, placeholder, pattern) |
|
||||
- **Výstup:** Kontaktní formulář |
|
||||
|
|
||||
### 3. Úvod do CSS |
|
||||
- Selektory (element, třída, ID) |
|
||||
- Box model (margin, padding, border) |
|
||||
- Barvy a pozadí |
|
||||
- Typografie (fonts, text styling) |
|
||||
- Pseudo-třídy (:hover, :visited, :focus) |
|
||||
- Gradienty |
|
||||
- **Výstup:** Nastylovaná webová stránka |
|
||||
|
|
||||
### 4. CSS Layout |
|
||||
- Display property (block, inline, inline-block) |
|
||||
- Float a clear (legacy layout) |
|
||||
- Základy pozicování (static, relative, absolute, fixed) |
|
||||
- **Výstup:** Vícesloupcový layout |
|
||||
|
|
||||
### 5. Úvod do JavaScriptu |
|
||||
- Proměnné (let, const, var) |
|
||||
- Datové typy (string, number, boolean, object, array) |
|
||||
- Operátory |
|
||||
- Podmínky (if, else, switch) |
|
||||
- Cykly (for, while) |
|
||||
- Funkce (function declaration, arrow functions) |
|
||||
- **Výstup:** Jednoduché JS skripty |
|
||||
|
|
||||
### 6. JavaScript + HTML |
|
||||
- DOM (Document Object Model) |
|
||||
- Manipulace s HTML elementy |
|
||||
- querySelector, getElementById |
|
||||
- innerHTML, innerText, textContent |
|
||||
- Vytváření a odstraňování elementů |
|
||||
- **Výstup:** Dynamická webová stránka |
|
||||
|
|
||||
### 7. JavaScript + CSS + DOM |
|
||||
- Manipulace s CSS přes JavaScript |
|
||||
- classList (add, remove, toggle) |
|
||||
- Změna stylů (style property) |
|
||||
- Event handling (onclick, addEventListener) |
|
||||
- **Výstup:** Interaktivní elementy (toggle, show/hide) |
|
||||
|
|
||||
### 8. JavaScript Formuláře |
|
||||
- Event handling u formulářů |
|
||||
- Validace formulářů s JavaScriptem |
|
||||
- preventDefault() |
|
||||
- Získávání hodnot z formulářů |
|
||||
- **Výstup:** Validovaný formulář |
|
||||
|
|
||||
### 9. Media Queries & Responzivní Design |
|
||||
- Viewport meta tag |
|
||||
- Media queries (@media) |
|
||||
- Breakpoints (mobile, tablet, desktop) |
|
||||
- Mobile-first přístup |
|
||||
- Responzivní obrázky |
|
||||
- **Výstup:** Responzivní webová stránka |
|
||||
|
|
||||
### 10. CSS Flexbox |
|
||||
- display: flex |
|
||||
- flex-direction, justify-content, align-items |
|
||||
- flex-wrap, gap |
|
||||
- Flex položky (flex-grow, flex-shrink, flex-basis) |
|
||||
- **Výstup:** Flexbox layout |
|
||||
|
|
||||
### 11. JSON & AJAX |
|
||||
- Formát JSON |
|
||||
- Fetch API |
|
||||
- Asynchronní JavaScript (promises, async/await) |
|
||||
- REST API základy |
|
||||
- **Výstup:** Aplikace načítající data z API |
|
||||
|
|
||||
### 12. CSS Grid |
|
||||
- display: grid |
|
||||
- grid-template-columns, grid-template-rows |
|
||||
- gap, grid-gap |
|
||||
- Grid areas |
|
||||
- Rozdíl Grid vs Flexbox |
|
||||
- **Výstup:** Grid-based layout |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🤖 AI Přípravné projekty (před Bootstrapem) |
|
||||
|
|
||||
### AI 01 - CSS Grid & Responzivní Layout |
|
||||
- Pokročilé Grid techniky |
|
||||
- nth-child selektory |
|
||||
- Komplexní responzivní design |
|
||||
- **Hodnocení:** 10 bodů |
|
||||
|
|
||||
### AI 02 - Sémantické HTML5 & CSS Positioning |
|
||||
- Sémantická struktura stránky |
|
||||
- Position: sticky, absolute, fixed, relative |
|
||||
- CSS jednotky (rem, em, vh, vw) |
|
||||
- **Hodnocení:** 15 bodů |
|
||||
|
|
||||
### AI 03 - Pokročilá Validace Formulářů |
|
||||
- addEventListener |
|
||||
- Regulární výrazy (RegEx) |
|
||||
- Real-time validace |
|
||||
- Visual feedback |
|
||||
- **Hodnocení:** 20 bodů |
|
||||
|
|
||||
### AI 04 - Komplexní Bootstrap Prep Projekt |
|
||||
- Kombinace všech předchozích konceptů |
|
||||
- CSS custom properties (variables) |
|
||||
- Pokročilé animace |
|
||||
- Modal, accordion implementace |
|
||||
- **Hodnocení:** 30 bodů |
|
||||
|
|
||||
**Celkem za AI projekty: 75 bodů** |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🎨 Bootstrap Framework |
|
||||
|
|
||||
### 13. Bootstrap Úvod |
|
||||
- Instalace a setup Bootstrapu |
|
||||
- Bootstrap grid systém |
|
||||
- Container, row, col |
|
||||
- Utility třídy |
|
||||
|
|
||||
### 14. Bootstrap Layout |
|
||||
- Responzivní breakpoints |
|
||||
- Grid options |
|
||||
- Flexbox utilities |
|
||||
- Spacing utilities (m-, p-) |
|
||||
|
|
||||
### 15. Bootstrap Komponenty |
|
||||
- Buttons, badges, alerts |
|
||||
- Cards |
|
||||
- Navbar |
|
||||
- Forms (Bootstrap form styling) |
|
||||
- Tables |
|
||||
|
|
||||
### 16. Bootstrap Carousel |
|
||||
- Carousel komponenta |
|
||||
- Indicators, controls |
|
||||
- Automatické přepínání |
|
||||
- **Výstup:** Fotogalerie s carousel |
|
||||
|
|
||||
### 17. Bootstrap Modal |
|
||||
- Modal dialog |
|
||||
- Triggery pro modal |
|
||||
- Modal velikosti |
|
||||
- **Výstup:** Aplikace s modal dialogy |
|
||||
|
|
||||
### 18. Bootstrap Form Validation |
|
||||
- Bootstrap validační třídy |
|
||||
- JavaScript validace s Bootstrapem |
|
||||
- Custom validation styles |
|
||||
- **Výstup:** Profesionální registrační formulář |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🔒 Webová bezpečnost |
|
||||
|
|
||||
### 19. XSS (Cross-Site Scripting) Demo |
|
||||
- Co je XSS útok |
|
||||
- Reflected XSS |
|
||||
- Stored XSS |
|
||||
- Prevence XSS útoků |
|
||||
- HTML sanitizace |
|
||||
- **Výstup:** Demo aplikace s XSS zranitelností a její oprava |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🚀 Komplexní Frontend projekty |
|
||||
|
|
||||
### 20. TODO List aplikace |
|
||||
- CRUD operace (Create, Read, Update, Delete) |
|
||||
- LocalStorage |
|
||||
- Bootstrap UI |
|
||||
- JavaScript manipulace s daty |
|
||||
- **Výstup:** Funkční TODO list |
|
||||
|
|
||||
### 21. AJAX & API Integration |
|
||||
- Fetch API pokročile |
|
||||
- Práce s REST API |
|
||||
- Error handling |
|
||||
- Loading states |
|
||||
- **Výstup:** Aplikace pracující s externím API |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📋 Seznam témat - 2. pololetí (Backend) |
|
||||
|
|
||||
### 22. Úvod do PHP |
|
||||
- PHP syntaxe |
|
||||
- Proměnné a datové typy |
|
||||
- Podmínky a cykly |
|
||||
- Funkce v PHP |
|
||||
- Superglobals ($_GET, $_POST, $_SERVER) |
|
||||
|
|
||||
### 23. PHP & Formuláře |
|
||||
- Zpracování formulářů (GET, POST) |
|
||||
- Validace na straně serveru |
|
||||
- Sanitizace vstupů |
|
||||
- CSRF ochrana |
|
||||
|
|
||||
### 24. PHP & Soubory |
|
||||
- Čtení a zápis souborů |
|
||||
- Nahrávání souborů |
|
||||
- Práce s adresáři |
|
||||
- File permissions |
|
||||
|
|
||||
### 25. Úvod do databází |
|
||||
- Relační databáze |
|
||||
- MySQL/MariaDB |
|
||||
- phpMyAdmin |
|
||||
- SQL příkazy (SELECT, INSERT, UPDATE, DELETE) |
|
||||
|
|
||||
### 26. PHP & MySQL |
|
||||
- Připojení k databázi (mysqli, PDO) |
|
||||
- Prepared statements |
|
||||
- SQL injection prevence |
|
||||
- Databázové dotazy z PHP |
|
||||
|
|
||||
### 27. Sessions & Cookies |
|
||||
- HTTP sessions |
|
||||
- Cookies |
|
||||
- Autentizace uživatelů |
|
||||
- Session security |
|
||||
|
|
||||
### 28. Registrace & Login systém |
|
||||
- Uživatelská registrace |
|
||||
- Hash hesel (password_hash, password_verify) |
|
||||
- Login/logout funkcionalita |
|
||||
- Ochrana stránek (middleware) |
|
||||
|
|
||||
### 29. CRUD Webová aplikace |
|
||||
- Create, Read, Update, Delete operace |
|
||||
- Databázové operace |
|
||||
- Admin rozhraní |
|
||||
- **Výstup:** Blog nebo e-shop backend |
|
||||
|
|
||||
### 30. REST API v PHP |
|
||||
- JSON responses |
|
||||
- API endpoints |
|
||||
- HTTP metody (GET, POST, PUT, DELETE) |
|
||||
- API authentication |
|
||||
|
|
||||
### 31. Závěrečný projekt |
|
||||
- Komplexní webová aplikace |
|
||||
- Frontend (HTML, CSS, JS, Bootstrap) |
|
||||
- Backend (PHP, MySQL) |
|
||||
- Funkční features (registrace, login, CRUD) |
|
||||
- Responzivní design |
|
||||
- **Hodnocení:** 100 bodů |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🎯 Očekávané výstupy kurzu |
|
||||
|
|
||||
Po dokončení kurzu by studenti měli umět: |
|
||||
|
|
||||
### Frontend: |
|
||||
✅ Vytvořit sémanticky správnou HTML strukturu |
|
||||
✅ Nastylovat moderní responzivní web pomocí CSS |
|
||||
✅ Používat CSS Grid a Flexbox pro layout |
|
||||
✅ Psát čistý a efektivní JavaScript kód |
|
||||
✅ Manipulovat s DOM a zpracovávat eventy |
|
||||
✅ Validovat formuláře |
|
||||
✅ Pracovat s JSON a API pomocí Fetch |
|
||||
✅ Používat Bootstrap framework |
|
||||
✅ Rozumět základům webové bezpečnosti (XSS) |
|
||||
|
|
||||
### Backend: |
|
||||
✅ Psát PHP skripty |
|
||||
✅ Zpracovávat formuláře na serveru |
|
||||
✅ Pracovat s MySQL databází |
|
||||
✅ Vytvořit registrační a přihlašovací systém |
|
||||
✅ Implementovat CRUD operace |
|
||||
✅ Zabezpečit webovou aplikaci (SQL injection, XSS, CSRF) |
|
||||
✅ Vytvořit jednoduché REST API |
|
||||
|
|
||||
### Soft skills: |
|
||||
✅ Debugovat kód pomocí Developer Tools |
|
||||
✅ Používat Git pro verzování kódu |
|
||||
✅ Psát čitelný a udržovatelný kód |
|
||||
✅ Testovat aplikace v různých prohlížečích |
|
||||
✅ Pracovat samostatně i v týmu |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📊 Hodnocení |
|
||||
|
|
||||
### 1. pololetí: |
|
||||
- **AI projekty:** 75 bodů (AI 01-04) |
|
||||
- **Průběžné projekty:** 50 bodů |
|
||||
- **Aktivita a domácí úkoly:** 25 bodů |
|
||||
- **Test z frontend technologií:** 50 bodů |
|
||||
- **Celkem:** 200 bodů |
|
||||
|
|
||||
### 2. pololetí: |
|
||||
- **PHP & MySQL projekty:** 50 bodů |
|
||||
- **Závěrečný projekt:** 100 bodů |
|
||||
- **Aktivita a domácí úkoly:** 25 bodů |
|
||||
- **Test z backend technologií:** 25 bodů |
|
||||
- **Celkem:** 200 bodů |
|
||||
|
|
||||
### Celkové hodnocení za rok: 400 bodů |
|
||||
|
|
||||
**Klasifikace:** |
|
||||
- 90-100% (360-400 bodů): Výborný (1) |
|
||||
- 75-89% (300-359 bodů): Chvalitebný (2) |
|
||||
- 60-74% (240-299 bodů): Dobrý (3) |
|
||||
- 45-59% (180-239 bodů): Dostatečný (4) |
|
||||
- 0-44% (0-179 bodů): Nedostatečný (5) |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🛠️ Doporučené nástroje |
|
||||
|
|
||||
### Editor: |
|
||||
- **Visual Studio Code** (primární doporučení) |
|
||||
- Extensions: Live Server, Prettier, Auto Rename Tag, CSS Peek |
|
||||
|
|
||||
### Prohlížeče: |
|
||||
- **Google Chrome** (primární pro vývoj) |
|
||||
- Firefox, Edge (testování kompatibility) |
|
||||
- Chrome DevTools (F12) pro debugging |
|
||||
|
|
||||
### Backend (2. pololetí): |
|
||||
- **XAMPP** nebo **WAMP** (Apache + MySQL + PHP) |
|
||||
- **phpMyAdmin** (správa databáze) |
|
||||
|
|
||||
### Ostatní: |
|
||||
- **Git** pro verzování kódu |
|
||||
- **GitHub/GitLab** pro sdílení projektů |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📚 Užitečné zdroje |
|
||||
|
|
||||
### Dokumentace: |
|
||||
- [MDN Web Docs](https://developer.mozilla.org/) - HTML, CSS, JavaScript |
|
||||
- [Bootstrap dokumentace](https://getbootstrap.com/docs/) |
|
||||
- [PHP dokumentace](https://www.php.net/manual/en/) |
|
||||
- [MySQL dokumentace](https://dev.mysql.com/doc/) |
|
||||
|
|
||||
### Online nástroje: |
|
||||
- [CodePen](https://codepen.io/) - Online playground |
|
||||
- [regex101.com](https://regex101.com/) - RegEx tester |
|
||||
- [Can I Use](https://caniuse.com/) - Browser compatibility |
|
||||
- [CSS-Tricks](https://css-tricks.com/) - CSS tutoriály |
|
||||
|
|
||||
### Komunita: |
|
||||
- [Stack Overflow](https://stackoverflow.com/) - Q&A |
|
||||
- [CSS Tricks](https://css-tricks.com/) |
|
||||
- [JavaScript.info](https://javascript.info/) |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📞 Kontakt |
|
||||
|
|
||||
**Vyučující:** [Jméno vyučujícího] |
|
||||
**Email:** [email] |
|
||||
**Konzultační hodiny:** [časy] |
|
||||
**Repozitář:** [odkaz na Git repozitář] |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📝 Poznámky |
|
||||
|
|
||||
- Všechny projekty a úkoly budou zadávány průběžně během školního roku |
|
||||
- Studenti jsou povinni dodržovat termíny odevzdání |
|
||||
- Plagiátorství (kopírování kódu) bude sankcionováno |
|
||||
- Aktivní účast na hodinách je důležitá pro pochopení látky |
|
||||
- Doporučuje se pravidelné opakování a procvičování |
|
||||
- Studenti mohou využít konzultační hodiny pro pomoc s projekty |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
**Vytvořeno:** [datum] |
|
||||
**Předmět:** Webové Technologie (WTL) |
|
||||
**Cílová skupina:** 3. ročník IT |
|
||||
**Školní rok:** 2025/2026 |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
*Tento studijní plán může být upraven na základě potřeb studentů a aktuálního pokroku ve výuce.* |
|
||||
@ -1,31 +0,0 @@ |
|||||
Ahoj, |
|
||||
|
|
||||
posílám seznam témat které budeme dělat na Webových technologiích, na náš kurzu "WTL - 3. ročník 25/26" |
|
||||
studijní materiály z hodiny zde: [odkaz na repozitář] |
|
||||
|
|
||||
Seznam témat - 1. pololetí (Frontend): |
|
||||
- úvod do HTML (struktura, sémantika, formuláře, tabulky) |
|
||||
- úvod do CSS (selektory, box model, barvy, typografie) |
|
||||
- CSS layout (float, positioning, flexbox, grid) |
|
||||
- media queries a responzivní design |
|
||||
- úvod do JavaScriptu (proměnné, podmínky, cykly, funkce) |
|
||||
- JavaScript + DOM (manipulace s HTML, querySelector, innerHTML) |
|
||||
- JavaScript eventy a validace formulářů |
|
||||
- JSON & Fetch API (asynchronní JavaScript, REST API) |
|
||||
- Bootstrap framework (grid systém, komponenty, utilities) |
|
||||
- Bootstrap pokročile (carousel, modal, form validation) |
|
||||
- webová bezpečnost (XSS útoky, prevence, sanitizace) |
|
||||
- komplexní frontend projekty (TODO list, AJAX aplikace) |
|
||||
|
|
||||
Seznam témat - 2. pololetí (Backend): |
|
||||
- úvod do PHP (syntaxe, proměnné, podmínky, cykly, funkce) |
|
||||
- PHP formuláře (GET, POST, validace, sanitizace) |
|
||||
- PHP práce se soubory (čtení, zápis, upload) |
|
||||
- úvod do databází (MySQL, SQL příkazy) |
|
||||
- PHP & MySQL (připojení, dotazy, prepared statements) |
|
||||
- sessions & cookies (autentizace, zabezpečení) |
|
||||
- registrace & login systém (hash hesel, ochrana) |
|
||||
- závěrečný full-stack projekt (frontend + backend + databáze) |
|
||||
|
|
||||
Děkuji, snad jsem na nic nezapomněl |
|
||||
[Tvoje jméno] |
|
||||
@ -1,351 +0,0 @@ |
|||||
# 👨🏫 Informace pro učitele - AI Projekty |
|
||||
|
|
||||
## 📊 Analýza současného stavu studentů |
|
||||
|
|
||||
### ✅ Co studenti již zvládají: |
|
||||
|
|
||||
**HTML:** |
|
||||
- Základní struktura, nadpisy (h1-h6) |
|
||||
- Odkazy, obrázky |
|
||||
- Formuláře (input, textarea, select, button) |
|
||||
- Tabulky a seznamy |
|
||||
- Částečně sémantické elementy (header, footer, aside, article) |
|
||||
|
|
||||
**CSS:** |
|
||||
- Základní selektory (element, třída, ID) |
|
||||
- Box model (margin, padding, border) |
|
||||
- Pseudo-třídy (:hover, :visited) |
|
||||
- Gradienty a transitions |
|
||||
- Flexbox (základy) |
|
||||
- Media queries (základy) |
|
||||
- Float-based layout (starší přístup) |
|
||||
|
|
||||
**JavaScript:** |
|
||||
- Proměnné (let, const, var) |
|
||||
- Datové typy a objekty |
|
||||
- Podmínky a cykly |
|
||||
- Funkce |
|
||||
- DOM manipulace (getElementById, innerHTML, innerText) |
|
||||
- Event handling (inline onclick) |
|
||||
- JSON a Fetch API |
|
||||
|
|
||||
### ⚠️ Co chybí před Bootstrapem: |
|
||||
|
|
||||
**KRITICKÉ mezery:** |
|
||||
1. **CSS Grid** - chybí úplně |
|
||||
2. **addEventListener** - používají jen inline onclick |
|
||||
3. **Pokročilé CSS selektory** (nth-child, ::before, ::after) |
|
||||
4. **CSS jednotky** - používají jen px, ne rem/em/vh/vw |
|
||||
5. **Position: sticky a absolute** - nepoužito |
|
||||
6. **Form validace s JS** - jen základní |
|
||||
|
|
||||
**DOPORUČUJI doplnit:** |
|
||||
7. **CSS proměnné** (custom properties) |
|
||||
8. **Pokročilé animace** |
|
||||
9. **Scroll efekty** |
|
||||
10. **Mobile-first přístup** |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🎯 Účel AI projektů |
|
||||
|
|
||||
Projekty byly navrženy tak, aby: |
|
||||
1. **Systematicky doplnily mezery** v znalostech |
|
||||
2. **Postupně zvyšovaly náročnost** (od jednoduchého po komplexní) |
|
||||
3. **Připravily na Bootstrap filozofii** (grid systém, utility třídy, komponenty) |
|
||||
4. **Poskytly praktickou zkušenost** s real-world projekty |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📋 Přehled projektů pro učitele |
|
||||
|
|
||||
### AI 01 - CSS Grid & Responzivní Layout |
|
||||
**Čas:** 1-2 vyučovací hodiny |
|
||||
**Obtížnost:** Střední |
|
||||
**Cíl:** Naučit CSS Grid před Bootstrap grid systémem |
|
||||
|
|
||||
**Klíčové koncepty:** |
|
||||
- `display: grid` |
|
||||
- `grid-template-columns` |
|
||||
- `gap` |
|
||||
- Pokročilé selektory (nth-child) |
|
||||
- Media queries pro responzivitu |
|
||||
|
|
||||
**Výstup:** Responzivní galerie s 9 položkami |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
### AI 02 - Sémantické HTML5 & CSS Positioning |
|
||||
**Čas:** 2-3 vyučovací hodiny |
|
||||
**Obtížnost:** Náročné |
|
||||
**Cíl:** Sémantický HTML5 a všechny typy positioning |
|
||||
|
|
||||
**Klíčové koncepty:** |
|
||||
- Sémantické elementy (nav, main, section, article, aside) |
|
||||
- Position: fixed, sticky, relative, absolute |
|
||||
- CSS jednotky: rem, em, vh, vw |
|
||||
- Správná struktura moderní stránky |
|
||||
|
|
||||
**Výstup:** Portfolio stránka s fixní navigací a sticky sidebar |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
### AI 03 - Pokročilá Validace Formulářů |
|
||||
**Čas:** 2-3 vyučovací hodiny |
|
||||
**Obtížnost:** Náročné |
|
||||
**Cíl:** Real-time validace s JS (Bootstrap má validační třídy) |
|
||||
|
|
||||
**Klíčové koncepty:** |
|
||||
- `addEventListener` místo inline events |
|
||||
- RegEx pro validaci |
|
||||
- DOM manipulace (classList) |
|
||||
- Real-time feedback |
|
||||
- UX best practices |
|
||||
|
|
||||
**Výstup:** Registrační formulář s kompletní validací |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
### AI 04 - Komplexní Bootstrap Prep Projekt |
|
||||
**Čas:** 4-6 vyučovacích hodin (nebo domácí práce) |
|
||||
**Obtížnost:** Velmi náročné |
|
||||
**Cíl:** Komplexní projekt kombinující všechny koncepty |
|
||||
|
|
||||
**Klíčové koncepty:** |
|
||||
- Všechny předchozí koncepty |
|
||||
- CSS proměnné |
|
||||
- Scroll efekty |
|
||||
- Modal, accordion |
|
||||
- Mobile-first |
|
||||
|
|
||||
**Výstup:** Plně funkční landing page |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📅 Doporučený harmonogram |
|
||||
|
|
||||
### Varianta A - Intenzivní (2 týdny) |
|
||||
``` |
|
||||
Týden 1: |
|
||||
Po: AI 01 + AI 02 začátek |
|
||||
St: AI 02 dokončení + AI 03 začátek |
|
||||
Pá: AI 03 dokončení |
|
||||
|
|
||||
Týden 2: |
|
||||
Po-Pá: AI 04 (průběžně) |
|
||||
Pá: Prezentace AI 04 |
|
||||
|
|
||||
Týden 3: |
|
||||
Bootstrap start! |
|
||||
``` |
|
||||
|
|
||||
### Varianta B - Standardní (3 týdny) |
|
||||
``` |
|
||||
Týden 1: |
|
||||
Lekce 1: AI 01 |
|
||||
Lekce 2: AI 02 |
|
||||
|
|
||||
Týden 2: |
|
||||
Lekce 1: AI 03 část 1 |
|
||||
Lekce 2: AI 03 část 2 |
|
||||
|
|
||||
Týden 3: |
|
||||
Lekce 1-2: AI 04 (práce ve třídě) |
|
||||
DÚ: Dokončení AI 04 |
|
||||
|
|
||||
Týden 4: |
|
||||
Bootstrap start! |
|
||||
``` |
|
||||
|
|
||||
### Varianta C - Volnočasová (4 týdny) |
|
||||
``` |
|
||||
Týden 1: AI 01 |
|
||||
Týden 2: AI 02 |
|
||||
Týden 3: AI 03 |
|
||||
Týden 4: AI 04 |
|
||||
|
|
||||
Týden 5: Bootstrap start! |
|
||||
``` |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🎓 Hodnocení projektů |
|
||||
|
|
||||
### AI 01 (10 bodů) |
|
||||
- HTML struktura (2b) |
|
||||
- CSS Grid implementace (3b) |
|
||||
- Media queries (2b) |
|
||||
- Pokročilé selektory (2b) |
|
||||
- Responzivita (1b) |
|
||||
|
|
||||
### AI 02 (15 bodů) |
|
||||
- Sémantická struktura (4b) |
|
||||
- Position: fixed, sticky (3b) |
|
||||
- Position: relative, absolute (3b) |
|
||||
- CSS jednotky (rem, em, vh) (2b) |
|
||||
- Responzivita (3b) |
|
||||
|
|
||||
### AI 03 (20 bodů) |
|
||||
- addEventListener použití (4b) |
|
||||
- Validační funkce (6b) |
|
||||
- RegEx implementace (3b) |
|
||||
- Visual feedback (4b) |
|
||||
- Submit handling (3b) |
|
||||
|
|
||||
### AI 04 (30 bodů) |
|
||||
- HTML struktura (5b) |
|
||||
- CSS Grid & Flexbox (6b) |
|
||||
- Positioning (4b) |
|
||||
- JavaScript interaktivita (6b) |
|
||||
- Responzivita (4b) |
|
||||
- Design & UX (3b) |
|
||||
- Clean code (2b) |
|
||||
|
|
||||
**Celkem: 75 bodů** |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 💡 Tips pro učitele |
|
||||
|
|
||||
### Při výuce AI 01: |
|
||||
1. Začněte s vysvětlením rozdílu Grid vs Flexbox |
|
||||
2. Ukažte Chrome DevTools - Grid overlay |
|
||||
3. Procvičte nth-child na příkladech |
|
||||
4. Zdůrazněte mobile-first přístup |
|
||||
|
|
||||
### Při výuce AI 02: |
|
||||
1. Narýsujte positioning na tabuli (fixed, sticky, relative, absolute) |
|
||||
2. Ukažte proč používat rem místo px |
|
||||
3. Vysvětlete z-index context |
|
||||
4. Zdůrazněte důležitost sémantiky pro SEO |
|
||||
|
|
||||
### Při výuce AI 03: |
|
||||
1. Živě ukažte addEventListener vs onclick |
|
||||
2. Procvičte RegEx na regex101.com |
|
||||
3. Vysvětlete event.preventDefault() |
|
||||
4. Ukažte console.log() debugging |
|
||||
|
|
||||
### Při výuce AI 04: |
|
||||
1. Nechte studenty pracovat samostatně |
|
||||
2. Buďte dostupní pro konzultace |
|
||||
3. Povzbuďte kreativitu |
|
||||
4. Na konci nechte studenty prezentovat |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🔧 Troubleshooting - Časté problémy studentů |
|
||||
|
|
||||
### CSS Grid: |
|
||||
**Problem:** "Grid nefunguje" |
|
||||
**Řešení:** Zkontrolujte `display: grid` na kontejneru, ne na položkách |
|
||||
|
|
||||
### Positioning: |
|
||||
**Problem:** "Absolute element je mimo stránku" |
|
||||
**Řešení:** Parent musí mít `position: relative` |
|
||||
|
|
||||
### addEventListener: |
|
||||
**Problem:** "Funkce se volá hned při načtení" |
|
||||
**Řešení:** Nepsat `validateName()` ale jen `validateName` (bez závorek) |
|
||||
|
|
||||
### RegEx: |
|
||||
**Problem:** "RegEx nefunguje" |
|
||||
**Řešení:** Otestujte na regex101.com, možná chybí escape znaky |
|
||||
|
|
||||
### Media queries: |
|
||||
**Problem:** "Responzivita nefunguje" |
|
||||
**Řešení:** Zkontrolujte `<meta name="viewport">` v head |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📊 Očekávané výsledky |
|
||||
|
|
||||
Po dokončení všech projektů by studenti měli: |
|
||||
|
|
||||
### Znát: |
|
||||
✅ Rozdíl mezi Grid a Flexbox a kdy co použít |
|
||||
✅ Všechny typy CSS positioning |
|
||||
✅ Jak vytvořit responzivní layout bez frameworku |
|
||||
✅ Jak validovat formuláře v JavaScriptu |
|
||||
✅ addEventListener a event handling |
|
||||
✅ Základy RegEx |
|
||||
✅ Mobile-first přístup |
|
||||
|
|
||||
### Umět: |
|
||||
✅ Vytvořit komplexní responzivní stránku |
|
||||
✅ Implementovat interaktivní funkce |
|
||||
✅ Validovat formuláře s visual feedbackem |
|
||||
✅ Používat pokročilé CSS selektory |
|
||||
✅ Debugovat pomocí Developer Tools |
|
||||
|
|
||||
### Být připraveni na: |
|
||||
✅ Bootstrap grid systém (pochopí jak funguje) |
|
||||
✅ Bootstrap komponenty (pochopí co řeší) |
|
||||
✅ Bootstrap utilities (pochopí proč existují) |
|
||||
✅ Přizpůsobení frameworku vlastním potřebám |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🎯 Přechod na Bootstrap |
|
||||
|
|
||||
Po dokončení AI projektů vysvětlete studentům: |
|
||||
|
|
||||
1. **Co Bootstrap řeší:** |
|
||||
- "Vzpomínáte, jak jste v AI 01 vytvářeli grid systém? Bootstrap to má už hotové." |
|
||||
- "Vzpomínáte na validaci formuláře v AI 03? Bootstrap má validační třídy." |
|
||||
|
|
||||
2. **Proč jsme to dělali ručně:** |
|
||||
- "Teď rozumíte, co Bootstrap dělá pod kapotou." |
|
||||
- "Když něco nebude fungovat, budete vědět proč." |
|
||||
- "Umíte to bez frameworku = jste lepší developer." |
|
||||
|
|
||||
3. **Kdy použít Bootstrap vs custom CSS:** |
|
||||
- Bootstrap: Rychlé prototypování, standardní projekty |
|
||||
- Custom: Unikátní design, optimalizace, portfolio projekty |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📞 Podpora |
|
||||
|
|
||||
Pokud najdete chyby v projektech nebo máte návrhy na zlepšení, kontaktujte: |
|
||||
- GitHub Issues v repozitáři |
|
||||
- Email učiteli |
|
||||
- Během konzultačních hodin |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 📝 Poznámky k implementaci |
|
||||
|
|
||||
### Struktura souborů: |
|
||||
``` |
|
||||
ai_XX_project_name/ |
|
||||
├── ZADANI.md # Detailní zadání pro studenty |
|
||||
├── index.html # Startovací HTML (s TODO komentáři) |
|
||||
├── style.css # CSS šablona (s TODO komentáři) |
|
||||
├── script.js # JS šablona (s TODO komentáři) |
|
||||
├── reseni.html # Kompletní řešení |
|
||||
├── reseni.css # CSS s podrobnými komentáři |
|
||||
└── reseni.js # JS s podrobnými komentáři |
|
||||
``` |
|
||||
|
|
||||
### Filozofie: |
|
||||
- **Startovací soubory** obsahují TODO a strukturu |
|
||||
- **Řešení** obsahuje detailní komentáře vysvětlující každý řádek |
|
||||
- **ZADANI.md** obsahuje learning objectives a užitečné odkazy |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
## 🎉 Závěr |
|
||||
|
|
||||
Tyto projekty důkladně připraví studenty na Bootstrap. Investovaný čas se vrátí v: |
|
||||
- Lepším pochopení frameworku |
|
||||
- Schopnosti přizpůsobení |
|
||||
- Debugovacích dovednostech |
|
||||
- Celkově lepších web development skills |
|
||||
|
|
||||
**Hodně štěstí při výuce!** 🚀 |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
Vytvořeno: 24. října 2025 |
|
||||
Předmět: Webové Technologie (WTL) |
|
||||
Cílová skupina: 3. ročník IT |
|
||||
Loading…
Reference in new issue