Hero background image

Architektúra Moderného Webu

Vitajte v pokročilom sprievodcovi pre tvorbu webovej stránky. Na konci tohto intezívneho kurzu sa naučíte písať kód, ktorý je škálovateľný, prístupný a sémanticky správny.

Keďže HTML5 nám umožňuje využívať sémantické značky, obmedzíme počet <div> prvkov na minimum. Týmto dosiahneme lepšiu štruktúru stránky, ktorá bude prehľadnejšia pre prehliadače aj vyhľadávacie roboty.

Cieľová architektúra: Bento Grid Layout (Modulárna mriežka), sémantické rozdelenie obsahu a čistá separácia štruktúry od štýlu.

1. Sémantické prvky HTML5

Pri tvorbe webových stránok sa HTML prvky používajú na základe ich sémantického významu. Nasleduje prehľad základných sémantických značiek využitých v projekte, doplnený o odkazy na relevantnú dokumentáciu.

📚 Prehľad sémantických prvkov HTML5 (W3Schools)

<header> DOCS

Horná časť dokumentu alebo sekcie. Obsahuje napríklad logo, navigáciu alebo úvodné informácie k obsahu.

<nav> DOCS

Priestor vyhradený pre hlavné navigačné prvky webu. Slúži na organizáciu kľúčových odkazov.

<section> DOCS

Tematicky ucelená časť obsahu. Používa sa tam, kde možno jednoznačne určiť nadpis alebo tému.

<article> DOCS

Samostatný a nezávislý obsah, ktorý možno distribuovať aj mimo kontext stránky. Vhodné pre blogové príspevky, projektové karty alebo novinky.

<aside> DOCS

Obsah dopĺňajúci hlavnú časť stránky. Typicky bočné panely, odkazy alebo doplnkové informácie.

<figure> DOCS

Kontajner pre vizuálne alebo samostatne stojace prvky ako obrázky, grafy, diagramy alebo kódové ukážky.

<footer> DOCS

Záverečná časť dokumentu alebo sekcie. Obsahuje napríklad kontaktné údaje, copyright alebo doplnkové linky.

<mark> DOCS

Zvýraznenie textu na účely upozornenia alebo referencie, podobne ako pri použití zvýrazňovača.

2. Implementácia Architektúry

Rozoberme si kód portfólia na logické bloky. Všimnite si, ako hierarchia elementov kopíruje vizuálny dizajn.

A. Hlavička a Globálna Navigácia

Využívame element <header> na ukotvenie loga a navigácie. Tlačidlo "Stiahnuť CV" je štylované pomocou CSS triedy .glass-button, ale sémanticky ostáva tlačidlom.

<header>
    <h1 class="logo">Moje Portfólio</h1>
    <nav>
        <ul>
            <li><a href="#hero">Domov</a></li>
            <li><a href="#projects">Projekty</a></li>
            <li><a href="#contact">Kontakt</a></li>
            <li><button class="glass-button"> Stiahnuť CV</button></li>
        </ul>
    </nav>
</header>

B. Hero Sekcia (Bento Grid Start)

Tu začína naša .bento-grid štruktúra. Všimnite si pokročilé vnorenie: vo vnútri <section id="hero"> máme ďalší <header>. To je validné – tento vnútorný header patrí špecificky pre Hero sekciu, nie pre celú stránku.

Obrázok je zabalený v <aside>, čo naznačuje, že ide o doplnkový vizuálny obsah.

<section class="bento-grid">
    <section id="hero">
        <header>
            <h1>Volám sa Samuel Rubár, som Full-stack developer žijúci na Slovensku</h1>
            <p>Špecializujem sa na vytváranie jedinečných vizuálnych identít pre digitálne produkty a tvorbu jedinečných ilustrácií a motion dizajnu.</p>
        </header>
        <aside class="social-links">
            <a href="#" aria-label="Instagram">Instagram</a>
            <a href="#" aria-label="LinkedIn">LinkedIn</a>
            <a href="#" aria-label="Twitter">Twitter</a>
        </aside>
    </section>

    <aside id="hero-image">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=800&fit=crop" alt="Krajina s cestou">
    </aside>
