Technológie internetu

Študijné materiály, úlohy a podklady

Vitajte na stránke predmetu Technológie internetu

Tento predmet je zameraný na základy tvorby moderných webových stránok pomocou HTML, CSS a JavaScriptu. Naučíte sa používať moderné nástroje ako VS Code, Git a AI asistentov, ktoré vám pomôžu vytvoriť profesionálne webové projekty.

Inštalácia potrebného softvéru

Pre úspešné absolvovanie predmetu potrebujete nainštalovať nasledujúce nástroje:

1. Visual Studio Code

Moderný editor kódu od Microsoftu, ktorý budeme používať na písanie HTML, CSS a JavaScriptu.

Odporúčané extensions: Live Server, Prettier, HTML CSS Support

2. Git

Nástroj na verziovanie kódu. Používa sa na ukladanie histórie zmien a zdieľanie projektov.

3. Claude AI

AI nástroj od Anthropic, ktorý vám pomôže pri tvorbe webových stránok a učení sa programovania.

Bezplatný účet je pre potreby predmetu dostačujúci.

4. Docker Desktop Voliteľné

Pokročilý nástroj pre kontajnerizáciu aplikácií. Nie je pre tento semester povinný.

Prehľad semestra

Predmet je rozdelený na 13 týždňov:

  • Týždeň 1: Informácie o predmete + Inštalácia softvéru
  • Týždne 2-8: Intenzívna výučba základov web developmentu
  • Týždne 9-11: Samostatná práca na semestrálnom projekte
  • Týždne 12-13: Finalizácia a obhajoby projektov

Detailne rozpísané témy pre každý týždeň nájdete nižšie v príslušných sekciách.

Odporúčaná literatúra a zdroje

Online dokumentácia a tutoriály
Nástroje a pomôcky

Harmonogram výučby pre jednotlivé týždne semestra

Týždeň 1 Informácie o predmete + Inštalácia softvéru

📝 Témy:

  • Informácie o predmete, podmienky absolvovania, hodnotenie
  • História internetu (od Sputniku po moderný web)
  • Inštalácia VS Code, Git, Claude AI
  • Prvé kroky s VS Code a rozšíreniami
  • Demo SSH a FTP
Úloha:

Deadline: Začiatok 2. týždňa

📚 Materiály:

Týždeň 2 HTML Základy

