🚀 Pokročilý kurz

Kurz HTML a CSS
pre pokročilých

Zápasíte so zalamovaním zložitých layoutov na mobiloch, neprehľadným CSS kódom plným !important alebo hľadáte spôsob, ako vytvoriť plynulé animácie, Dark Mode a moderné mriežky bez zbytočného JavaScriptu?

Prestaňte písať neudržateľný kód. Na živom online kurze sa naučíte vytvárať komplexné dvojrozmerné rozloženia pomocou CSS Grid, naplno ovládať flexibilitu Flexboxu s princípom Mobile First, navrhovať prístupné a SEO optimalizované formuláre, tvoriť kľúčové animácie cez @keyframes a organizovať rozsiahle projekty pomocou škálovateľnej metodiky BEM.

⏱️

Trvanie –

💰

Cena –

🎓

Certifikát Po absolvovaní

Objednať kurz

VS Code – styles.scss

SCSS$primary: hsl(220, 90%, 55%) · BEM

Technika

Podpora

Stav

CSS Variables

97%

✓ Modern

Container Queries

91%

✓ Modern

@layer

89%

⚡ New

Animations

99%

✓ Stable

Anotácia a popis kurzu

Poznať základné značky a vedieť zmeniť farbu písma je dnes pre profesionálnu tvorbu webov len štartovacia čiara. Moderný front-end vývoj si vyžaduje schopnosť postaviť robustný, prístupný (a11y) a bleskovo responzívny layout, ktorý funguje bezchybne na akomkoľvek zariadení.

Kurz HTML a CSS pre pokročilých je navrhnutý pre všetkých, ktorí už ovládajú základy kódovania a chcú písať čistý, modulárny a moderný kód na úrovni skúseného front-end vývojára. Naučíte sa využívať plný potenciál sémantického HTML5, tvoriť validované formuláre s vlastným dizajnom a implementovať ARIA atribúty pre čítačky obrazovky.

V CSS časti do hĺbky preniknete do dvojrozmerného systému CSS Grid a jeho kombinácie s Flexboxom. Osvojíte si relatívne jednotky (rem, vh, vw), tvorbu responzívnych obrázkov (<picture>, srcset) a moderné funkcie ako calc(), clamp(), min() a max(). Zvládnete tvorbu plynulých 2D/3D transformácií, animácií cez @keyframes, nasadenie svetlého/tmavého režimu (Dark Mode) cez CSS premenné (Custom Properties) a zavediete do svojich projektov poriadok pomocou metodiky BEM, preprocesorov Sass/SCSS a moderných frameworkov (Tailwind CSS, Bootstrap).

👥 Pre koho je kurz určený?

Pre začínajúcich front-end vývojárov a kodérov, ktorí chcú prekonať základy a začať písať profesionálny, čistý a škálovateľný kód.
Pre webdizajnérov a WordPress tvorcov, ktorí potrebujú plnú kontrolu nad úpravou šablón a vytváraním komplexných responzívnych rozložení.
Pre každého, kto pozná základy HTML a CSS a chce zvládnuť CSS Grid, moderné animácie, Dark Mode a princípy metodiky BEM.

💻 Materiály a software

Každý účastník kurzu HTML a CSS pre pokročilých, dostane učebné materiály ku kurzu zadarmo.

Používané prostredie: Školenie prebieha v bezplatnom editore kódu Visual Studio Code a webovom prehliadači (odporúčaný Google Chrome alebo Mozilla Firefox) na operačnom systéme Windows alebo zariadeniach Apple (macOS). Na školenie je potrebný počítač s pripojením na internet.

Profil absolventa

Absolvent vzdelávacieho programu disponuje pokročilými teoretickými vedomosťami a praktickými zručnosťami v oblasti moderného frontendového kódovania pomocou technológií HTML5 a CSS3. Dokáže samostatne navrhovať a vyvíjať komplexné, škálovateľné, plne responzívne a prístupné webové rozhrania podľa aktuálnych priemyselných štandardov. Ovláda dvojdimenzionálne rozloženia (CSS Grid), pokročilý Flexbox, moderné CSS premenné a funkcie, plynulé animácie, ako aj metodiky pre udržateľnú architektúru kódu (BEM).

Vzdelávacie výstupy

1 Vedomosti (Čo absolvent vie a pozná)

Pozná pokročilé sémantické prvky HTML5, štandardy webovej prístupnosti (WCAG, ARIA atribúty, podpora čítačiek) a zásady technického on-page SEO.
Rozumie architektúre dvojdimenzionálneho systému CSS Grid, pokročilej flexibilite Flexboxu a stratégiám ich vzájomnej kombinácie pre tvorbu robustných layoutov.
Ovláda princípy vývojovej stratégie Mobile First, fungovanie Media Queries, prácu s responzívnymi médiami (picture, srcset) a relatívnymi jednotkami (rem, em, vh, vw).
Pozná mechanizmy hardvérovo akcelerovaných animácií, 2D/3D transformácií, kľúčových snímok (@keyframes) a optimalizácie výkonu v prehliadači (will-change).
Rozumie princípom riadenia špecifickosti selektorov, metodike BEM, fungovaniu CSS premenných (Custom Properties) a konceptom moderných CSS preprocesorov a frameworkov (Sass, Tailwind).

