Git Product home page Git Product logo

recept's Introduction

# Grid blog Dobrovolný kol pro kurz Staň se kóderkou od Czechitas. Když ho odevzdáš, koučové ti k němu napíšou zpětnou vazbu. - [Cíl úkolu](#Cíl-úkolu) - [Grafické zadání](#Grafické-zadání) - [Jak si stáhnout podklady](#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. Jedná se o stránku s článkem na blogu o zdravém jídle. Na výsledný vzhled projektu v plné velikosti se podívej na obrázku [ukazka- vysledku.png](ukazka-vysledku.png). Hlavní pointa tohoto úkolu je ukázat, jak jde (relativně) komplexní design nakódovat pomocí CSS gridu s naprostým minimem kódu. Více v sekci [Cíl úkolu](#Cíl-úkolu). ![Ukázka výsledku](ukazka-vysledku-zmensena.png) ## Cíl úkolu Cílem projektu je procvičit si použití různých technik: - **CSS grid** - tento úkol má ukázat, jak díky CSS gridu můžeme nakódovat celou stránku s naprostým minimem kódu, protože se můžeme spolehnout na to, jak grid automaticky rozmisťuje prvky do mřížky, i když mu poskytneme jen minimum nezbytných informací - stačí totiž, když jednotlivým prvkům (odstavcům, nadpisům, citátům, obrázkům, apod.) **nastavíš, ve kterém sloupci (na které linii) mají v mřížce začínat a končit**. Nemusíš se starat o řádky. Grid bude prvky umisťovat postupně a bude si potřebné řádky přidávat sám. - není potřeba do HTML nic přidávat - tentokrát zkus prostě stylovat přímo HTML značky (odstavcem, nadpisy, obrázky). Jen několik prvků, které to nezbtně potřebují, má přidanou CSS třídu. - **Responzivní webdesign** - v tomto úkolu jde především u ukázání možností gridu, takže když stránku nakóduješ jen v počítačové verzi podle grafického zadání, tak to úplně stačí - máš-li čas a chceš trénovat, zkus vymyslet, jak by mohla vypadat mobilní a tabletová verze tohoto zadání a nakóduj je - **CSS proměnné** - chceš-li naučit sama něco navíc, přečti si komentář uvedený v CSS souboru a nastuduj si, jak použít tzv. *CSS proměnné* (*CSS variables*, nebo spávněji *CSS custom properties*) ## Grafické zadání Vše potřebné (rozměry, použitá písma, apod.) najdeš na obrázku *zadani-ukolu.png*. Použité barvy máš připravené v CSS souboru *style.css*. ![zadání úkolu](zadani-ukolu.png) ## Jak si stáhnout podklady 1. Udělej si **fork** této 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](https://youtu.be/K7rE3jRCjD4). # recept

recept's People

Contributors

pavlazimm avatar

Stargazers

avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.