29. CSS - Flexbox IV a transform
Spoločne si doklepneme návrh stránky z minula a ak stihneme, začneme tému o transformácii elementov - posun, rotácia a zošikmenie.
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
28. CSS - Flexbox III
návrh stránkyPokračujeme v téme Flexbox. Možno si ukážeme podstatné časti domácej, ak bude záujem a nastavíme si základný responzívny layout kostry stránky cez Flexbox.
27. CSS - Flexbox II
weby-css-08-flexbox.pdf
13. zadanie - na hodinu - Flexbox
14. zadanie - Licencia 2
Zdrojáky z výučby
Pokračujeme v téme Flexbox. Domáca je do nedele 25.1.2026 18:00.
26. CSS - Flexbox
Začneme tému Flexbox, čo je asi najpopulárnejší layoutovací nástroj súčasnosti. Domáca nebude.
25. CSS - Poziciovanie cez vlastnosť position II.
Na začiatku si vzorovo vyriešime projekt Dúha. Na záver si dokončíme tému poziciovanie, konkrétne fixed a sticky.
24. CSS - Poziciovanie cez vlastnosť position
Povieme si o všetkých možnostiach poziciovania, dnes stihneme - static, relative a absolute.
23. CSS - Pozadia, gradienty
Dokončíme rozprávanie o pozadiach ako obrázkových tak aj grandientných. Domáca je do 11.1.2026 18:00
22. CSS - Jednotky vzdialenosti, obtekanie, pozadia
Povieme si o základných jednotkách vzdialenosti.Vysvetlíme si kedysi široko využívanú schopnosť obtekania. Začneme tému pozadia. Obrázky na hranie.
21. CSS - Špecifickosť selektorov
Prejdeme si domácu Špagety 2 a vypichneme dôležité časti, kde boli časté problémy. Vysvetlíme si ako funguje špecifickosť selektorov.
20. CSS - Pseudotriedy a pseudoselektory
Porozprávame si o pseudotriedach a pseudoelementoch a začneme domácu úlohu Špagety 2, ktorej dokončenie bude na domácu úlohu.
19. CSS - Projekt Hrnčiar
Dokončíme projekt stránky tvorcu keramiky. Začneme rozprávanie o súdoreneckých spojkách v selektoroch a atribútových selektoroch.
18. 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.
17. 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.
16. 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.
15. CSS - fonty, texty
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.Domáca bude 7. zadanie - do utorka 18.11. 18:00.
14. CSS - fonty, texty
Nastavíme si medzery v písme, výšku písma. Povieme si ako použiť externé fonty z Google fonts a ako importovať externé fonty do lokálnych súborov. Dnes domáca nebude.
13. CSS - fonty, texty
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. Dnes domáca nebude, užite si prázdniny.
12. CSS - farby, identifikátory, fonty
Dokončíme rozprávanie o farbách. Povieme si o využití atribútov id a class pri určení cieľov štýlovania a možno už začneme rozprávať o fontoch. Domáca dnes nebude.
11. CSS - vkladanie CSS, pomenované farby
Predstavíme si 3 základné spôsoby, ako vkladať CSS do HTML, potom začneme rozprávanie o farbách. Domáca bude 6. zadanie - do utorka 21.10. 18:00.
10. HTML - Mikrodáta
Predstavíme si spôsob pridania sémantiky zvanú Mikrodáta. Dnes domáca nebude.
9. 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. Dnes domáca nebude.
8. 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.
7. HTML - Špeciálne znaky a tagy, funkčné elementy
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. Dnes domáca nebude.
6. HTML - formuláre II
Prejdeme si formulárové elementy - input typy text, password, number, email, color, ale aj elementy textarea, select, radio, checkbox, range a fieldset. Zadanie treba vypracovať do nedele 5.10.2025 18:00.
5. HTML - formuláre
Prejdeme si základné formulárové elementy input (typu text), form a label
4. HTML - linky, obrázky, div, span
Porozprávame si o linkách a obrázkoch.
3. Commit a push do git úložiska. Editovanie HTML.
Dokončíme si skúšanie práce s gitom s našim prvým zadaním aj so zdrojákmi z výučby. Ukážeme si ako efektívne pracovať s Visual Studio Code.
2. Základné HTML elementy
Vysvetlíme si základnú prácu s gitom. Ukážeme si základnú kostru HTML5 a ošaháme si niekoľko základných HTML elementov.
1. Nastavenie prostredia
Rozbeháme si prostredie - nainštalujeme si Git, Visual Studio Code, vytvoríme si kontá na Githube a vytvoríme si svoj repozitár prvého zadania v classroom.github.com.