lekce07

Lekce 7: RWD, Uzavření layoutu

Cíl

Úcastnice:

• zopakují nabité znalosti tvorby layoutů z předchozích lekcí
• učí se orientovat ve vetším cizím kódu

Osnova

1. Stáhnout podklady pro lekci https://bit.ly/webaz-lekce7
2. Rychlé projetí řešení Projekt Recepty
3. Jak na rychlé hledání v dokumentaci http://devdocs.io/
4. Vyhledat CSS funkci calc()
   • použití jako <length>, <frequency>, <angle>, <time>, <number>, <color>, <integer>
   • operace +, -, *, / (whitepace okolo operátorů)
   • pořadí vykonávání pomocí dalších ( )
5. Opakování metod tvorby layoutu z předchozích lekcí
   • coding s 01-layout a hraní si
   • display: none | inline | block | inline-block
   • float: left | right + clear: left | right | both
   • position: relative | absolute | fixed | sticky + z-index
   • display: flex | inline-flex
   • flex: grow shrink basis
   • flex-direction, flex-wrap, justify-content, align-items, align-content
   • @media () { }
6. Velikost obrázku na pozadí background-size: auto | contain | cover | w <h>;
7. Skrytí elementu vizuálně visibility: visible | hidden
8. CSS proměnné (bonus)
   • deklarace a přirazení hodnoty --name: value;
   • použití var(--name)
   • deklarace v :root { ... } jako globální scope
   • dědění hodnoty jako css vlastností od rodiče
   • výchozí hodnota var(--name, red)
   • ukázka na 02-variables

---

Domácí úkol

• dodělání všech restů z minula aneb kdo ještě něco neposlal, teď je ta vhodná příležitost