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.
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.
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.
Predstavíme si Flexbox. Jednu z najužitočnejších poziciovacích techník.
Povieme si o všetkých možnostiach poziciovania - static, relative, absolute, fixed a sticky.
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
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.
Dnes dáme novým veciam na chvíľu pokoj. Budeme spoločne vytvárať trochu komplexnejšiu webstránku pre tvorcu keramiky.
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.
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.
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.
Vyučovanie bude skrátené. Predstavíme si 3 základné spôsoby, ako vkladať CSS do HTML.
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
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.
Prejdeme si hlavné formulárové elementy <input>, <textarea>, <select>, <form> a typy text, password, number, email, color, radio, checkbox, range
Porozprávame si o linkách a obrázkoch.
Rozbeháme si prostredie, ukážeme si základnú kostru HTML5 a ošaháme si niekoľko základných HTML elementov.