Sandbox · Level 1 · Easy · 5 minut
🎨 Změň barvy svého webu
Tvůj web je teď celý v Minecraft-zelené. Změň ji na svoji barvu. Tohle je nejjednodušší možná úprava, ale uvidíš celý workflow.
🎯 Cíl
Změnit hlavní akcentovou barvu na webu z jasné zelené (#55ff55) na svou oblíbenou barvu.
Třeba:
- 🔵 modrá (jako Samsung):
#1428a0 - 🟣 fialová:
#a371f7 - 🟠 oranžová:
#ff8c00 - 🟡 zlatá:
#ffaa00 - 🔴 červená:
#ff3344 - nebo cokoli z htmlcolorcodes.com
📝 Co řekni Claude
V Claude Code, ve své složce webu, napiš:
> V CSS proměnných v css/style.css změň hlavní
> akcent (--accent) ze zelené na fialovou (#a371f7).
> Ukaž mi, kde to budeš měnit.
Claude ti řekne něco jako:
> Najdu CSS proměnnou --accent v souboru css/style.css na řádku 12.
> Změním ji z #55ff55 na #a371f7. OK?
Pošli mu „Ano" nebo "OK". Claude provede změnu.
🔍 Ověř lokálně
Otevři index.html v prohlížeči (dvojklik na soubor) a podívej se.
Akcentová barva by měla být teď tvoje nová barva.
Co všechno se změní? Hodně. Tlačítka, hover stavy, nadpisy,
stat čísla, focus rámečky. Všechno, co používalo proměnnou
--accent.
Tohle je síla CSS proměnných — změníš jednu hodnotu, projde se to po celém webu.
🚀 Nahraj na adamlunak.cz
Když jsi spokojený, řekni Claude:
> Nahraj to na adamlunak.cz
Počkáš 30 vteřin, otevřeš adamlunak.cz, hotovo.
🌟 Bonus výzva
Když ti to půjde, zkus:
- Změnit i sekundární barvu (
--accent-2) — třeba modrou na cyan - Změnit pozadí (
--bg) z tmavě šedé na úplně černé - Přidat úplně novou barevnou paletu — třeba „cyberpunk" (růžová + fialová + černá)
✅ Hotovo? Co sis odnesl
- Víš, kde jsou barvy webu (CSS proměnné na začátku style.css)
- Víš, jak komunikovat s Claude („změň tuhle věc na tuhle")
- Viděl jsi celý workflow: lokální změna → deploy → live
- Web je teď ještě víc tvůj