2 Zručnosti (Čo absolvent dokáže prakticky vykonať)

Vytvárať prístupné, sémanticky bohaté a SEO optimalizované webové štruktúry vrátane komplexných formulárov s klientskou validáciou a vlastným štýlovaním.
Implementovať pokročilé a viacúrovňové mriežkové rozloženia pomocou CSS Grid (grid-template, grid-area, fr, minmax, repeat) v spojení s Flexboxom.
Navrhovať plne responzívne stránky s fluidnou typografiou a dynamickými prvkami s využitím moderných logických funkcií (calc(), clamp(), min(), max()).
Vytvárať plynulé používateľské interakcie, hover efekty a komplexné animácie pomocou CSS Transitions, Transform a kľúčových snímok.
Štruktúrovať a modulárne organizovať rozsiahle CSS štýly podľa metodiky BEM a implementovať dynamické témy (napr. Light/Dark Mode) pomocou CSS premenných.

3 Kompetencie (Uplatnenie v praxi)

Samostatne vyvíjať komplexné, vizuálne atraktívne a technicky bezchybné webové rozhrania pripravené na nasadenie do produkčného prostredia.
Preberať plnú zodpovednosť za prístupnosť webu (a11y), technickú SEO optimalizáciu a plynulý výkon grafických prvkov a animácií.
Kriticky posudzovať a voliť vhodné technologické a architektonické postupy (BEM, preprocesory, utility triedy) podľa rozsahu a cieľov projektu.
Efektívne riešiť zložité výzvy spojené s kompatibilitou a responzivitou rozhraní na rôznych typoch moderných zariadení.
Plynule spolupracovať v tíme vývojárov a nadviazať na prácu s modernými JavaScriptovými frontendovými frameworkmi.

Metódy vzdelávania a hodnotenia

🧑‍🏫 Metódy výučby

Interaktívny výklad lektora spojený s okamžitým písaním pokročilého kódu (learning by doing), navrhovaním komplexných responzívnych layoutov, implementáciou plynulých animácií a osvojovaním si udržateľnej architektúry CSS.

📝 Spôsob hodnotenia

Priebežná kontrola postupov a záverečné samostatné praktické zadanie zamerané na sémantickú štruktúru a prístupnosť (a11y, SEO), kombináciu CSS Grid a Flexboxu, responzívny dizajn prístupom Mobile First, moderné CSS funkcie (premenné, clamp, calc), vlastné animácie (@keyframes) a organizáciu kódu podľa metodiky BEM.

🎓 Kritériá ukončenia

Samostatné úspešné nakódovanie a optimalizácia komplexnej, plne responzívnej modernej webovej stránky podľa zadania na minimálne 70 % a následné vystavenie certifikátu.

Čo sa na živom online kurze HTML a CSS pre pokročilých naučíte

Nové štandardy responzívneho kódovania a moderné UI architektúry.

Sémantika, SEO a prístupnosť (a11y)

Pokročilé HTML5 sémantické značky (article, section, nav)
Tvorba formulárov s validáciou a vlastným dizajnom
Základy prístupnosti (ARIA atribúty, podpora čítačiek)
Optimalizácia HTML pre vyhľadávače (On-page SEO)
Práca so značkami meta, viewport a favicon

Komplexné rozloženia s CSS Grid

Architektúra mriežky (Grid container, grid items)
Definícia stĺpcov a riadkov (grid-template-columns/rows)
Umiestňovanie prvkov do špecifických oblastí (grid-area)
Používanie fractional jednotiek (fr) a funkcií minmax/repeat
Kombinácia CSS Grid a Flexboxu pre dokonalé layouty

Pokročilý Flexbox a Responzivita

Pochopenie ohybnosti: flex-grow, flex-shrink, flex-basis
Tvorba responzívnych dizajnov pomocou Media Queries (@media)
Stratégia "Mobile First" vs "Desktop First"
Používanie relatívnych jednotiek (rem, em, vh, vw) namiesto px
Tvorba responzívnych obrázkov (picture a srcset)

Animácie, prechody a transformácie

Plynulé zmeny stavov pomocou CSS Transitions
Práca s hover a focus efektmi na interaktívnych prvkoch
Používanie transformácií (translate, scale, rotate) v 2D a 3D
Tvorba vlastných kľúčových snímok (@keyframes) pre animácie
Optimalizácia výkonu animácií (will-change)

Moderné CSS funkcie a premenné

Deklarácia a použitie Custom Properties (CSS premenných)
Prepínanie Dark Mode / Light Mode pomocou premenných
Dynamické výpočty v kóde pomocou funkcie calc()
Využitie logických funkcií clamp(), min(), max() pre responzivitu
Práca s CSS filtrami (blur, drop-shadow, brightness)

Architektúra kódu (BEM a preprocesory)

Organizácia rozsiahlych CSS súborov
Pochopenie metodiky BEM (Block, Element, Modifier)
Špecifickosť selektorov a prečo sa vyhnúť použitiu !important
Krátky úvod do sveta CSS preprocesorov (Sass/SCSS)
Ako fungujú CSS frameworky (Tailwind, Bootstrap) a kedy ich použiť

Kurz HTML a CSSpre pokročilých