diff --git a/08_js_form/README.md b/08_js_form/README.md index e2dfab7..804048d 100644 --- a/08_js_form/README.md +++ b/08_js_form/README.md @@ -90,5 +90,5 @@ function validateForm() { ## 🔗 Související lekce - **Předchozí:** 07_js_css_dom - manipulace s CSS -- **Související:** AI/ai_03_form_validation - pokročilá validace s addEventListener +- **Související:** AI_extra_material/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 index ff3b168..f9eeb10 100644 --- a/09_mediaquerry/README.md +++ b/09_mediaquerry/README.md @@ -97,4 +97,4 @@ V této lekci se naučíte vytvářet responzivní webové stránky pomocí medi - **Další:** 10_flex - Flexbox layout - **Související:** - 12_grid - CSS Grid (další layout systém) - - AI/ai_01_grid_responsive - praktický projekt s responzivitou + - AI_extra_material/ai_01_grid_responsive - praktický projekt s responzivitou diff --git a/10_flex/README.md b/10_flex/README.md index 79247ac..64b4776 100644 --- a/10_flex/README.md +++ b/10_flex/README.md @@ -126,4 +126,4 @@ nav { - **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 +- **Praktický projekt:** AI_extra_material/ai_04_prep_bootstrap - kombinace Flex a Grid diff --git a/12_grid/README.md b/12_grid/README.md index e6d8fa6..2bfc0fb 100644 --- a/12_grid/README.md +++ b/12_grid/README.md @@ -147,4 +147,4 @@ V této lekci se naučíte vytvářet komplexní dvourozměrné layouty pomocí - **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 +- **Praktický projekt:** AI_extra_material/ai_01_grid_responsive - kompletní Grid projekt s responzivitou diff --git a/13_boostrap_intro/README.md b/13_boostrap_intro/README.md index 1a40c64..d1b1f01 100644 --- a/13_boostrap_intro/README.md +++ b/13_boostrap_intro/README.md @@ -113,7 +113,7 @@ rounded = zaoblené rohy - **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 + - AI_extra_material/ai_01_grid_responsive - CSS Grid praxe + - AI_extra_material/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 index bb0fbdb..8d2db6c 100644 --- a/14_bootstrap_layout/README.md +++ b/14_bootstrap_layout/README.md @@ -159,4 +159,4 @@ align-items-end = dole - **Další:** 15_bootstrap_components - Bootstrap komponenty - **Související:** - 10_flex - Flexbox (pochopení flexbox utility tříd) - - AI/ai_02_semantic_portfolio - sémantická struktura stránky + - AI_extra_material/ai_02_semantic_portfolio - sémantická struktura stránky diff --git a/17_modal/README.md b/17_modal/README.md index 98e6284..5e5df87 100644 --- a/17_modal/README.md +++ b/17_modal/README.md @@ -220,5 +220,5 @@ modalEl.addEventListener('hidden.bs.modal', function () { - **Předchozí:** 16_carousel - Bootstrap carousel - **Související:** - 15_bootstrap_components - ostatní komponenty - - AI/ai_04_prep_bootstrap - vlastní modal implementace + - AI_extra_material/ai_04_prep_bootstrap - vlastní modal implementace - **Dokumentace:** [Bootstrap Modal](https://getbootstrap.com/docs/5.3/components/modal/) diff --git a/18_forms/README.md b/18_forms/README.md index 980deb4..620d521 100644 --- a/18_forms/README.md +++ b/18_forms/README.md @@ -178,4 +178,4 @@ div.appendChild(p); - 17_modal - Bootstrap modal - 08_js_form - základy formulářů v JS - **Další:** 19_todolist - Todo list aplikace -- **Související:** AI/ai_03_form_validation - pokročilá validace formulářů +- **Související:** AI_extra_material/ai_03_form_validation - pokročilá validace formulářů diff --git a/AI_extra_material/AI_PROJEKTY_README.md b/AI_extra_material/AI_PROJEKTY_README.md deleted file mode 100644 index 81be070..0000000 --- a/AI_extra_material/AI_PROJEKTY_README.md +++ /dev/null @@ -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 `
` a sémantickými elementy? -- [ ] Umím vytvořit správnou strukturu formuláře? -- [ ] Vím, kdy použít `
`, `
`, `