</section>

C. Projekty ako Články (Articles)

Každá karta služby/projektu je zabalená v tagu <article>. Prečo? Pretože každá karta dáva zmysel sama o sebe – "Ponúkam Motion Design". Vnútri využívame <span> pre ikony a <h3> pre hierarchiu nadpisov.

<section class="bento-grid" id="projects">
    <article>
        <header>
            <span class="project-icon">✨</span>
            <h3>Motion design</h3>
        </header>
        <p>Vytváranie plynulých animácií a pohyblivých grafík, ktoré oživia váš digitálny obsah a zaujmú vašu cieľovú skupinu.</p>
    </article>

    <article>
        <header>
            <span class="project-icon">🎨</span>
            <h3>Ilustrácia</h3>
        </header>
        <p>Originálne digitálne ilustrácie na mieru, ktoré dodajú vášmu projektu jedinečný vizuálny štýl a osobitosť.</p>
    </article>

    <article>
        <header>
            <span class="project-icon">⚡</span>
            <h3>Identita</h3>
        </header>
        <p>Komplexný branding a vizuálna identita, ktorá vašu značku odlíši od konkurencie a zapamätá sa vašim zákazníkom.</p>
    </article>
</section>

D. Sekcia Zručností (Skills Grid)

Pre zoznam zručností sme vytvorili vnorenú mriežku. Opäť používame <article> na kategorizáciu zručností (Frontend, Dizajn, Nástroje). Zoznamy <ul> a <li> sú tu kľúčové pre prístupnosť.

<section id="skills">
    <h2>Moje Zručnosti</h2>
    <aside class="skills-grid">
        <article class="skill-category">
            <h3>Frontend</h3>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>Responzívny Dizajn</li>
                <li>Webová Prístupnosť</li>
            </ul>
        </article>

        <article class="skill-category">
            <h3>Dizajn</h3>
            <ul>
                <li>UI/UX Dizajn</li>
                <li>Teória Farieb</li>
                <li>Typografia</li>
                <li>Wireframing</li>
            </ul>
        </article>

        <article class="skill-category">
            <h3>Nástroje</h3>
            <ul>
                <li>Git & GitHub</li>
                <li>VS Code</li>
                <li>Chrome DevTools</li>
                <li>Figma</li>
            </ul>
        </article>
    </aside>
</section>

3. Finálny Zdrojový Kód

Tu je kompletný kód pre súbor index.html. Tento kód spája všetky vyššie uvedené koncepty do jedného funkčného celku.

⚠️ Poznámka: Nezabudnite, že pre správne zobrazenie potrebujete aj pripojený CSS súbor (odkazovaný v <head>), ktorý definuje layout mriežky a vizuálny štýl.

