skrabanek
/
3I_WTL_2025
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Malý repozitář pro WTL 3.I 2025/2026
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 Commits
1 Branch
0 Tags
4.8 MiB
 
 
 
Tree: 22ec18730f
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '22ec18730f'
${ noResults }
3I_WTL_2025/AI_extra_material/AI_PROJEKTY_README.md

7.4 KiB
Raw Blame History

🤖 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.