Volitelný seminář pro 3.–4. ročník
Nauč se front-end
a postav React aplikaci.
Naučíš se pokročilé CSS a responzivitu, design ve Figmě, JavaScript, React s TypeScriptem, spolupráci přes GitHub a nasazení vlastního projektu na veřejnou adresu.
Modul 01
Pokročilé CSS a responzivní design
CSS Grid do hloubky
Linie a souřadnice v mřížce, rozvržení nakreslené jmény oblastí, řádky, které dokreslí prohlížeč, a galerie, jež se přizpůsobí sama.
1.2Flexbox a responzivní vzory
Jak si prvky dělí místo v řádku, kdy sáhnout po mřížce a jak psát velikosti tak, aby se stránka přizpůsobila sama.
1.3Moderní nativní CSS
Vlastní vlastnosti a zanořování bez preprocesoru, dotazy na velikost rodiče a specificita, kterou máme pod kontrolou.
1.4Tailwind CSS: utility-first přístup
Vzhled skládaný z hotových tříd přímo na prvku v HTML.
1.5SCSS a AI asistence při stylování
Preprocesor, který se pořád vyplatí, poctivé srovnání tří cest ke vzhledu a práce s asistentem, jejíž nejdůležitější částí je kontrola.
1.6Workshop: přepracování stránky
Responzivní stránka cukrárny od mobilu po desktop, mini-review ve dvojicích podle checklistu a ukázky nejzajímavějších řešení.
Modul 02
Základy UI/UX a grafická příprava
UX/UI principy
Typografie, barva, mezery, hierarchie a zarovnání jako stavební kameny rozhraní. Na závěr oprava stránky, která funguje, ale nevypadá.
UX a přístupnost
Cesta od cíle uživatele k wireframu a pravidla přístupnosti, která rozhodují, kdo se na stránce vůbec domluví.
Figma a AI nástroje pro design
Návrh ve Figmě od komponent po export pro vývojáře a kritický pohled na to, co dnes umí navrhnout AI.
Modul 03
JavaScript pro front-end
DOM do hloubky
Stránka bez frameworku, které vládneme přes selektory a události, dokud se sama nezmění pod rukama.
ES modules a struktura projektu
Jeden dlouhý soubor rozpadlý na moduly, které se mezi sebou domluví přes import a export.
Asynchronní JavaScript I
Event loop jako vysvětlení, proč se kód nečeká, a cesta od callbacků přes Promise až k async/await.
Asynchronní JavaScript II: Fetch a REST
Data z cizího serveru stažená přes Fetch a tři stavy, které musí zvládnout každá stránka, ať se právě načítá, nepovedla se, nebo zůstala prázdná.
Workshop: mini-aplikace s živými daty
Celý blok na vlastní aplikaci nad zvoleným API s konzultacemi zaměřenými na strukturu kódu a ošetřené chybové stavy.
Dokončení mini-aplikace a proč TypeScript
Dokončené aplikace krátce představené navzájem a první ukázka chyb, které v JavaScriptu odhalí až běh, ale v TypeScriptu už psaní.
Modul 04
React a TypeScript
Komponentové myšlení a setup
Rozhraní rozkreslené na strom znovupoužitelných komponent a první projekt postavený na Vite, Reactu a TypeScriptu.
Props a typování
Data putující do komponenty jako props, otypovaná přes interface tak přesně, že jim překladač rozumí líp než my.
Stav a události
Počítadlo, ze kterého vyroste filtrovatelný seznam s formulářem, a stav, který se nesmí měnit jinak než přes svůj setter.
useEffect a načítání dat
Vedlejší efekty, které React spustí ve správnou chvíli sám, a mini-aplikace z JavaScriptu přepsaná do komponent, jež si data natáhnou samy.
Routing
Jedna aplikace, víc adres, katalog, který podle parametru v URL otevře stránku detailu.
AI asistenti ve vývoji
Asistent, kterému dáme kontext projektu a necháme navrhnout kód, a pravidlo, že za každý odevzdaný řádek musíme umět ručit sami.
Workshop SPA a prezentace
Vlastní SPA dotažená k prezentaci, co umí, jedno rozhodnutí, které za ní stálo, a co byl na cestě nejtěžší oříšek.
Modul 05
Verzování, nasazení a závěrečný projekt
Git do hloubky
Commity a větve jako mentální model, který konečně dává smysl, a konflikt ve dvojici, který si sami vyrobíme a hned i vyřešíme.
Týmové workflow na GitHubu
Pull request jako místo, kde se o kódu mluví nahlas, a review, které si na cvičném repozitáři vyzkoušíme navzájem.
Nasazení a měření kvality
Aplikace nasazená na veřejnou adresu při každém commitu do hlavní větve a Lighthouse report, který řekne, jak moc to bolí.
Kickoff závěrečného projektu
Vlastní zadání, návrh ve Figmě a jasná definice hotovo, nasazená adresa, repozitář, README a funkce podle zadání.
Projektový blok: kostra a funkční jádro
Kostra projektu podle návrhu z Figmy, nasazená hned od prvního commitu, a první rozpracované napojení na data.
Feature-complete, finalizace a audit
Zadání dotažené do konce, vlastní Lighthouse audit s opravou nálezů a README, které řekne, co projekt umí a proč je postavený, jak je.
Obhajoby závěrečných projektů
Vlastní projekt představený před celou třídou a obhájený v otázkách, funkčnost, kód, design i nasazení na jednom pódiu.
Modul 06
Nadstavba
Pokročilé CSS: design tokeny
Barvy a rozestupy proměněné v pojmenované tokeny, které drží styl pohromadě od Figmy až po CSS proměnné.
Pokročilý React
Logika vytažená z komponenty do vlastního hooku a Context tam, kde by props musely propadávat příliš hluboko.
Refaktoring JS → React + TypeScript
Stará aplikace z čistého JavaScriptu převedená do Reactu s TypeScriptem krok za krokem, aniž by přestala fungovat.
Pokročilý JS: stav a persistence
Stav, který přežije obnovení stránky v localStorage, a vlastní pub-sub vzor, na kterém stojí i velké knihovny pro správu stavu.
Rozšířený projekt: kickoff
Náročnější zadání s vlastním design systémem a architekturou naplánovanou na tři zbývající bloky práce.
Rozšířený projekt: vývoj I
Design systém a kostra aplikace jako první milník samostatné práce s průběžným nasazováním.
Rozšířený projekt: vývoj II
Funkční celek napojený na API jako druhý milník na cestě k hotovému projektu.
Dokumentace a prezentace
Design systém a technická rozhodnutí sepsané do dokumentace a představené v komornější závěrečné prezentaci.