Bonusový úkol pro kurz Staň se kóderkou od Czechitas. Tento úkol se neodevzdává a nehodnotí. Vypracuj si ho pro sebe jako trénink kódování CSS. Toto je těžší varianta úkolu, více se dozvíš v sekci obtížnosti úkolu.
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 - mini stránku produktu ve fiktivním e-shopu s běžeckými botami. Na výsledný vzhled projektu se podívej na obrázku ukazka-vysledku.jpg.
Cílem projektu je procvičit si použití různých technik:
- Flexbox
- umístit zelenou a bílou polovinu gafického návrhu vedle sebe (obě jsou stejně velké)
- seznam velikostí boty - položky seznamu dát pomocí flexboxu vedle sebe na řádek
- Absolutní pozicování
- obrázek boty napozicovat v rámci levé poloviny tak, že z ní trčí ven
- absolutní pozicování asi použiješ i na cenovku v pravém dolním rohu levé části designu
- a možná i na umístění tlačítka do levého dolního rohu bílé poloviny (volitelně)
- Margin a padding
- absolutně pozicuj jen prvky, u kterých je to nezbytně nutné
- odsazení ostatních prvků (logo, slogan, název boty, popis, apod.) od okraje pravé a levé poloviny řeš pomocí marginu a paddingu
- pamatuj na základní poučku:
- chci-li uvnitř prvku odsadit něco od jeho okraje, použiji padding
- chci-li odsunout dva prvky od sebe navzájem, použiji margin
Ve složce projektu je obrázek zadani-ukolu.jpg, kde jsou uvedeny požadované rozměry, rozestupy, použitá písma, apod. Pokud nějaký rozměr na obrázku není uveden, zkus ho odhadnout. I to bohužel patří k práci kódera - musí se umět vyrovnat i s nekompletními podklady a "nějak" práci dokončit. Snaž se vizuálně co nejvíc přiblížit zadání.
Zadání tohoto projektu je vytvořeno ve dvou úrovních obtížnosti. Tento repozitář obsahuje výchozí standardní úroveň obtížnosti. Pokud máš méně času nebo s úkolem bojuješ, můžeš zkusit lehčí variantu úkolu.
- obsažená v tomto repozitáři
- v HTML najdeš pouze obsahové elementy (nadpisy, odstavce, obrázky)
- sama si do HTML musíš dopsat další strukturu, která je nutná, abys mohla HTML nastylovat podle grafického zadání
- musíš vymyslet, do jakých prvků obsah zabalíš a jaké třídy jim přidáš
- dostupná v druhém repozitáři
- grafické zadání je stejné, ale v HTML je kompletně připravený obsah včetně struktury, obalových prvků a přidaných CSS tříd
- v této obtížnosti nemusíš HTML vůbec upravovat - stačí si ho prostudovat, abys věděla jaké prvky/třídy máš stylovat a "jenom" k nim napsat CSS
Je úplně v pořádku, pokud si nakonec zvolíš jednodušší variantu (např. kvůli nedostatku času), ale doporučuji, abys nejprve zkusila výchozí obtížnost, kde si musíš sama vytvořit i HTML strukturu. Není to zase o tolik těžší a v reálném životě ti také nikdo HTML připravovat nebude. Jako kóderka dostaneš grafický návrh a ten budeš muset převést do HTML a CSS. Budeš-li si u bonusových úkolů volit jednodušší obtížnosti, nakonec zjistíš, že sice umíš CSS, ale dělá ti problém vymyslet a napsat si vlastní HTML.
- Udělej si fork tohoto 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.