Build Mode
Kurz
Modul 05 · Tvůj první vibe-coded web

Doladění a kontrola před nasazením

Poslední kolo, ve kterém se z „funguje to“ stane „tohle můžu někomu ukázat“.

14 minlekce 32/107

Než začneš

  • Web funkční na mobilu i na desktopu

Po lekci umíš

  • Máš checklist, který projdeš před každým nasazením
  • Umíš zkontrolovat přístupnost a rychlost
  • Web má správné titulky a náhled pro sdílení
Obsah lekce (4)

Web funguje. Teď z něj uděláme věc, u které si nikdo neřekne „to je vidět, že to dělal amatér“.

Rozdíl mezi „funguje“ a „hotovo“

Věci, které dělí jedno od druhého, jsou vždycky ty samé:

  1. Titulek stránky a popis

    To, co je vidět v záložce prohlížeče a ve výsledcích hledání. Když tam je „Create Next App“, je to okamžitě poznat.

  2. Náhled pro sdílení

    Když někdo pošle odkaz na tvůj web do zprávy, ukáže se náhled. Bez nastavení se ukáže prázdný obdélník.

  3. Ikona v záložce

    Favicon. Drobnost, kterou si nikdo nevšimne, když tam je, a každý, když chybí.

  4. Funkční odkazy

    Žádný odkaz nesmí vést nikam. Ani ten v patičce.

  5. Stav, když něco chybí

    Co se stane, když někdo přijde na adresu, která neexistuje? Má vidět srozumitelnou stránku, ne systémovou chybu.

Prompt pro Claude Code

Kontrola před nasazením

Projdi to vždycky, než web pustíš ven. Ulož si to.

Projdi web před nasazením a oprav, co je potřeba. U každého bodu mi
napiš, jestli byl v pořádku, nebo co jsi změnil.

OBSAH A METADATA
1. Titulek a popis stránky odpovídají obsahu (ne výchozí text ze šablony).
2. Metadata pro sdílení na sociálních sítích (Open Graph) jsou vyplněná.
3. Je nastavená ikona do záložky prohlížeče.
4. Jazyk stránky je nastavený na češtinu.

ODKAZY A STAVY
5. Všechny odkazy vedou někam funkčního. Žádný odkaz „#“.
6. Existuje stránka pro neexistující adresu (404) a je srozumitelná.
7. Kontaktní odkazy (e-mail, telefon) opravdu fungují po kliknutí.

PŘÍSTUPNOST
8. Kontrast textu proti pozadí splňuje WCAG AA.
9. Obrázky mají alternativní popis.
10. Po stránce se dá projít klávesou Tab a je vidět, kde jsem.
11. Nadpisy jdou v logickém pořadí (h1, pak h2, ne obráceně).

TECHNICKÉ
12. V konzoli prohlížeče nejsou žádné chyby.
13. Nikde nezůstal ukázkový obsah ze šablony.

Nezačínej, dokud mi nenapíšeš, co jsi našel.

Konzole prohlížeče

Tohle je nástroj, který budeš potřebovat po celý zbytek kurzu, tak si ho ukažme teď.

  1. Otevři nástroje pro vývojáře

    F12, nebo na macOS Cmd+Alt+I.

  2. Přepni na záložku Console

    Tady se vypisují chyby a hlášky z běžící stránky.

  3. Obnov stránku

    Chyby se vypisují při načtení, takže je uvidíš po obnovení.

Prompt pro Claude Code

Oprav chybu z konzole

Vždycky přilož celý text chyby, ne jen její začátek.

V konzoli prohlížeče mi vyskočila tahle chyba:

---
[VLOŽ CELÝ TEXT CHYBY]
---

Stalo se to, když: [CO JSI DĚLAL]

Zjisti, co ji způsobuje, a oprav to. Nejdřív mi napiš, co je příčina.

Rychlost

Rychlost webu je něco, co lidé nevědomky vnímají. Dva nejčastější hříchy u malých webů:

  1. Obrovské obrázky

    Fotka z telefonu má klidně 6 MB. Na web patří verze, která má stovky kilobajtů. Rozdíl v načtení jsou vteřiny.

  2. Zbytečné knihovny

    Když si projekt stáhne velkou knihovnu kvůli jedné drobnosti, platí za to každý návštěvník.

Prompt pro Claude Code

Zkontroluj rychlost

Projdi projekt z hlediska rychlosti načtení:

1. Jsou nějaké obrázky zbytečně velké? Řekni mi u každého velikost
 a navrhni, na kolik ho zmenšit.
2. Je v projektu knihovna, kterou používáme jen na jednu drobnost
 a šla by nahradit vlastním kódem?
3. Načítá se nějaký kód nebo písmo, které nepoužíváme?

Zatím nic neměň, jen mi to vypiš i s odhadem, kolik by to ušetřilo.

Poslední čtení očima návštěvníka

Nejlevnější kontrola, kterou lidé přeskakují.

Otevři web, jako bys ho viděl poprvé, a odpověz si:

  • Poznám za tři vteřiny, o co jde?
  • Vím, co mám udělat?
  • Je někde něco, co mi překáží?
  • Věřil bych tomu, kdybych sem přišel z Googlu?
Milník projektu

Web má správný titulek, náhled pro sdílení, ikonu, funkční odkazy a stránku pro neexistující adresu. Konzole je čistá. Obrázky nejsou zbytečně velké. Někdo cizí to viděl a rozuměl tomu.

Teď to můžeme pustit ven.

Co si odnést

  • Titulek, popis, náhled pro sdílení a ikona dělají rozdíl mezi hotovým a rozdělaným.
  • Konzole prohlížeče je místo, kde stránka hlásí chyby. Kopíruj je celé.
  • Velké obrázky jsou nejčastější příčina pomalého webu.
  • Ukaž to někomu a nic nevysvětluj.

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