📝 Témy:

  • Štruktúra HTML dokumentu (doctype, head, body)
  • Sémantické tagy (header, main, section, article, footer)
  • Základné elementy (h1–h6, p, a, img, ul, ol, li)
  • Tabuľky (table, thead, tbody, tr, th, td)
  • Odkazy a navigácia – interné (#id) aj externé (target="_blank")
  • Štruktúra priečinkov webového projektu
  • Prepojenie externého CSS súboru
  • Autorské práva k obrázkom na webe

📁 Štruktúra projektu:

Každý webový projekt bude mať túto štruktúru priečinkov:

moj-projekt/
├── index.html
└── assets/
    ├── css/
    │   └── style.css
    └── images/

🤖 Prompt pre Claude AI:

Skopíruj tento prompt do Claude AI, doplň svoju tému a farebnú schému:

Vytvor mi jednoduchú webovú stránku na tému [napíš svoju tému] s primárnou farbou dizajnu [napíš hex kód alebo názov farby].

Stránka musí mať túto štruktúru priečinkov:

moj-projekt/
├── index.html
└── assets/
    ├── css/
    │   └── style.css
    └── images/

index.html musí obsahovať:
- Správnu štruktúru: <!DOCTYPE html>, <html lang="sk">, <head> s <title> a <meta charset="UTF-8">, <body>
- Prepojenie na externý CSS súbor: <link rel="stylesheet" href="assets/css/style.css">
- Sémantické tagy: <header>, <nav>, <main>, aspoň 3 sekcie <section> každá s unikátnym id, <footer>
- Navigácia <nav> s odkazmi <a href="#id"> na každú sekciu
- Nadpisy: <h1> v headeri, <h2> ako názov každej sekcie
- Aspoň 2 odseky <p>
- Obrázok: <img src="assets/images/foto.jpg" alt="popis obrázka" width="400" height="300">
- Jeden nečíslovaný zoznam <ul> s aspoň 3 položkami <li>
- Jeden číslovaný zoznam <ol> s aspoň 3 položkami <li>
- Tabuľku <table> s <thead>, <tbody>, aspoň 3 stĺpcami a 3 riadkami dát
- Aspoň jeden externý odkaz <a href="..." target="_blank">

assets/css/style.css musí obsahovať:
- Základné štýly pre body, header, nav, main, footer, table
- Primárnu farbu [hex kód] použitú konzistentne (pozadie headeru, farba odkazov, hlavička tabuľky...)
- Jednoduchý, prehľadný kód – každý selektor na novom riadku

Vypíš zvlášť obsah súboru index.html a zvlášť obsah súboru assets/css/style.css. Nič iné nepridávaj.

⌨️ Cvičenie na hodine – úpravy v HTML:

Keď máš vygenerovanú stránku, otvor index.html vo VS Code a vykonaj tieto úpravy. Ku každej zmene si ulož súbor a skontroluj výsledok v prehliadači.

Jednoduché – nájdi a zmeň hodnotu
  1. Zmeň <title> stránky na iný názov – sleduj čo sa zmení v záložke prehliadača
  2. Zmeň text v <h1> v headeri
  3. Zmeň alt atribút obrázka na výstižnejší popis
  4. Zmeň jeden externý odkaz – nahraď URL inou webovou stránkou
  5. Pridaj atribút target="_blank" k odkazu ktorý ho ešte nemá
Stredné – pridaj alebo odober prvok
  1. Zmeň <ol> (číslovaný zoznam) na <ul> (nečíslovaný) – sleduj čo sa stane
  2. Pridaj novú položku <li> do existujúceho zoznamu
  3. Pridaj nový riadok <tr> s dátami do tabuľky
  4. Skontroluj či má <html> atribút lang="sk" – ak nie, pridaj ho
  5. Zmeň <h2> v jednej sekcii na <h3> – čo sa vizuálne zmení?
Náročnejšie – pochop štruktúru
  1. Pridaj novú <section> s unikátnym id, nadpisom <h2> a jedným odsekom <p>
  2. Pridaj odkaz do <nav> ktorý smeruje na tvoju novú sekciu cez #id
  3. Zakomentuj riadok <link rel="stylesheet"> v <head> – pozri čo sa stane, potom odkomentuj: 
    <!-- <link rel="stylesheet" href="assets/css/style.css"> -->
  4. Nájdi <footer> a zmeň meno autora alebo rok
  5. Nájdi v kóde <meta charset="UTF-8"> – skús ho zakomentovať, ulož a obnov stránku – čo sa stalo so slovenčinou? Potom vráť späť.
Úloha 16 – obrázok
  1. Nájdi si voľne použiteľný obrázok na Unsplash alebo Pexels, alebo si nechaj obrázok vygenerovať v Claude AI. Ulož ho do priečinka assets/images/ a správne ho nastav v HTML: 
     <img src="assets/images/foto.jpg" alt="popis obrázka" width="400" height="300">
    Obrázok musí byť viditeľný v prehliadači.
Odovzdanie úlohy č. 1 (3 body):

Nahrajte súbor index.html vašej webovej stránky do MS Teams.

Súbor musí obsahovať všetky prvky preberané na hodine:

  • Sémantické tagy (header, nav, main, section, footer)
  • Navigáciu s odkazmi na sekcie cez #id
  • Nadpisy, odseky, obrázok s atribútmi width a height
  • Nečíslovaný aj číslovaný zoznam
  • Tabuľku s hlavičkou a aspoň 3 riadkami dát
  • Externý odkaz s target="_blank"
  • Prepojenie na externý CSS súbor

Deadline: Začiatok 3. týždňa

📚 Materiály:

Týždeň 3 CSS princípy + Bootstrap 5

📝 Témy:

  • Opakovanie — validácia HTML z minulého týždňa
  • CSS — ako sa zapisuje, selektory, špecificita
  • Box model — margin, padding, border
  • Formátovanie textu, farieb, zoznamov a tabuliek v CSS
  • Bootstrap 5 — čo to je, prečo ho používame, CDN
  • Kontajnery — .container vs .container-fluid
  • Grid systém — riadky, stĺpce, breakpointy
  • Predvolené farby a farby písma v Bootstrape
  • Navigácia z Bootstrap dokumentácie

🔁 Opakovanie — validácia HTML

Minulý týždeň sme nestihli validáciu. Skôr než ideme ďalej — over si HTML kód z týždňa 2:

🎨 1. CSS — ako funguje

CSS (Cascading Style Sheets) hovorí prehliadaču ako má HTML vyzerať. Každé pravidlo má tri časti: selektor (čo štylujeme), vlastnosť (čo meníme) a hodnotu (na čo to meníme). 

selektor {
    vlastnosť: hodnota;
    vlastnosť: hodnota;
}

/* Príklady: */
h1 {
    color: #2c3e50;        /* farba textu */
    font-size: 2rem;       /* veľkosť písma */
}

p {
    margin-bottom: 1rem;   /* vonkajší okraj dole */
    line-height: 1.6;      /* výška riadku */
}

table {
    width: 100%;           /* šírka tabuľky */
    border-collapse: collapse; /* zlúčenie ohraničení buniek */
}

ul {
    list-style-type: disc; /* typ odrážky: disc, circle, square, none */
    padding-left: 1.5rem;  /* odsadenie zoznamu */
}

Selektory — čo štylujeme

/* Element selektor — štyluje VŠETKY h2 na stránke */
h2 { color: navy; }

/* Triedny selektor — štyluje všetko s class="moja-trieda" */
.moja-trieda { background-color: #f0f0f0; }

/* ID selektor — štyluje JEDEN prvok s id="hlavicka" */
#hlavicka { font-size: 2rem; }

/* Kombinácia — odseky VNÚTRI sekcie */
section p { color: #555; }

📦 Box model — margin, padding, border

Každý HTML element je obdĺžnik. Box model popisuje jeho vrstvy zvnútra von:

┌─────────────────────────────────────┐
│              MARGIN                 │  ← vonkajší okraj — odsadenie od okolia
│  ┌───────────────────────────────┐  │
│  │           BORDER              │  │  ← ohraničenie (čiara okolo)
│  │  ┌─────────────────────────┐  │  │
│  │  │        PADDING          │  │  │  ← vnútorný okraj — odsadenie obsahu
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     OBSAH         │  │  │  │  ← text, obrázok...
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘
div {
    margin: 20px;           /* vonkajší okraj zo všetkých strán */
    margin-top: 10px;       /* len zhora */
    margin: 10px 20px;      /* hore+dole  |  vľavo+vpravo */
    margin: 10px 20px 15px 5px; /* hore | vpravo | dole | vľavo (po hodinách) */

    padding: 15px;          /* vnútorný okraj — rovnaká logika ako margin */

    border: 1px solid #ccc; /* hrúbka | štýl | farba */
    border-radius: 8px;     /* zaoblenie rohov */
}

⚡ 2. Bootstrap 5 — čo to je a prečo ho používame

Bootstrap je CSS framework — hotová knižnica tried a komponentov ktorú vložíme do stránky a okamžite máme k dispozícii profesionálny dizajn, responzívny grid systém a hotové komponenty (navigácia, tlačidlá, karty, alerty...).

Namiesto písania CSS od nuly — použijeme hotové triedy priamo v HTML. Vlastné CSS píšeme len na doladenie toho čo Bootstrap nedokáže.

Ako pridať Bootstrap — CDN

CDN (Content Delivery Network) — načítame Bootstrap zo servera, nemusíme nič sťahovať. Pridáme dva riadky do <head> a jeden pred </body>: 

<!-- CSS Bootstrapu — do <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet">

<!-- Ikony Bootstrap Icons — do <head> (voliteľné) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
      rel="stylesheet">

<!-- JS Bootstrapu — tesne pred </body> (potrebné pre dropdown, modal...) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

📐 Kontajnery — container vs container-fluid

Kontajner je základ každého Bootstrap layoutu — obaluje obsah a centruje ho:

<!-- .container — pevná maximálna šírka, obsah je vycentrovaný -->
<!-- Na veľkých monitoroch má obsah biely okraj z oboch strán   -->
<div class="container">
    Obsah je max. 1320px široký, vycentrovaný.
</div>

<!-- .container-fluid — plná šírka obrazovky, bez okrajov -->
<!-- Vhodné pre navigácie, bannery, hero sekcie             -->
<div class="container-fluid">
    Obsah siaha od kraja po kraj obrazovky.
</div>

🔲 Grid systém — riadky a stĺpce

Bootstrap delí každý riadok na 12 stĺpcov. Ty určíš koľko stĺpcov zaberie každý blok. Základná štruktúra: container → row → col 

<div class="container">
    <div class="row">

        <!-- Tri rovnaké stĺpce: 4+4+4 = 12 -->
        <div class="col-4">Stĺpec 1</div>
        <div class="col-4">Stĺpec 2</div>
        <div class="col-4">Stĺpec 3</div>

    </div>
    <div class="row">

        <!-- Dva nestihli stĺpce: 8+4 = 12 -->
        <div class="col-8">Hlavný obsah</div>
        <div class="col-4">Bočný panel</div>

    </div>
</div>

Breakpointy — responzívne stĺpce

Pomocou breakpointov určíme ako sa stĺpce správajú na rôznych veľkostiach obrazovky. Na mobile sa stĺpce automaticky zosypú pod seba — na väčšej obrazovke sa zobrazia vedľa seba. 

col-        → platí pre VŠETKY veľkosti (vrátane mobilu)
col-sm-     → od 576px  (veľký mobil, malý tablet)
col-md-     → od 768px  (tablet)
col-lg-     → od 992px  (laptop)
col-xl-     → od 1200px (veľký monitor)

<!-- Príklad: na mobile pod sebou, na tablete 2 stĺpce, na laptope 3 -->
<div class="row">
    <div class="col-12 col-md-6 col-lg-4">Karta 1</div>
    <div class="col-12 col-md-6 col-lg-4">Karta 2</div>
    <div class="col-12 col-md-6 col-lg-4">Karta 3</div>
</div>

🎨 Predvolené farby Bootstrapu

Bootstrap má 8 pomenovaných farieb — používajú sa ako prípony tried:

primary    → modrá   — hlavná akcentová farba
secondary  → šedá    — vedľajšia, menej dôležitá
success    → zelená  — úspech, potvrdenie
danger     → červená — chyba, nebezpečenstvo
warning    → žltá    — varovanie, pozor
info       → tyrkys  — informácia
light      → svetlá  — jemné pozadie
dark       → tmavá   — tmavy text alebo pozadie

Farby pozadia a písma v kontajneroch

<!-- Farba pozadia: bg-{farba} -->
<div class="bg-primary">Modrý kontajner</div>
<div class="bg-success">Zelený kontajner</div>
<div class="bg-warning">Žltý kontajner</div>

<!-- Farba písma: text-{farba} -->
<div class="bg-dark text-white">Tmavý kontajner, biele písmo</div>
<div class="bg-warning text-dark">Žltý kontajner, tmavé písmo</div>
<div class="bg-primary text-white">Modrý kontajner, biele písmo</div>

<!-- Priehľadnosť: bg-opacity-{hodnota} —  25, 50, 75 -->
<div class="bg-primary bg-opacity-25">Svetlomodrý (25% opacity)</div>

<!-- Kombinácia s paddingom a okrajmi -->
<div class="bg-light border border-primary p-3 mb-2">
    Svetlé pozadie, modrý okraj, padding 3, margin-bottom 2
</div>

↔️ Spacing — margin a padding cez Bootstrap triedy

Bootstrap má skratky pre margin a padding — nemusíme písať CSS, stačí trieda priamo v HTML: 

m-{n}   → margin zo všetkých strán    (n = 0 až 5, alebo auto)
mt-{n}  → margin-top                   (t = top)
mb-{n}  → margin-bottom                (b = bottom)
ms-{n}  → margin-left  (start)         (s = start)
me-{n}  → margin-right (end)           (e = end)
mx-{n}  → margin vľavo aj vpravo       (x = horizontálne)
my-{n}  → margin hore aj dole          (y = vertikálne)

p-{n}, pt-{n}, pb-{n}...  → rovnaká logika pre padding

<div class="mt-3 mb-2 px-4">
    margin-top: 3 jednotky, margin-bottom: 2, padding vľavo aj vpravo: 4
</div>

🧭 Navigácia z Bootstrap dokumentácie

Bootstrap má hotovú responzívnu navigáciu — Navbar. Nebudeme ju písať od nuly — skopírujeme ju z dokumentácie a upravíme. Pozrite si ju na: 

<!-- Základná Bootstrap navigácia -->
<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Môj web</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#sekcia1">Sekcia 1</a></li>
                <li class="nav-item"><a class="nav-link" href="#sekcia2">Sekcia 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#sekcia3">Sekcia 3</a></li>
            </ul>
        </div>
    </div>
</nav>

📚 Bootstrap 5 — pojmy a dokumentácia

🤖 Prompt pre Claude AI — Bootstrap verzia stránky

Skopíruj tento prompt do Claude AI. AI naformátuje tvoju existujúcu stránku z týždňa 2 pomocou Bootstrap 5. Obsah ostane rovnaký — zmení sa len vizuálna štruktúra. 

Mám hotovú HTML stránku z predchádzajúcej úlohy. Chcem ju naformátovať pomocou Bootstrap 5 a CSS.

Požiadavky:

1. Pridaj Bootstrap 5 cez CDN do <head>:
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   A pred </body>:
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2. Obsah stránky NEMEŇ — len ho obal do Bootstrap štruktúry.

3. Použi Bootstrap triedy:
   - .container pre hlavný obsah
   - .container-fluid pre navigáciu a pätu
   - .row a .col-* pre rozdelenie obsahu do stĺpcov (napr. col-12 col-md-6 col-lg-4)
   - bg-* a text-* pre farby sekcií
   - p-*, m-* pre odsadenie
   - .table .table-striped .table-hover pre tabuľku
   - .list-group pre zoznamy

4. Navigácia musí byť Bootstrap Navbar (.navbar .navbar-expand-lg) s odkazmi na sekcie cez #id.

5. Súbor assets/css/style.css PONECHAJ — Bootstrap je priorita, CSS slúži len na doladenie.
   Do style.css pridaj vlastnú farebnú schému pre header a footer (nie Bootstrap farby).

6. Vypíš zvlášť obsah index.html a zvlášť obsah assets/css/style.css. Nič iné nepridávaj.

⌨️ Cvičenie na hodine — Bootstrap triedy

Keď máš vygenerovanú Bootstrap stránku, vykonaj tieto úpravy priamo v kóde. Po každej zmene ulož a skontroluj výsledok v prehliadači.

Jednoduché — triedy farieb a spacing
  1. Nájdi <nav> a zmeň bg-primary na bg-dark — sleduj čo sa stalo
  2. Nájdi sekciu a pridaj jej triedu bg-light a p-4 — čo sa zmenilo?
  3. Zmeň bg-light na bg-warning — potom pridaj text-dark
  4. Nájdi .container a zmeň ho na .container-fluid — čo sa stalo so šírkou?
  5. Pridaj triedy mt-3 mb-3 k jednému odstavcu <p> — sleduj odsadenie
Stredné — grid stĺpce
  1. Nájdi .row so stĺpcami col-md-6 — zmeň na col-md-4 — čo sa stalo?
  2. Pridaj k stĺpcom triedu col-12 — zmenši okno prehliadača — sleduj ako sa stĺpce zosypú pod seba
  3. Nájdi tabuľku a pridaj triedy table table-striped table-hover na <table>
  4. Pridaj k tabuľke obal <div class="table-responsive"> — zmenši okno prehliadača
  5. Zmeň farbu jedného stĺpca — pridaj mu bg-primary bg-opacity-25
Náročnejšie — rozloženie stránky
  1. Pridaj novú sekciu s Bootstrap kartami — skopíruj štruktúru: 
    <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">Názov</h5>
                <p class="card-text">Popis.</p>
            </div>
        </div>
    </div>
</div>
  2. Pridaj do navigácie nový odkaz na túto sekciu cez #id
  3. V súbore style.css zmeň farbu pozadia footer na vlastnú farbu (nie Bootstrap triedu) — sleduj špecificitu
  4. Pridaj k jednému col triedu border border-primary rounded p-3
  5. Zakomentuj CDN link na Bootstrap v <head> — pozri čo sa stane, potom vráť
Odovzdanie úlohy č. 2 (3 body):

Nahrajte do MS Teams dva súbory:

  • index.html — stránka z týždňa 2 naformátovaná Bootstrapom. Musí obsahovať:
    • Bootstrap 5 CDN v <head>
    • Bootstrap Navbar s odkazmi na sekcie
    • .container pre obsah, .container-fluid pre nav/footer
    • Grid rozloženie — aspoň jedna .row s viacerými .col-*
    • Bootstrap farby — aspoň 2 sekcie s bg-* triedou
    • Bootstrap tabuľka — .table .table-striped
  • assets/css/style.css — vlastné CSS ktoré dopĺňa Bootstrap. Musí obsahovať aspoň 3 vlastné pravidlá (nie Bootstrap triedy).

Deadline: Začiatok 4. týždňa

📚 Všetky materiály k tejto hodine:

Týždeň 4 Responzívny dizajn

📝 Témy:

  • DevTools — ako testovať mobilnú verziu na PC
  • Mobile-first prístup
  • Media queries — vlastná responzívnosť v CSS
  • Flexbox — moderné zarovnávanie prvkov
  • Bootstrap responzívne utility

🔧 1. DevTools — testujeme mobilnú verziu na PC

Telefón na testovanie nepotrebujeme — každý prehliadač má vstavaný nástroj ktorý simuluje rôzne zariadenia priamo na PC. 

1. Otvor stránku v prehliadači Chrome alebo Edge
2. Stlač Ctrl + Shift + I  (alebo F12 — na niektorých notebookoch Fn + F12)
3. Klikni na ikonku  🖥️📱  vľavo hore v DevTools — vyzerá ako tablet s telefónom
4. V rozbaľovacom zozname vyber zariadenie:
   → iPhone SE, iPhone 14, Samsung Galaxy, iPad...
5. Obnov stránku — F5

📱 2. Mobile-first — prečo začíname od mobilu

Mobile-first znamená že CSS píšeme najprv pre najmenšiu obrazovku a potom pridávame pravidlá pre väčšie. Je to opak toho čo sme doteraz robili. 

Tradičný prístup (desktop-first):
  Napíšem CSS pre veľký monitor → potom zmenšujem pre tablet → potom pre mobil
  Problém: na mobile to vyzerá ako zmenšená desktopová stránka

Mobile-first prístup:
  Napíšem CSS pre mobil → potom rozširujem pre tablet → potom pre monitor
  Výsledok: na každom zariadení stránka vyzerá prirodzene
/* Mobile-first — základ platí pre mobil */
.container {
    padding: 10px;      /* na mobile — malý padding */
    font-size: 14px;
}

/* Tablet a väčšie — rozšírime */
@media (min-width: 768px) {
    .container {
        padding: 20px;  /* na tablete — väčší padding */
        font-size: 16px;
    }
}

/* Monitor — ešte väčšie */
@media (min-width: 992px) {
    .container {
        padding: 40px;
        font-size: 18px;
    }
}

📐 3. Media queries — vlastná responzívnosť v CSS

Media query je podmienka v CSS — hovorí „toto pravidlo platí len ak je obrazovka širšia/užšia ako X pixelov". 

/* Všeobecný zápis */
@media (podmienka) {
    /* CSS pravidlá ktoré platia len keď je podmienka splnená */
}

/* Príklady podmienok: */
@media (max-width: 576px)  { /* len pre mobil — užšie ako 576px */ }
@media (min-width: 768px)  { /* tablet a väčšie — širšie ako 768px */ }
@media (min-width: 992px)  { /* laptop a väčšie */ }
@media (min-width: 1200px) { /* veľký monitor */ }

Breakpointy — rovnaké ako Bootstrap

xs   →          0px  — mobil (žiadny prefix v Bootstrap)
sm   →        576px  — veľký mobil          col-sm-*
md   →        768px  — tablet               col-md-*
lg   →        992px  — laptop               col-lg-*
xl   →       1200px  — veľký monitor        col-xl-*
xxl →        1400px  — extra veľký          col-xxl-*

Príklad — navigácia na mobile vs desktop

/* Navigácia — na mobile pod sebou, na desktope vedľa seba */

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Mobil — každá položka zaberá celý riadok */
nav ul li {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

/* Tablet a väčšie — položky vedľa seba */
@media (min-width: 768px) {
    nav ul li {
        display: inline-block;
        border-bottom: none;
        padding: 10px 20px;
    }
}

/* Nadpis — na mobile centrovane, na desktope vľavo */
h1 {
    text-align: center;    /* mobil */
}

@media (min-width: 768px) {
    h1 {
        text-align: left;  /* desktop */
    }
}

📦 4. Flexbox — moderné zarovnávanie prvkov

Flexbox je CSS nástroj na zarovnávanie a rozmiestnenie prvkov v jednom smere — v riadku alebo v stĺpci. Bootstrap grid ho používa interne — keď píšeš .row a .col, v pozadí pracuje Flexbox. 

/* Aktivujeme Flexbox na rodičovskom prvku */
.rodic {
    display: flex;
}

/* Smer — riadok (default) alebo stĺpec */
flex-direction: row;      /* deti vedľa seba → (default) */
flex-direction: column;   /* deti pod sebou ↓ */

/* Zarovnanie po hlavnej osi (horizontálne ak row) */
justify-content: flex-start;    /* zarovnať vľavo (default) */
justify-content: flex-end;      /* zarovnať vpravo */
justify-content: center;        /* vycentrovať */
justify-content: space-between; /* rovnomerne — prvý vľavo, posledný vpravo */
justify-content: space-around;  /* rovnomerne — s okrajmi */

/* Zarovnanie po vedľajšej osi (vertikálne ak row) */
align-items: flex-start;  /* zarovnať hore */
align-items: flex-end;    /* zarovnať dole */
align-items: center;      /* vertikálne vycentrovať */
align-items: stretch;     /* natiahnuť na výšku rodiča (default) */

/* Zalamovanie — ak sa deti nezmestia na jeden riadok */
flex-wrap: nowrap;  /* nezalamuj (default) */
flex-wrap: wrap;    /* zalomí na ďalší riadok */

Príklad — karty vedľa seba s Flexboxom

.karty {
    display: flex;
    flex-wrap: wrap;           /* zalomí na mobile */
    gap: 20px;                 /* medzera medzi kartami */
    justify-content: center;
}

.karta {
    flex: 1 1 250px;
    /* flex-grow: 1    → môže rásť */
    /* flex-shrink: 1  → môže sa zmenšiť */
    /* flex-basis: 250px → minimálna šírka 250px */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Výsledok:
   Mobil  → karty pod sebou (250px sa nezmestia vedľa seba)
   Tablet → 2 karty vedľa seba
   Monitor→ 3 a viac kariet vedľa seba
   Bez jedinej media query! */

Praktické použitie Flexboxu

/* Vycentrovať prvok horizontálne aj vertikálne */
.centrovany {
    display: flex;
    justify-content: center;  /* horizontálne */
    align-items: center;      /* vertikálne */
    height: 200px;
}

/* Navigácia s logom vľavo a odkazmi vpravo */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

/* Footer — tri stĺpce rovnomerne */
footer {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

🔲 CSS Grid — informačne

CSS Grid je nástroj na rozmiestnenie prvkov v dvoch smeroch naraz — v riadkoch aj stĺpcoch. Bootstrap grid je inšpirovaný CSS Gridom ale píše sa inak. V našom predmete budeme používať Bootstrap grid — CSS Grid len spomíname aby ste vedeli že existuje.

⚡ 5. Bootstrap responzívne utility

Bootstrap má hotové triedy na skrývanie, zobrazovanie a zarovnávanie prvkov podľa veľkosti obrazovky — bez písania CSS.

Skrývanie a zobrazovanie — d-* triedy

/* d-none = display:none (skryť) */
/* d-{breakpoint}-{hodnota} = platí od daného breakpointu */

<!-- Skryť na mobile, zobraziť od tabletu -->
<div class="d-none d-md-block">Len na tablete a väčšom</div>

<!-- Zobraziť len na mobile, skryť od tabletu -->
<div class="d-block d-md-none">Len na mobile</div>

<!-- Skryť na mobile aj tablete, zobraziť od laptopu -->
<div class="d-none d-lg-block">Len na laptope a väčšom</div>

Poradie stĺpcov na mobile — order-* triedy

<!-- Na desktope: obsah vľavo, obrázok vpravo
     Na mobile:   obrázok hore, obsah dole -->
<div class="row">
    <div class="col-12 col-md-8 order-2 order-md-1">
        Hlavný obsah — na desktope prvý, na mobile druhý
    </div>
    <div class="col-12 col-md-4 order-1 order-md-2">
        Obrázok — na desktope druhý, na mobile prvý
    </div>
</div>

Zarovnanie textu podľa veľkosti

<!-- Na mobile centrovane, od tabletu vľavo -->
<p class="text-center text-md-start">Tento text...</p>

<!-- Na mobile vľavo, od laptopa vpravo -->
<p class="text-start text-lg-end">Tento text...</p>

Flexbox utility v Bootstrape

<!-- Aktivovať flexbox -->
<div class="d-flex">...</div>
<div class="d-md-flex">...</div>  <!-- flex len od tabletu -->

<!-- justify-content -->
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-center">...</div>

<!-- align-items -->
<div class="d-flex align-items-center">...</div>

<!-- flex-wrap -->
<div class="d-flex flex-wrap">...</div>

🤖 Prompt pre Claude AI — nová responzívna stránka

Skopíruj tento prompt do Claude AI. Vytvoríš novú jednoduchú stránku kde si vyskúšaš responzívny dizajn — existujúcu stránku z predchádzajúcich týždňov nechaj tak. 

Vytvor mi jednoduchú HTML stránku na tému "O mne" (alebo ľubovoľnú tému podľa môjho záujmu).

Požiadavky:

1. Súbory:
   - index-responsive.html  (hlavná stránka)
   - assets/css/responsive.css  (vlastné CSS)
   Bootstrap 5 pridaj cez CDN.

2. Štruktúra stránky:
   - Bootstrap Navbar s 3 odkazmi na sekcie (#o-mne, #zaujmy, #kontakt)
   - Sekcia #o-mne: krátky text a fotka (môže byť placeholder obrázok)
   - Sekcia #zaujmy: 3 karty vedľa seba — každá s názvom záujmu a krátkym popisom
   - Sekcia #kontakt: jednoduchý text s kontaktnými údajmi (vymyslené)
   - Footer s menom a rokom

3. Bootstrap grid — mobile-first:
   - Karty musia byť: col-12 col-md-6 col-lg-4
     (na mobile pod sebou, na tablete 2 vedľa seba, na laptope 3 vedľa seba)

4. Bootstrap responzívne utility:
   - Pridaj jeden prvok viditeľný len na desktope: class="d-none d-md-block"
     (napr. dekoratívny text alebo extra info)
   - Pridaj jeden prvok viditeľný len na mobile: class="d-block d-md-none"
     (napr. skrátený text alebo upozornenie)

5. Do assets/css/responsive.css pridaj:
   - Vlastnú farebnú schému pre navbar a footer (nie Bootstrap farby)
   - Mobile-first media queries:
       základné CSS pre mobil (bez @media)
       @media (min-width: 768px) pre tablet — zväčši písmo, uprav padding
       @media (min-width: 992px) pre laptop — ďalšie úpravy
   - Footer pomocou Flexboxu:
       na mobile prvky pod sebou (flex-direction: column)
       od tabletu vedľa seba (flex-direction: row, justify-content: space-between)

6. Vypíš zvlášť obsah index-responsive.html a zvlášť obsah assets/css/responsive.css.

⌨️ Cvičenie na hodine — otestuj svoju stránku

Keď máš vygenerovanú stránku, otestuj ju v DevTools. Otvor stránku v prehliadači, stlač Ctrl + Shift + I a klikni na ikonku telefónu vľavo hore v DevTools. Po každej zmene ulož súbor a obnov stránku cez Ctrl + Shift + R.

Jednoduché — testujeme v DevTools
  1. Prepni na iPhone SE — sú karty pod sebou? Ak nie — skontroluj či majú col-12
  2. Prepni na iPad — sú karty 2 vedľa seba? Skontroluj col-md-6
  3. Prepni na laptop (šírka 1200px) — sú karty 3 vedľa seba? Skontroluj col-lg-4
  4. Nájdi prvok s d-none d-md-block — zmizol na mobile?
  5. Nájdi prvok s d-block d-md-none — zobrazil sa len na mobile?
Stredné — upravujeme CSS
  1. Otvor assets/css/responsive.css — nájdi media query pre tablet a zmeň farbu pozadia body — sleduj v DevTools
  2. Nájdi footer v CSS — zmeň flex-direction na mobile z column na row — čo sa stalo? Vráť späť
  3. Zmenši okno prehliadača ručne myšou — sleduj v akom momente sa karty preskupia
  4. Prepni DevTools do režimu otočeného telefónu (ikonka otočenia) — sleduj rozdiel
  5. Otestuj stránku na 3 rôznych zariadeniach v DevTools a oprav čo nefunguje
Náročnejšie — vlastné úpravy
  1. Pridaj štvrtú kartu — čo sa stalo s rozložením? Prečo?
  2. Zmeň footer na Flexbox s ikonkami — uprav CSS: 
    footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
  3. Pridaj do CSS vlastnú media query — na mobile skry navbar text a nechaj len ikony
  4. Vyskúšaj Flexbox Froggy — prvých 10 úrovní
  5. Porovnaj svoju stránku na mobile a desktope — čo by si zmenil/a aby vyzerala lepšie?
Odovzdanie úlohy č. 3 (3 body):

Nahrajte do MS Teams dva súbory:

  • index-responsive.html — nová stránka. Musí obsahovať:
    • Bootstrap 5 CDN
    • Bootstrap Navbar s odkazmi na sekcie
    • 1 riadok (.row) s 3 stĺpcami (.col-12 .col-md-6 .col-lg-4) — každý stĺpec obsahuje jednu kartu (.card)
    • aspoň jeden prvok skrytý na mobile (d-none d-md-block)
    • aspoň jeden prvok zobrazený len na mobile (d-block d-md-none)
  • assets/css/responsive.css — musí obsahovať:
    • aspoň dve @media pravidlá podľa mobile-first prístupu
    • Flexbox na footeri
    • vlastnú farebnú schému (nie len Bootstrap farby)

Deadline: Začiatok 5. týždňa

📚 Všetky materiály k tejto hodine:

Týždeň 5 Formuláre

📝 Témy:

  • Input typy (text, email, number, date, password, tel...)
  • Textarea, select, checkbox, radio button
  • HTML5 validácia – atribúty required, pattern, min, max, minlength
  • CSS štýlovanie stavov formulára – :valid, :invalid, :focus
  • Vizuálna spätná väzba používateľovi (zelená/červená pri vypĺňaní)
Úloha (3 body):

Vytvoriť kontaktný formulár s HTML/CSS validáciou obsahujúci:

  • Povinné polia s atribútom required
  • Validáciu emailu a telefónneho čísla
  • CSS štýlovanie platných a neplatných polí (:valid / :invalid)
  • Vizuálnu spätnú väzbu (farba, ikona)

Deadline: Začiatok 6. týždňa

📚 Materiály:

Týždeň 6 JavaScript Light + Test 1

📝 Témy:

  • Čo dokáže JavaScript?
  • Interaktívne prvky s pomocou Claude AI
  • DOM manipulácia (základy)
  • Validácia formulára
Úloha (3 body):

Pridať 2-3 interaktívne prvky na stránku (s pomocou Claude)

Deadline: Začiatok 7. týždňa

Týždeň 7 Pokročilé CSS a Bootstrap

📝 Témy:

  • Pokročilé layouty
  • Bootstrap komponenty (modály, karty, carousel)
  • Utility triedy
  • Animácie a efekty
Úloha (3 body):

Vylepšiť dizajn stránky pomocou Bootstrap komponentov

Deadline: Začiatok 8. týždňa

Týždeň 8 Git/GitHub + Návrh projektu

📝 Témy:

  • Základy Git (commit, push, pull, branch)
  • GitHub a GitHub Pages
  • Deployment webových stránok
  • Prezentácia návrhov semestrálnych projektov
Návrh projektu (3 body):

Odovzdať návrh semestrálneho projektu obsahujúci:

  • Wireframe/hrubý dizajn stránky
  • Popis funkcionalít a stránok
  • Zoznam plánovaných technológií

Deadline: Koniec 8. týždňa

📚 Materiály:

Týždeň 9 Práca na projekte + Test 2

Samostatná práca na semestrálnom projekte s individuálnymi konzultáciami.

Týždne 10–11 Práca na projekte

Pokračovanie práce na projekte. Doladenie dizajnu a funkcionalít.

Týždne 12–13 Finalizácia + Odovzdávanie + Obhajoby

Záverečné týždne sú venované dokončeniu projektov, ich odovzdaniu a obhajobám.

Odovzdanie projektu (20 bodov):
  • Funkčná webová stránka nahraná na GitHub
  • Zverejnená cez GitHub Pages
  • Kto je hotový – odovzdá v 12. týždni, kto nie – najneskôr do začiatku obhajoby

Deadline: Najneskôr do začiatku obhajoby v 13. týždni

Obhajoba + Live Coding (36 bodov):
  • 13 bodov: Vysvetlenie vlastného kódu
  • 13 bodov: Live Coding – operatívna zmena zadaná vyučujúcou (5–10 min)
  • 10 bodov: Správne používanie terminológie