Dobrovolný úkol pro kurz Staň se kóderkou od Czechitas.
Než začneš s projektem cokoliv dělat, přečti si prosím celý tento text až do konce.
Za úkol máš nakódovat design podle grafického návrhu. Jedná se o úvodní stránku webu, kde se prodávají zájezdy. Na výsledný vzhled projektu se podívej na obrázku ukazka-vysledku.jpg.
Tentokrát máš k dispozici opět jenom zadání v podobě grafického návrhu vyexportovaného v módu pro vývojáře z Adobe XD.
Cílem projektu je procvičit si použití různých technik:
- Vytvoření stránky z nuly
- tentokrát nemáš připravený žádný kód
- udělej si klon repozitáře a v něm si sama vytvoř HTML a CSS soubor, připoj písma, stáhni obrázky
- Práce s grafickým návrhem
- v tomto projektu máš jako podklady grafický návrh vyexportovaný z Adobe XD
- v návrhu si sama změříš potřebné rozměry, vyexportuješ si z něho obrázky, zjistíš barvy a použitá písma
- pokud ještě nevíš jak na to, návod jak pracovat s návrhem, najdeš v krátkém YouTube videu (20 min)
- obrázky jdou z návrhu vyexportovat z mobilního, tabletového i počítačového rozložení, ale stále se jedná o ty stejné obrázky (6 fotek, 4 ikony, 1 logo) - stačí je tedy vyexportovat jednou z jakékoliv verze
- Responzivní webdesign
- stránka je plně responzivní - má mobilní, tabletovou i počítačovou verzi
- všechny responzivní varianty jsou obsažené v grafickém návrhu
- Grid a flexbox
- stránka je navržená tak, aby byla extrémně jednoduše vyrobitelná pomocí CSS gridu
- nezapomeň ale na flexbox - jsou místa, kde ho můžeš taky použít (např. rozmístění cenovky a názvu+popisu zájezdu v rámečcích s fotkami na pozadí)
- nemusíš dělat z celé stránky jeden velký grid. Můžeš mít na stránce sekce, které jsou tvořené samostatnými menšími gridy
- BEM a komponentové myšlení
- snaž se použít konvenci BEM pro pojmenování tříd
- přemýšlej komponentově - pokud se nějaký prvek používá na stránce opakovaně, zaslouží si být samostatnou komponentou (v terminologii BEMu jim řikáme blok)
- nezapomeň, že bloky mohou obsahovat jiné bloky
- Sass
- pokud si troufáš, použij Sass
- můžeš si vytvořit proměnné, které můžeš používat skrze celé CSS - barvy, písma, velikosti standardních rozestupů
- určitě se ti bude hodit i vnořování prvků nebo media query
- umíš-li už rozdělit CSS pomocí Sassu na více dílčích souborů, toto je ideální úkol, kde si to můžeš vyzkoušet
Všechny potřebné obrázky, rozměry, použitá písma, barvy, apod. najdeš online v grafickém návrhu vyexportovaném z Adobe XD.
Pro případ, že bys chtěla pracovat offline nebo si chtěla s návrhem hrát, ve složce Adobe-DX-navrh máš k dispozici soubor Cestovka.xd, který si můžeš otevřít v Adobe XD u sebe na počítači (máš-li Adobe XD nainstalované). Pro vypracování úkolu to není nutné - stačí ti online verze, na kterou je odkaz o odstavec výše.
Grafický návrh obsahuje 3 plátna s rozložením webu pro mobil, tablet a počítač a 1 plátno s poznámkami k návrhu.
Nevíš-li, jak s návrhem pracovat, podívej se na krátké YouTube video (20 min), kde ti vše ukážeme.
- Udělej si fork této repozitáře - tím se ti úkol zkopíruje do tvého GitHub profilu.
- Forknutou repozitář si naklonuj k sobě na disk.
Pokud nevíš, co je to fork repozitáře a jak ho provést, podívej se na krátké video.