Frontend developer kurz

Lekce 1 • Nastavení vašeho vývojového prostředí

Instaluje a konfiguruje editor kódu, terminál a vývojářské nástroje prohlížeče. Zajišťuje, aby každý student měl před psaním kódu identický a produktivní základ.

Lekce 2 • Správa verzí pomocí Gitu

Seznamuje s koncepty Gitu a každodenními postupy pro sledování změn kódu. Připravuje studenty na spolupráci a zotavení se z chyb v průběhu celého kurzu.

Lekce 3 • Úvod do příkazové řádky

Učí navigaci, manipulaci se soubory a spouštění skriptů z terminálu. Umožňuje studentům používat sestavovací nástroje a správce balíčků představené v pozdějších kapitolách.

Lekce 1 • Sémantické prvky HTML5

Představuje orientační prvky jako header, nav, main, article, section a footer. Zlepšuje přístupnost a strojovou čitelnost obsahu stránky.

Lekce 2 • Základy přístupnosti v HTML

Aplikuje ARIA role, alternativní texty a značkování ovladatelné klávesnicí do HTML dokumentů. Zajišťuje, aby všechny projekty od začátku splňovaly základní standardy přístupnosti.

Lekce 3 • HTML formuláře a vstupní typy

Vytváří interaktivní formuláře pomocí labels, inputs, selects a buttons se správnými atributy přístupnosti. Připravuje studenty na validaci formulářů a zpracování odeslání v kapitolách o JavaScriptu.

Lekce 4 • Základní HTML prvky

Pokrývá nadpisy, odstavce, seznamy, odkazy a obrázky jako primární stavební bloky obsahu. Ustanovuje správné používání prvků před zavedením sémantických obalů.

Lekce 1 • Pozicování a režimy zobrazení

Učí statické, relativní, absolutní, fixní a sticky pozicování spolu s hodnotami display. Umožňuje přesné umístění prvků před zavedením moderních systémů rozvržení.

Lekce 2 • Specificita a dědičnost v CSS

Řeší konflikty stylů pomocí pravidel specificity, kaskády a zděděných vlastností. Předchází frustraci z ladění ve větších stylesheetech vytvářených v pozdějších kapitolách.

Lekce 3 • Syntaxe a selektory CSS

Pokrývá sady pravidel, páry vlastnost-hodnota a typy selektorů od elementu po atribut. Buduje přesnost selektorů potřebnou pro veškerou následnou práci se styly.

Lekce 4 • Box model do hloubky

Vysvětluje obsah, padding, border a margin jako čtyři vrstvy každého prvku. Řeší běžné chyby v rozestupech výukou box-sizing a kolapsu marginů.

Lekce 1 • Pokročilé techniky CSS Gridu

Používá auto-fill, auto-fit a subgrid k vytváření adaptivních rozvržení řízených obsahem. Završuje mistrovství v rozvržení předtím, než studenti přejdou k interaktivitě v JavaScriptu.

Lekce 2 • Základy Flexboxu

Představuje model flex kontejneru a flex položek s osovým zarovnáním. Řeší běžné jednorozměrné problémy rozvržení, jako jsou navigační lišty a řady karet.

Lekce 3 • Pokročilé vzory Flexboxu

Aplikuje flex-wrap, order a align-self k vytváření komplexních rozvržení komponent. Připravuje studenty na volbu mezi Flexboxem a Gridem pro každý návrhový scénář.

Lekce 4 • Základy CSS Gridu

Definuje gridové stopy, oblasti a pravidla umístění pro dvourozměrná rozvržení. Umožňuje studentům vytvářet struktury stránek ve stylu časopisů a dashboardů.

Lekce 1 • Operátory a řídicí struktury

Aplikuje aritmetické, porovnávací a logické operátory uvnitř podmínek a cyklů. Umožňuje studentům psát rozhodovací a opakující se logiku ve svých skriptech.

