Naplánujte si vzhled

Vítejte v poslední lekci kurzu CSS! Teď už z CSS umíte dost na to, abyste vzhled celé webové stránky navrhli sami. A přesně to vás teď čeká.

Upravit můžete jednu ze dvou stránek:

• Svou stránku z kurzu HTML. Pokud jste si ji na konci kurzu HTML uložili do počítače, v dalším cvičení vložíte její kód do editoru. Soubor index.html otevřete v textovém editoru (klikněte na něj pravým tlačítkem myši a zvolte Otevřít v programu, na Macu Otevřít v aplikaci; dvojklik by ho otevřel v prohlížeči), označte celý kód (Ctrl+A, na Macu Cmd+A) a zkopírujte ho (Ctrl+C, na Macu Cmd+C).
• Naši připravenou stránku malého kočičího útulku, kterou teď vidíte v editoru a v náhledu. Má záhlaví s navigací, několik sekcí, karty koček a zápatí, ale zatím žádné styly.

Než začnete psát CSS, vyplatí se udělat si krátký plán. Dělají to i designéři: když si pár věcí rozmyslíte předem, bude celá stránka vypadat jednotně.

• Barvy. Vyberte barvu pozadí, barvu textu a jednu nebo dvě výrazné barvy, třeba pro záhlaví, nadpisy nebo odkazy. Dbejte na to, aby se text od svého pozadí dobře odlišoval: tmavý text na světlém pozadí, nebo naopak. Jednoduchý trik: v HSL zvolte jeden odstín a měňte jen sytost a světlost.
• Písmo. Vyberte si písmo na Google Fonts. Pro celou stránku stačí jedno, nanejvýš dvě: třeba jedno pro nadpisy a druhé pro text. Protože píšete česky, zkontrolujte, že písmo umí i česká písmena: napište do náhledu písma třeba „Příliš žluťoučký kůň úpěl ďábelské ódy“.
• Rozvržení. Rozmyslete si, jak budou části stránky uspořádané. Například: obsah ve sloupci uprostřed stránky, odkazy navigace vedle sebe v řadě (flexbox) a karty v mřížce (CSS Grid).

Plán se nejlépe hodí do komentáře na začátku souboru se styly. Kdykoli se ke kódu vrátíte, hned uvidíte, jaké barvy a písma stránka používá. Může vypadat třeba takhle:

/*
	Můj plán
	Barvy: pozadí #fdf6ec, text #3d2c2e, zvýraznění #b8482e
	Písmo: Nunito z Google Fonts, záložní sans-serif
	Rozvržení: obsah ve sloupci uprostřed, odkazy v řadě,
	karty koček v mřížce
*/

V dalším cvičení najdete seznam všeho, co mají styly obsahovat. Kontroluje se jen to, jaké vlastnosti CSS použijete, nikdy konkrétní barvy, písma nebo velikosti, takže jak bude vaše stránka vypadat, je na vás.

Tip: Když cvičení opustíte, váš kód se neuloží. Plán si proto před pokračováním zkopírujte a v dalším cvičení ho vložte místo našeho ukázkového plánu.