Zjistíš, kdo je kóder a proč je jeho práce dnes tak důležitá. Uvidíš, jakou roli hraje mezi designem a programováním a proč i bez vlastní kreativity dokáže tvořit stránky, které berou dech.

Seznámíš se s prvními kroky v HTML. Pochopíš, jak funguje HTML a přijdeš na to, jak jednoduché je nastartovat tvou první webovou stránku.

Naučíš se základní principy CSS a pochopíš, pomocí jakých nástrojů, budeš schopný každou HTML stránku, kterou vytvoříš, obléknout do atraktivního kabátu.

Naučíš se, jak postavit kompletní HTML strukturu jediným příkazem. Místo minuty psaní ti bude stačit pár vteřin a pochopíš, jak z pár jednoduchých symbolů skládat složité HTML struktury.

Naučíš se vidět aplikace jako v Matrixu. Dokážeš prohlédnout jakýkoliv design aplikace a hned uvidíš její strukturu, boxy a hierarchii v HTML. Od této chvíle budeš schopný poskládat cokoliv v HTML.

Nastal čas postavit tvůj projekt. Než se do toho pustíš naplno, ujistíš se, že máš všechno správně nastavené a jsi připravený vytvořit svůj první projekt heyy-static.

Založíš svůj projekt, objevíš .gitignore a zjistíš, jak funguje routing ve světě statických stránek. Uspořádáš veřejné a soukromé stránky v projektu a postavíš HTML strukturu své úvodní stránky.

Projdeš evolucí CSS. Od inline stylů, třídy, BEM až po moderní Tailwind. Nastartuješ správně projekt, začneš rychle prototypovat a pochopíš, jak přemýšlí developer při vývoji CSS. A to vše při stavbě klíčové části tvé aplikace - Headeru.

Oživíš svou nudnou statickou stránku a přidáš Hero sekci v pěkném moderním kabátu! Naučíš se stylovat jednotlivé elementy hero sekce a nakonec pronikneš do svět ikonek!

Vytvoříš přehlednou sekci se svým techstackem, která všem prozradí, jaké technologie už ovládáš a které se teprve učíš. K tomu objevíš jeden z nejmocnějších nástrojů v CSS - Grid!

Rozšíříš obsahovou sekci se svým techstackem o sekci s tvými projekty. Dodáš na úvodní stránku ukázky tvých posledních projektů, rozpracovaných experimentů a uzavřeš sekci s obsahem.

Naučíš se přemýšlet jako líný, ale efektivní developer. Použiješ oblíbenou developerskou techniku copy prase. Sáhneš po částech své aplikace, co už máš, a poskládáš z nich bleskově celou sekci o tvém blogu!

Postavíš svůj první CTA blok. Podíváš se, jak vzniká moderní CTA sekce krok za krokem. Objevíš tajemství barevných přechodů a super trik, pro práci s dokumentací!

Postavíš vlastní footer, tedy patičku, kterou uvidíš na každé stránce. Objevíš pseudo třídy jako hover a zjistíš, jak dodat prvkům interaktivitu. A taky zjistíš, proč ti CDN odkazy můžou někdy rozbít projekt kvůli rotaci.

Kompletní walkthrough, ve kterém se naučíš rotovat AI modely a přepínat mezi GUI a CLI jako profík. Zjistíš, jak bezpečně provozovat vibecoding a nebát se rozbití projektu. Nakonec získáš techniku, díky které dokážeš rychle pracovat s projektem plných AI změn.

Naučíš se používat utility třídy a dokážeš postavit vlastní CSS systém tak dobře, že pochopíš celou magii kolem mobilního zobrazení. Krok po kroku projdeš procesem, díky kterému navrhneš responzivní design a celou činnost dokážeš i zautomatizovat.

Postavíš svůj projekt od základů! Objevíš individuální sekce, prohlédneš si nové stránky a zjistíš, jaké reálné problémy tě při jejich vývoji čekají. Pochopíš, jak si práci výrazně urychlit a tvořit stránky rychleji i efektivněji.

Nasadíš svou webovou stránku z lokálního prostředí do produkce a pustíme tvůj web do světa! Objevíš možnosti hostingu, domén, automatického deploye a řešení konfliktů mezi prostředími.