<!DOCTYPE html>
<html lang="sk">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Moje Portfólio</title>
        <link rel="stylesheet" href="style/finalPage/style.css">
    </head>
    <body>
        <header>
            <h1 class="logo">Moje Portfólio</h1>
            <nav>
                <ul>
                    <li><a href="#hero">Domov</a></li>
                    <li><a href="#projects">Projekty</a></li>
                    <li><a href="#contact">Kontakt</a></li>
                    <li><button class="glass-button"> Stiahnuť CV</button></li>
                </ul>
            </nav>
        </header>

        <main>
            <section class="bento-grid">
                <section id="hero">
                    <header>
                        <h1>Volám sa Samuel Rubár, som Full-stack developer žijúci na Slovensku</h1>
                        <p>Špecializujem sa na vytváranie jedinečných vizuálnych identít pre digitálne produkty a tvorbu jedinečných ilustrácií a motion dizajnu.</p>
                    </header>
                    <aside class="social-links">
                        <a href="#" aria-label="Instagram">Instagram</a>
                        <a href="#" aria-label="LinkedIn">LinkedIn</a>
                        <a href="#" aria-label="Twitter">Twitter</a>
                    </aside>
                </section>

                <aside id="hero-image">
                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=800&fit=crop" alt="Krajina s cestou">
                </aside>
            </section>

            <section class="bento-grid" id="projects">
                <article>
                    <header>
                        <span class="project-icon">✨</span>
                        <h3>Motion design</h3>
                    </header>
                    <p>Vytváranie plynulých animácií a pohyblivých grafík, ktoré oživia váš digitálny obsah a zaujmú vašu cieľovú skupinu.</p>
                </article>

                <article>
                    <header>
                        <span class="project-icon">🎨</span>
                        <h3>Ilustrácia</h3>
                    </header>
                    <p>Originálne digitálne ilustrácie na mieru, ktoré dodajú vášmu projektu jedinečný vizuálny štýl a osobitosť.</p>
                </article>

                <article>
                    <header>
                        <span class="project-icon">⚡</span>
                        <h3>Identita</h3>
                    </header>
                    <p>Komplexný branding a vizuálna identita, ktorá vašu značku odlíši od konkurencie a zapamätá sa vašim zákazníkom.</p>
                </article>
            </section>

            <section class="bento-grid">
                <section id="about">
                    <h2>O Mne</h2>
                    <p>Ahoj! Som <strong> webový vývojár</strong> s láskou k vytváraniu krásnych a funkčných webových stránok. Špecializujem sa na <em>front-end vývoj</em> a mám skúsenosti s prácou s modernými webovými technológiami.</p>
                    <p>Keď neprogramujem, môžete ma nájsť ako skúmam nové technológie, čítam technologické blogy alebo pracujem na osobných projektoch. Verím v <mark>nepretržité učenie</mark> a vždy sa snažím zlepšovať svoje zručnosti.</p>
                    <p>Mojím cieľom je vytvárať webové zážitky, ktoré sú nielen vizuálne príťažlivé, ale aj <strong>používateľsky prívetivé</strong> a <strong>prístupné</strong> pre každého.</p>
                </section>

                <section id="contact">
                    <h2>Máte projekt?</h2>
                    <p>Rád by som sa dozvedel viac o vašich nápadoch. Napíšte mi!</p>
                    <a href="mailto:jan@email.sk">jan@email.sk</a>
                </section>
            </section>

            <section class="bento-grid">
                <section id="skills">
                    <h2>Moje Zručnosti</h2>
                    <aside class="skills-grid">
                        <article class="skill-category">
                            <h3>Frontend</h3>
                            <ul>
                                <li>HTML5</li>
                                <li>CSS3</li>
                                <li>Responzívny Dizajn</li>
                                <li>Webová Prístupnosť</li>
                            </ul>
                        </article>

                        <article class="skill-category">
                            <h3>Dizajn</h3>
                            <ul>
                                <li>UI/UX Dizajn</li>
                                <li>Teória Farieb</li>
                                <li>Typografia</li>
                                <li>Wireframing</li>
                            </ul>
                        </article>

                        <article class="skill-category">
                            <h3>Nástroje</h3>
                            <ul>
                                <li>Git & GitHub</li>
                                <li>VS Code</li>
                                <li>Chrome DevTools</li>
                                <li>Figma</li>
                            </ul>
                        </article>
                    </aside>
                </section>
            </section>
        </main>

        <footer>
            <p>&copy; 2025 Samuel Rybár</p>
            <nav>
                <ul>
                    <li><a href="#">LinkedIn</a></li>
                    <li><a href="#">GitHub</a></li>
                    <li><a href="#">Stiahnuť CV</a></li>
                </ul>
            </nav>
        </footer>
    </body>
</html>