32. CSS - 3D text
Dokončíme tému 3D cez vrstevnatý text.
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
31. CSS - Animácie a 3D
Dokončíme si carousel a začneme tému 3D, vyrobíme si 3D checkbox.
30. CSS - Animácie
animacie-slajdy.htmlDnes sa budeme venovať animáciám. Ak stihneme, spravíme si aj carousel.
29. CSS - štýlovanie fromulárov a ich validity
Dnes sa budeme venovať štýlovaniu formulárov, vrátanie štýlovania validity aj s hláškami na spätnú väzbu. Využijeme pri tom významne CSS premenné.
28. CSS - pseudoelementy ::before a ::after
Ukážeme si aké neskutočne užitočné vedia byť pseudoelementy ::before a ::after na viacerých miniprojektíkoch.
27. CSS - subgrid a premenné
Dokončíme tému grid layout predstavením hodnoty subgrid a jej použitia. Potom si povieme o premenných v CSS a aké vedia byť užitočné. V zadaní použite premenné aspoň pri farebnej téme projektu. Zadanie má termín 3.6. o 18:00
26. CSS - Grid layout
Pokračujeme v téme Grid layout.
25. CSS - Projekt - Vypiť
Keďže nás bolo málo, spravili sme si spolu projekt Vypiť.
24. CSS - Grid layout
Ukážeme si veľkého "konkurenta" Flexboxu na nastavovanie rozmiestnenia obsahu a to Grid layout. Zadanie je iba na precvičovanie počas hodiny, nie ako domáca úloha.
23. CSS - @container queries
Ukážeme si nastavovanie responzivity na základe veľkosti kontajnerov. Vytvoríme si jednoduchú animovanú galériu.
22. CSS - @media queries
Dorobíme si responzívny navbar, pričom si precvičíme aj flexbox a javascript.
21. 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 a javascript.
20. CSS - Zmena tried v DOM cez Javascript
Vytvoríme si tlačidlá, čo sa zdanlivo dvíhajú a stláčajú. Ukážeme si, ako cez Javascript meniť triedy elementom v DOM modeli. Spravíme si projekt s rotačnou stránkou a projekt s prekrývajúcim tlačidlom nad obrázkom.
19. 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 transition.
18. CSS - Flexbox 2
weby-css-08-flexbox.pdf
13. zadanie - na hodinu - Flexbox
14. zadanie - Licencia 2
Zdrojáky z výučby
Dokončíme tému Flexbox. 14-te zadanie je potrebné zaslať do utorka 22. apríla 18:00.
17. CSS - Poziciovanie so sticky, Flexbox 1
Dopovieme si o poziciovaní cez sticky. Prejdeme si spolu riešenie zadaní Dúha a Licencia. Možno začneme aj tému Flexbox.
16. CSS - Poziciovanie cez vlastnosť position
Povieme si o všetkých možnostiach poziciovania - static, relative, absolute, fixed a sticky.
15. CSS - Obtekanie, pozadia, gradienty
Vysvetlíme si kedysi široko využívanú schopnosť obtekania, porozprávame sa o pozadiach ako obrázkových tak aj grandientných. Obrázky na hranie.
14. CSS - Špecifickosť selektorov, jednotky vzdialenosti
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.
13. CSS - Pseudotriedy, pseudoelementy
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.
12. 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.
11. CSS - Box model 2
Prejdeme si náš projekt vizitka a porozprávame o ďalších vlastnostiach súvisiacich s box modelom - tieňovaní, rámčekoch outline, flexibilných veľkostiach a ako sa vysporiadať s obsahom, ktorý do bloku nevojde.
10. 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.
9. CSS - fonty, texty, zoznamy
Povieme si ako importovať externé fonty do lokálnych súborov. Porozprávame si spôsoboch dekorovania textu a liniek - tiene, čiary; transofrmácie textu napr. na veľké písmená. Predstavíme si spôsoby úpravy odrážok v číslovaných aj nečíslovaných zoznamoch.
8. CSS - fonty, texty
Povieme si o využití atribútov id a class pri určení cieľov štýlovania. Budeme sa venovať nastavovaniu vlastností fontov - family, size, weight, style, align. Nastavíme si medzery v písme, výšku písma. Povieme si ako použiť externé fonty z Google fonts.
7. CSS - spôsoby zakomponovania CSS, farby
Predstavíme si 3 základné spôsoby, ako vkladať CSS do HTML, potom si porozprávame o rôznych možnostiach nastavovania farieb.
6. HTML - Sémantické elementy, pridaná sémantika
Dokončíme sémantické elementy a porozprávame si o pokročilých metódach pridávania sémantiky cez Mikroformáty a Mikrodáta. Dnes domáca nebude.
5. HTML - Tabuľky a základné sémantické elementy
weby-html-04.pdf
weby-html-05.pdf
4. zadanie - Tabuľky
5. zadanie - Sémantické HTML elementy
Zdrojáky z výučby
Porozprávane si o tabuľkách v HTML - domáce zadanie bude z nich. Začneme rozprávanie o sémantických elemetoch. Piate zadanie slúži iba ako štartovací projektík.
4. HTML - Špeciálne znaky a tagy, funkčné elementy
Na začiatok si spolu spravíme úlohu formulár. Potom si povieme 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. Ak stihneme, pozrieme sa 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.