- Obrázek se zadáním od grafika
- Pro nastřelení struktury můžete využít vlastní editor nebo připravený prázdný codepen: https://codepen.io/svobodalukas/pen/wYgppo
- Obrázky ke cvičení: profil.jpg, foto-1.jpg, foto-2.jpg, foto-3.jpg, foto-4.jpg, foto-5.jpg, foto-6.jpg
- Obrázek se zadáním od grafika
- Pro nastřelení struktury můžete využít vlastní editor nebo připravený prázdný codepen: https://codepen.io/svobodalukas/pen/wYgppo
- Obrázek se zadáním od grafika
- Pro nastřelení struktury můžete využít vlastní editor nebo připravený prázdný codepen: https://codepen.io/svobodalukas/pen/wYqXda
- Obrázek ke cvičení: profil.jpg
- Zarovnejte produkty vedle sebe. Zajistěte, aby byly stejně vysoké. Produkt "Profi" zobrazte uprostřed aniž byste měnili pořadí v HTML.
- Využijte připravený codepen: https://codepen.io/svobodalukas/pen/PyLpjN
- Obrázek se zadáním od grafika
- Využijte připravený codepen se všemi assety: https://codepen.io/svobodalukas/pen/wYrgmq
- Změňte strukturu projektu a pojmenování souborů či adresářů tak, aby dávala smysl
- Využijte připravený codepen: https://codepen.io/svobodalukas/pen/ePybxa
- Refaktoring komponenty s využitím OOCSS
- Využijte připravený codepen: https://codepen.io/svobodalukas/pen/oapmWw
- Změna pojmenování CSS tříd s využitím BEM
- Využijte připravený codepen: https://codepen.io/svobodalukas/pen/XxZmwY
- HTML5 struktura a formuláře
- CSS Flex
- CSS Grid
- CSS Animace
- CSS Pseudotřídy
- CSS Jak na střed
- CSS Stylovaný seznam
- CSS Stylovaný checkbox
- CSS Stylovaný selectbox
- CSS Zkrácení textu
- CSS Responsivní iframe
- Responsivní obrázky
- Responsivita - cvičení breakpointy
- Organizace CSS - komponenta versus kontext
- Cvičení - HTML
- Cvičení - HTML + CSS
- Cvičení - CSS Flexbox
- Cvičení - HTML5
- Cvičení - HTML - vh jednotky
- Cvičení - Responsivita - MediaQueries
- Cvičení - SASS
- Cvičení - Bootstrap - container + grid
- Cvičení - Bootstrap - komponenty
- Cvičení - Bootstrap - CSS styly
- Cvičení - Rychlost - LazyLoading & CriticalCSS
- Cvičení - Refaktoring struktury
- Cvičení - Refaktoring komponenty
- Cvičení - Refaktoring komponenty - BEM
- https://www.vzhurudolu.cz/ (moderní HTML a CSS, rychlost načítání, organizace CSS kódu)
- https://www.jakpsatweb.cz/ (HTML a CSS)
- http://jecas.cz/ (tipy a návody pro HTML, CSS a JS)
- https://www.vzhurudolu.cz/prirucka/rcss-zasady (Zásady psaní respektujícího CSS)
- https://developer.mozilla.org/en-US/docs/Web/ (HTML a CSS dokumentace)
- https://css-tricks.com/ (CSS)
- https://www.smashingmagazine.com/ (webdesign, UX, CSS)
- https://caniuse.com/ (můžu to použít?)
- https://stackoverflow.com/ (vše co řešíte už tu bylo)
- https://www.fontsquirrel.com/tools/webfont-generator (generátor webfontů)