Build Mode
Kurz
Modul 04 · Claude Code od úplné nuly

První skutečná změna

Od prázdné složky k funkční stránce v prohlížeči. Celý cyklus zadání, plán, změna, kontrola.

16 minlekce 26/107

Než začneš

  • Běžící Claude Code v testovací složce

Po lekci umíš

  • Máš první stránku, kterou vidíš v prohlížeči
  • Prošel jsi celým cyklem od zadání po kontrolu
  • Víš, co znamená localhost a proč to není internet
Obsah lekce (5)

Teorie skončila. Teď postavíme něco, co uvidíš na obrazovce.

Zadání

Uděláme jednoduchou stránku. Ne proto, že by to bylo užitečné, ale proto, že projdeme celý cyklus, který budeš dělat pořád.

Terminál

Vytvoř složku a spusť Clauda

cd ~/Projektymkdir prvni-strankacd prvni-strankaclaude

Teď přepni Shift+Tab do režimu plánování a zadej:

Prompt pro Claude Code

Naplánuj jednoduchou stránku

Všimni si, že zadání říká i to, jak má vypadat výsledek a jak ho ověříme.

Chci jednoduchou webovou stránku – jeden soubor, žádné nástroje navíc.

Obsah:
- nadpis s mým jménem
- jeden odstavec o tom, co dělám
- odkaz na e-mail

Vzhled: střídmý, jedna barva, čitelné písmo, na mobilu i na počítači.
Bez knihoven, bez frameworků. Čisté HTML a CSS v jednom souboru.

Napiš mi nejdřív plán a jak si ověříme, že to funguje.

Přečti si plán. Měl by být krátký a měl by mluvit o jednom souboru.

Nech to postavit

Přepni Shift+Tab zpátky do normálního režimu a napiš:

Prompt pro Claude Code

Postav to

Jo, udělej to.

Claude vytvoří soubor. Uvidíš, co do něj napsal.

Podívej se na výsledek

Nejjednodušší způsob: otevři soubor v prohlížeči.

Terminál · macOS

Otevři složku a klikni na index.html

open .
Terminál · Windows

Otevři složku a klikni na index.html

explorer .

Dvojklik na index.html a otevře se ti v prohlížeči. Adresa bude začínat file://.

Localhost: co to je a proč ho budeš potřebovat

U jednoho HTML souboru stačí file://. U skutečných projektů to nestačí a budeš potřebovat localhost.

To číslo za dvojtečkou je port – něco jako číslo dveří. Na jednom počítači může běžet víc serverů, každý na jiném portu. Uvidíš 3000, 5173, 8080 a další. Které to je, ti Claude Code vždycky napíše.

Jedno kolo iterace

Teď to, co budeš dělat pořád: řekni, co se ti nelíbí, a nech to opravit.

Prompt pro Claude Code

Konkrétní zpětná vazba

Všimni si, že říká, co konkrétně a čím to nahradit. Ne „udělej to hezčí“.

Dvě věci:

1. Nadpis je moc velký, na mobilu zabírá celou obrazovku. Zmenši ho
 zhruba o třetinu.
2. Text jde přes celou šířku okna a špatně se čte. Omez šířku textu
 tak, aby na řádku bylo kolem 70 znaků, a vycentruj ho.

Až to uděláš, řekni mi, co jsi přesně změnil.

Poslední věta je návyk, který se vyplatí: nech si říct, co se změnilo. V malém projektu to zvládneš i sám, ve větším je to nenahraditelné.

Zkus to teď

Přidej si vlastní úpravu. Cokoliv – jiná barva, tvoje fotka, odkaz na LinkedIn. Zadej to konkrétně a podívej se na výsledek.

Až budeš spokojený, zkus zmenšit okno prohlížeče na šířku mobilu. Vypadá to pořád dobře?

Milník projektu

Máš vlastní stránku, kterou vidíš v prohlížeči, prošel jsi celý cyklus zadání → plán → stavba → kontrola → iterace a víš, co je localhost.

Tenhle cyklus je od téhle chvíle všechno, co v kurzu děláme. Mění se jen velikost toho, co se staví.

Co si odnést

  • Cyklus: zadání → plán → stavba → kontrola → konkrétní zpětná vazba.
  • file:// stačí na jeden HTML soubor, u projektů budeš potřebovat localhost.
  • Localhost je server na tvém počítači, dostupný jen tobě.
  • Zpětná vazba musí říkat co, proč a čím nahradit.

Máš to za sebou?

Označ lekci jako hotovou, ať víš, kde jsi skončil. Nic se tím neuzamkne.

Obsah aktualizován: 21. srpna 2026