23. CSS - Animácie
animacie-slajdy.html
Zdrojáky z výučbyEšte sa chvíľu povenujeme štýlovaniu formulárov a potom začneme tému animácií.
O predmete
Predmet Webové technológie je určený pre študentov Košickej akadémie softvérového vývoja, prvý ročník. Predmet poskytuje vedomosti a skúsenosti v práci s HTML5, CSS3 a Typescript-om.
Stretnutia
22. CSS - pseudoelementy ::before a ::after
weby-css-14-before-after.pdfUkážeme si aké neskutočne užitočné vedia byť pseudoelementy ::before a ::after na viacerých miniprojektíkoch.
21. CSS - Premenné
Povieme si o premenných v CSS a aké vedia byť užitočné. Za domácu je dorobenie zmeny farebnej témy projektu Cenovka.
20. CSS - Grid layout 2
Pokračujeme v téme Grid layout.
19. CSS - Grid layout
Na začiatku si dorobíme responzitivu pre projekt galérie fotiek. Začneme tému grid layout.
18. CSS - @container
Ukážeme si nastavovanie responzivity na základe veľkosti kontajnerov. Vytvoríme si jednoduchú animovanú galériu.
17. CSS - @media queries
Porozprávame sa o responzivite stránok. Ukážeme si klasické @media dopyty podľa vlastností max-width a min-width, ale aj modernejšie možnosti @media dopytov. Vytvoríme si responzívny navbar, pričom si precvičíme aj flexbox.
16. CSS - Zmena tried v DOM cez Javascript
Ukážeme si, ako cez Javascript meniť triedy elementom v DOM modeli. Spravíme si projekt s rotačnou stránou a projekt s prekrývajúcim tlačidlom nad obrázkom.
15. CSS - transform a transition
Porozprávame sa o transformácii elementov - posun, rotácia a zošikmenie. Následne si povieme o základnom kameni animácií, o vlastnosti transtition.
14. CSS - Flexbox
Predstavíme si Flexbox. Jednu z najužitočnejších poziciovacích techník.
13. CSS - Poziciovanie cez vlastnosť position
Povieme si o všetkých možnostiach poziciovania - static, relative, absolute, fixed a sticky.
12. CSS - Špecifickosť selektorov, jednotky, obtekanie, pozadie
Vysvetlíme si ako funguje špecifickosť selektorov, teda, ktoré sa uplatňujú v prípade konfliktu, povieme si o základných jednotkách vzdialenosti, vysvetlíme si kedysi široko využívanú schopnosť obtekania a uzavrieme to témou o pozadiach ako obrázkových tak aj grandientných. Obrázky na hranie
11. CSS - Pseudotriedy, pseudoelementy
Spravíme si spolu projekt Vizitka, porozprávame si o súdoreneckých spojkách v selektoroch, atribútových selektoroch, pseudotriedach a pseudoelementoch a spolu začneme projekt Špagety 2, kde si nastavíme centrované menu.
10. CSS - Projekt Hrnčiar
Dnes dáme novým veciam na chvíľu pokoj. Budeme spoločne vytvárať trochu komplexnejšiu webstránku pre tvorcu keramiky.
9. CSS - Box model
Porozprávame asi najdôležitejšiu súčasť CSS a to je box model. Predstavíme si jeho hlavné súčasti content, padding, border a margin. Pri ich nastavovaní nemôžeme vynechať okrem absolútnych aj relatívne veľkosti týchto vlastností a ich kombináciu. Povieme si o tom, ako tieto vlastnosti fungujú pre inline, inline-block a block elementy aj ako medzi nimi prepínať cez vlastnosť display. Na záver si povieme o zaobľovaní rámčekov, tieňovaní a ako sa vysporiadať s obsahom, ktorý do bloku nevojde.
8. CSS - Texty, linky, zoznamy
Porozprávame si spôsoboch dekorovania textu a liniek - tiene, čiary; transofrmácie textu napr. na veľké písmená. Povieme si o využití atribútov id a class pri určení cieľov štýlovania. Predstavíme si spôsoby úpravy odrážok v číslovaných aj nečíslovaných zoznamoch.
7. CSS - farby a fonty
Porozprávame si o rôznych možnostiach nastavovania farieb, spomenieme ako funguje dedičnosť nastavení a potom sa budeme venovať nastavovaniu vlastností fontov - family, size, weight, style, align. Ukončíme to medzerami v písme, výškou písma a importom externých fontov z Google fonts.
6. CSS - spôsoby zakomponovania CSS
Vyučovanie bude skrátené. Predstavíme si 3 základné spôsoby, ako vkladať CSS do HTML.
5. HTML - Sémantické bloky a pridaná sémantika
Predstavíme si základné sémantické bloky <main>, <header>, <footer>, <nav>, <article>, <section> a <aside> a ďalšie. Porozprávame si o pokročilých metódach pridávania sémantiky cez Mikroformáty a Mikrodáta
4. HTML - Špeciálne znaky a tagy, tabuľky
Povieme si o tom, ako sa vkladajú do HTML špeciálne znaky cez HTML Entity. Z rýchlika si predstavíme niekoľko nesémantických elementov ako <meter>, <progress>, <details>, <dialog>, <pre>, <template>, <iframe>, <video> a podobne. V druhej polke sa zameriame na tabuľky v HTML.
3. HTML - formuláre
Prejdeme si hlavné formulárové elementy <input>, <textarea>, <select>, <form> a typy text, password, number, email, color, radio, checkbox, range
2. HTML - linky, obrázky, div, span
Porozprávame si o linkách a obrázkoch.
1. Základné HTML elementy
Rozbeháme si prostredie, ukážeme si základnú kostru HTML5 a ošaháme si niekoľko základných HTML elementov.