Lekce 2 • Funkce a rozsah platnosti

Definuje znovupoužitelnou logiku pomocí deklarací funkcí, výrazů a arrow funkcí. Vysvětluje lexikální rozsah platnosti a uzávěry jako základ modulárního kódu.

Lekce 3 • Pole a objekty

Ukládá a manipuluje s kolekcemi pomocí metod polí a objektových literálů. Připravuje studenty na práci s datovými strukturami API v pozdějších kapitolách.

Lekce 4 • Syntaxe JavaScriptu a datové typy

Pokrývá proměnné deklarované pomocí let a const, primitivní typy a typovou koerci. Ustanovuje jazyková pravidla, kterými se řídí veškerý následující JavaScript kód.

Lekce 1 • Úprava prvků DOMu

Mění textový obsah, atributy, styly a seznamy tříd na vybraných prvcích. Umožňuje dynamické aktualizace UI bez úplného znovunačtení stránky.

Lekce 2 • Výběr a procházení DOMem

Používá querySelector, getElementById a vlastnosti procházení k nalezení prvků. Propojuje JavaScript se strukturou HTML vytvořenou v dřívějších kapitolách.

Lekce 3 • Formuláře a zpracování uživatelského vstupu

Čte hodnoty formulářů, zabraňuje výchozímu odeslání a ověřuje vstup v reálném čase. Přemosťuje strukturu HTML formulářů s interaktivitou řízenou JavaScriptem.

Lekce 4 • Vytváření a odstraňování prvků

Vytváří nové uzly pomocí createElement a vkládá je nebo odstraňuje ze stromu DOMu. Podporuje vzory dynamického vykreslování seznamů a vytváření komponent.

Lekce 1 • Promises a řetězení Promises

Vytváří a řetězí Promises pomocí .then(), .catch() a .finally() pro sekvenční asynchronní logiku. Připravuje studenty na čistší syntaxi async/await představenou dále.

Lekce 2 • Načítání dat pomocí Fetch API

Odesílá požadavky GET a POST, parsuje odpovědi JSON a zpracovává HTTP chyby. Propojuje asynchronní dovednosti s reálnými datovými zdroji, které studenti použijí v projektech.

Lekce 3 • Koncepty asynchronního programování

Vysvětluje zásobník volání, smyčku událostí a vzor callbacku jako základ asynchronního chování. Řeší běžné mylné představy o jednovláknovém modelu vykonávání JavaScriptu.

Lekce 4 • Vykreslování dat z API do DOMu

Dynamicky zobrazuje načtená data, spravuje indikátory načítání a zobrazuje chybové zprávy. Produkuje kompletní datově řízené UI funkce připravené do portfoliových projektů.

Lekce 1 • Komponentově orientovaná UI frameworky

Představuje model komponenty, props a state pomocí populárního front-endového frameworku. Přesouvá studenty od imperativní manipulace s DOMem k deklarativnímu vykreslování UI.

Lekce 2 • Nasazení front-endové aplikace

Sestaví a nasadí produkční SPA na platformu statického hostingu pomocí CI/CD pipeline. Završuje celý životní cyklus vývoje od lokálního kódu po živou URL.

Lekce 3 • Vzory správy stavu

Spravuje sdílený stav aplikace pomocí kontextu, storů nebo povýšení stavu. Připravuje studenty na architekturu toku dat v komplexních vícesložkových aplikacích.

Lekce 4 • ES moduly a správa balíčků

Organizuje kód pomocí syntaxe import/export a spravuje závislosti pomocí správce balíčků. Ustanovuje modulární architekturu používanou všemi moderními front-endovými frameworky.

Lekce 5 • Směrování v jednostránkových aplikacích

Implementuje směrování na straně klienta pro navigaci mezi pohledy bez úplného znovunačtení stránky. Umožňuje studentům vytvářet vícepohledové SPA s navigací řízenou URL.