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.

• Cíl úkolu
• Obtížnosti
• Jak si stáhnout podklady

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.

1. Udělej si fork tohoto repozitáře - tím se ti úkol zkopíruje do tvého GitHub profilu.
2. 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.