HTML, CSS, JavaScript, publikování a webová prezentace na libovolné téma.
Každá lekce má vlastní pracovní list, praktický důkaz a přímou vazbu na tematický plán v Excelu.
Lekce a pracovní listy
Webový brief a téma prezentace
Žák vymezí téma, publikum, účel a měřitelná kritéria webové prezentace.
Otevřít lekci a pracovní list →02 · HTML a struktura webuSložky projektu, index.html a relativní cesty
Žák založí přehlednou strukturu webu a vysvětlí relativní cestu k souboru.
Otevřít lekci a pracovní list →03 · HTML a struktura webuSémantické HTML a osnova stránky
Žák vytvoří sémantickou strukturu stránky s logickou hierarchií nadpisů.
Otevřít lekci a pracovní list →04 · HTML a struktura webuText, seznamy, odkazy a navigace
Žák zapíše čitelný obsah a vytvoří funkční interní i externí odkazy.
Otevřít lekci a pracovní list →05 · HTML a struktura webuObrázky, popisky a přístupný alternativní text
Žák vloží obraz s odpovídajícím rozměrem, popiskem a alternativním textem.
Otevřít lekci a pracovní list →06 · CSS a vizuální systémPřipojení CSS, selektory a kaskáda
Žák připojí externí CSS a vysvětlí, proč se konkrétní pravidlo použilo.
Otevřít lekci a pracovní list →07 · CSS a vizuální systémBox model, mezery a velikosti
Žák použije box model k vytvoření čitelného rozvržení bez náhodných mezer.
Otevřít lekci a pracovní list →08 · CSS a vizuální systémTypografie, barvy a kontrast
Žák vytvoří omezený vizuální systém a ověří čitelnost textu.
Otevřít lekci a pracovní list →09 · CSS a vizuální systémFlexbox a jednorozměrné rozvržení
Žák použije Flexbox pro navigaci a řadu pružných karet.
Otevřít lekci a pracovní list →10 · CSS a vizuální systémCSS Grid a dvourozměrná galerie
Žák sestaví mřížku, která přehledně reaguje na šířku obrazovky.
Otevřít lekci a pracovní list →11 · Responzivita a přístupnostMobile-first a media queries
Žák navrhne stránku od úzkého zobrazení a doplní smysluplný breakpoint.
Otevřít lekci a pracovní list →12 · Responzivita a přístupnostRelativní jednotky a pružná média
Žák používá rem, %, fr a max-width místo nevhodných pevných rozměrů.
Otevřít lekci a pracovní list →13 · Responzivita a přístupnostKlávesnice, focus a sémantické ovládací prvky
Žák ověří ovládání webu klávesnicí a viditelný focus.
Otevřít lekci a pracovní list →14 · Responzivita a přístupnostFormulář, label a srozumitelná chyba
Žák vytvoří základní formulář s popisky a srozumitelnou validací.
Otevřít lekci a pracovní list →15 · Responzivita a přístupnostKontrola HTML, CSS a přístupnosti
Žák použije validační nástroje, rozliší chybu od doporučení a opravy doloží.
Otevřít lekci a pracovní list →16 · JavaScript v prohlížečiKonzole, proměnné a datové typy
Žák spustí JavaScript, pracuje s proměnnými a rozezná základní datové typy.
Otevřít lekci a pracovní list →17 · JavaScript v prohlížečiDOM: výběr a změna obsahu
Žák vybere prvek DOM a bezpečně změní jeho text nebo třídu.
Otevřít lekci a pracovní list →18 · JavaScript v prohlížečiUdálosti a reakce na uživatele
Žák připojí posluchač události a oddělí HTML od chování.
Otevřít lekci a pracovní list →19 · JavaScript v prohlížečiPodmínky a rozhodování v rozhraní
Žák použije podmínku k řízení stavu a zpětné vazby uživateli.
Otevřít lekci a pracovní list →20 · JavaScript v prohlížečiPole, cyklus a generovaný seznam
Žák projde pole dat a vytvoří z něj opakované prvky stránky.
Otevřít lekci a pracovní list →21 · Interaktivní webFunkce a znovupoužitelná část kódu
Žák rozdělí chování webu do pojmenovaných funkcí s jasnými vstupy.
Otevřít lekci a pracovní list →22 · Interaktivní webFiltrování obsahu podle kategorie
Žák propojí datový atribut, ovládací prvek a filtrování obsahu.
Otevřít lekci a pracovní list →23 · Interaktivní webValidace formuláře JavaScriptem
Žák doplní okamžitou validaci a neblokuje správné odeslání.
Otevřít lekci a pracovní list →24 · Interaktivní webLocalStorage a zapamatování preference
Žák uloží jednoduchou uživatelskou volbu a obnoví ji po načtení stránky.
Otevřít lekci a pracovní list →25 · Interaktivní webLadění chyb a čtení stack trace
Žák lokalizuje chybu pomocí konzole a ověří opravu opakovatelným testem.
Otevřít lekci a pracovní list →26 · Publikování a RVP teorieGit: repozitář, commit a historie změn
Žák uloží smysluplnou verzi projektu a popíše změnu v commitu.
Otevřít lekci a pracovní list →27 · Publikování a RVP teorieHosting, doména a nasazení statického webu
Žák publikuje statický web a rozliší lokální soubor od veřejné adresy.
Otevřít lekci a pracovní list →28 · Publikování a RVP teorieSíťová cesta webového požadavku
Žák v základním pojetí vysvětlí DNS, klienta, server, HTTP a HTTPS.
Otevřít lekci a pracovní list →29 · Publikování a RVP teorieAI při tvorbě webu: ověřování, licence a transparentnost
Žák ověří AI návrh nebo kód, uvede jeho použití a nepřevezme nefunkční výstup.
Otevřít lekci a pracovní list →30 · Publikování a RVP teorieFinální technický audit webu
Žák projde validitu, přístupnost, responzivitu, výkon a funkčnost odkazů před vydáním.
Otevřít lekci a pracovní list →31 · Závěrečná webová prezentace na libovolné témaProjektový brief a informační architektura
Žák upřesní libovolné téma, cílové publikum a strukturu finální webové prezentace.
Otevřít lekci a pracovní list →32 · Závěrečná webová prezentace na libovolné témaHTML obsah a sémantická kostra projektu
Žák vytvoří úplnou obsahovou a sémantickou kostru všech plánovaných stránek.
Otevřít lekci a pracovní list →33 · Závěrečná webová prezentace na libovolné témaCSS design, responzivita a přístupnost
Žák vytvoří jednotný design a ověří mobilní i desktopové zobrazení.
Otevřít lekci a pracovní list →34 · Závěrečná webová prezentace na libovolné témaJavaScript, testování a publikace
Žák doplní smysluplnou interakci, opraví nalezené chyby a publikuje finální verzi.
Otevřít lekci a pracovní list →35 · Závěrečná webová prezentace na libovolné témaPrezentace, obhajoba a reflexe webu
Žák předvede web, vysvětlí technická rozhodnutí a doloží vlastní pracovní postup.
Otevřít lekci a pracovní list →