Webové techológie 1N

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

44. Typescript - Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Porovnáme si klasické a arrow funkcie a použitie this v nich. Vysvetlíme si základné higher-order funkcie v poliach - forEach, filter, map, flat, flatMap, reduce a reduceRight. Budeme pracovať s JSON dokumentom countries.json podľa úloh uvedených nižšie.

Úlohy:

  1. Vráťte pole s názvami všetkých krajín.
  2. Vráťte pole s názvami európskych krajín.
  3. Vráťte pole objektov s vlastnosťami name a area, popisujúce krajiny s počtom obyvateľov nad 100 miliónov, teda: 
      [ { name: 'Bangladesh', area: '147570 km2' },
    { name: 'Brazil', area: '8515767 km2' },
    { name: 'China', area: '9640011 km2' },
    ...
  ]
  4. Vráťte pole všetkých jazykov, ktoré sa používajú Južnej Amerike bez duplicít, teda: 
      [ { iso639_1: 'es', iso639_2: 'spa', name: 'Spanish', nativeName: 'Español' },
    { iso639_1: 'gn', iso639_2: 'grn', name: 'Guaraní', nativeName: "Avañe'ẽ" },
    { iso639_1: 'ay', iso639_2: 'aym', name: 'Aymara', nativeName: 'aymar aru'},
    ...
  ]

43. CSS, Javascript - clip-path, scroll, vybrané súčasti Javascriptu

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Dokončíme si rozprávanie o CSS pre tento rok krátkou ukážkou použitia clip-path v kombinácii so skrolovaním. Potom sa začneme baviť hlbšie o jazyku Javascript. Prejdeme si také súčasti jazyka JavaScript, ktoré sa v Jave nenachádzajú - globálne vs. lokálne premenné a konštanty, template strings, pravdivé a nepravdivé výrazy, rôzna práca s objektami a poľami, object destructuring, spread operátor

38. CSS - responzívne tabuľky, formuláre s validáciou

github iconZdrojáky z výučby

Dnes sa budeme venovať naprv použitiu pseudoelemenov pri tvorbe responzívnej tabuľky a potom prejdeme na štýlovanie formulárov, vrátanie štýlovania validity aj s hláškami na spätnú väzbu. Využijeme pri tom významne CSS premenné.

34. CSS - Grid layout

pdf iconweby-css-12-grid.pdf github icon16. zadanie - Grid github iconZdrojáky z výučby

Na začiatok dorobíme animovanú galériu a potom si ukážeme 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.

33. CSS - @container queries

pdf iconweby-css-11-media-queries.pdf github iconZdrojáky z výučby

Dorobíme si responzívny navbar, pričom si precvičíme aj flexbox a javascript. Ukážeme si nastavovanie responzivity na základe veľkosti kontajnerov. Začneme animovanú galériu.

32. CSS - @media queries

pdf iconweby-css-11-media-queries.pdf github iconZdrojáky z výučby

Dokončíme projekt s rotačnou stránkou. 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.

31. CSS - Zmena tried v DOM cez Javascript

pdf iconweby-css-10-js.pdf github iconZdrojáky z výučby

Ukážeme si, ako cez Javascript meniť triedy elementom v DOM modeli. Spravíme si projekt s rotačnou stránkou.

29. CSS - Flexbox IV

github iconZdrojáky z výučby

Spoločne si doklepneme návrh stránky z minula a zahráme sa so žabkami.

19. CSS - Projekt Hrnčiar

pdf iconweby-css-05-selektory.pdf github iconZdrojáky z výučby

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

github icon9. zadanie - Hrnčiar github iconZdrojáky z výučby

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

pdf iconweby-css-04-box_model.pdf github iconZdrojáky z výučby

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

pdf iconweby-css-04-box_model.pdf github icon8. zadanie - Vizitka github iconZdrojáky z výučby

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.

13. CSS - fonty, texty

pdf iconweby-css-02-fonty-texty.pdf github iconZdrojáky z výučby

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.

7. HTML - Špeciálne znaky a tagy, funkčné elementy

pdf iconweby-html-04.pdf github iconZdrojáky z výučby

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

pdf iconweby-html-03.pdf github icon3. zadanie - Dotazník github iconZdrojáky z výučby

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.

3. Commit a push do git úložiska. Editovanie HTML.

github icon1. zadanie - Vlk dravý github iconZdrojáky z výučby

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.

1. Nastavenie prostredia

github icon1. zadanie - Vlk dravý

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.