Začátek tvorby webu - Začátek.cz - Váš start na internetu

Proč vytvořit vlastní web?

Vlastní web má praktické důvody:

Portfolio - ukázka práce, projektů, dovedností
Online přítomnost - profesionální image, vlastní doména
Učení se programování - webový vývoj je nejsnazší cesta do IT
Kontrola - vlastníte obsah, design, data (ne Facebook/Instagram)
Monetizace - affiliate, reklama, prodej produktů
Kreativita - vytváříte něco vlastního

💡 Tip pro začátečníky

První web nebude vypadat jako profesionální stránky firem. Bude to jednoduchá HTML stránka s textem a pár obrázky. A to je v pořádku - všichni začínali takhle. Důležité je začít a postupně zlepšovat.

První kroky k vlastnímu webu

1 Nainstalujte textový editor

VS Code (zdarma, nejpopulárnější) - stáhněte z code.visualstudio.com. To je jediný software který potřebujete. Poznámkový blok nestačí.

2 Vytvořte složku projektu

Někde na počítači vytvořte složku "muj-web". Sem budete ukládat všechny soubory. Struktura je důležitá - začněte od začátku organizovaně.

3 Vytvořte první HTML soubor

V této složce vytvořte soubor "index.html" (vždy první stránka webu). Otevřete ho ve VS Code a napište první řádky HTML. Detaily níže.

Co se může pokazit (a je to normální)

Tvorba webu je frustrující na začátku. Realita:

První týden

Web vypadá ošklivě - žádný design, jen černý text na bílém pozadí. Začátek je takový.
Něco nefunguje a nevíte proč - zapomenuté uzavírací tagy, překlepy. Normální.
CSS neaplikuje styly - špatná cesta k souboru, chybí class. Debugging je polovina práce.
Nevíte co znamenají pojmy - div, span, class, ID? Cizí jazyk zpočátku.

První měsíc

Web nevypadá jako jste chtěli - vidina vs realita. Potřebujete praxi.
Na mobilu je to rozbitý - responsivita je těžká. Musíte se naučit media queries.
Kopírujete kód a nechápete ho - tutorial hell. Píšete ho ručně = učíte se.
JavaScript dělá chyby - console.log je váš přítel. 80% času řešíte bugy.

💡 Realistické očekávání

První měsíc: základní HTML stránka s CSS styly. Po 3 měsících: funkční jednoduchý web s interaktivitou. Po 6 měsících: schopní vytvořit slušně vypadající responzivní stránku. Po roce: juniorská úroveň, můžete hledat práci.

HTML základy - struktura stránky

Co je HTML?

HTML (HyperText Markup Language) je kostra webu - struktura, obsah, text, obrázky. Není to programovací jazyk, je to markup (značkovací jazyk).

Základní struktura

Váš první index.html soubor:

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Můj první web</title>
</head>
<body>
    <h1>Vítejte na mém webu</h1>
    <p>Toto je můj první webová stránka.</p>
</body>
</html>

Základní HTML tagy

<h1> až <h6> - nadpisy (h1 největší, h6 nejmenší)
<p> - odstavec textu
<a href="url"> - odkaz
<img src="obrazek.jpg" alt="popis"> - obrázek
<div> - kontejner pro seskupení (blokový element)
<span> - inline kontejner (uvnitř textu)
<ul> a <li> - nečíslovaný seznam
<ol> a <li> - číslovaný seznam

Příklad komplexnější stránky

<body>
    <header>
        <h1>Jan Novák</h1>
        <nav>
            <a href="#o-mne">O mně</a>
            <a href="#projekty">Projekty</a>
            <a href="#kontakt">Kontakt</a>
        </nav>
    </header>

    <main>
        <section id="o-mne">
            <h2>O mně</h2>
            <p>Jsem webový vývojář...</p>
        </section>

        <section id="projekty">
            <h2>Moje projekty</h2>
            <ul>
                <li>Projekt 1</li>
                <li>Projekt 2</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2025 Jan Novák</p>
    </footer>
</body>

CSS základy - styling

Co je CSS?

CSS (Cascading Style Sheets) = vzhled webu. Barvy, fonty, rozložení, animace. HTML je obsah, CSS je design.

Jak propojit CSS s HTML

V <head> sekci HTML:

<link rel="stylesheet" href="style.css">

Vytvořte soubor "style.css" ve stejné složce:

/* Základní styly */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
    padding: 0 20px;
}

/* Odkazy */
a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

CSS selektory

Element: p { color: red; } - všechny <p> tagy
Class: .nazev { color: blue; } - HTML: <div class="nazev">
ID: #jedinecny { color: green; } - HTML: <div id="jedinecny">

Box model

Každý element má:

Content - obsah (text, obrázek)
Padding - vnitřní odsazení (mezi obsahem a okrajem)
Border - okraj
Margin - vnější odsazení (mezi elementy)

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

JavaScript základy - interaktivita

Co je JavaScript?

JavaScript = interaktivita webu. Kliknutí na tlačítko, animace, formuláře, změny obsahu. Jediný jazyk který běží v prohlížeči.

Jak přidat JavaScript

Na konci <body> (před </body>):

<script src="script.js"></script>

Základní příklady

Změna textu po kliknutí:

// HTML
<button id="moje-tlacitko">Klikni</button>
<p id="text">Původní text</p>

// JavaScript (script.js)
document.getElementById('moje-tlacitko').addEventListener('click', function() {
    document.getElementById('text').textContent = 'Text se změnil!';
});

Zobrazit/skrýt obsah:

// HTML
<button id="toggle">Zobrazit/Skrýt</button>
<div id="obsah" style="display:none;">Skrytý obsah</div>

// JavaScript
document.getElementById('toggle').addEventListener('click', function() {
    let obsah = document.getElementById('obsah');
    if (obsah.style.display === 'none') {
        obsah.style.display = 'block';
    } else {
        obsah.style.display = 'none';
    }
});

💡 Učení JavaScriptu

První měsíc se soustřeďte na HTML a CSS. JavaScript přidejte až když máte pevné základy ve struktuře a stylování. Neučte se všechno najednou - postupně.

Hosting a doména - zveřejnění webu

Co potřebujete

Doména - adresa webu (např. jannovak.cz) - 150-300 Kč/rok
Hosting - server kde běží web - 100-500 Kč/měsíc

Kde koupit

České poskytovatele:

Wedos - nejlevnější, spolehlivý (doména + hosting ~200 Kč/měsíc)
Český hosting - dobrá podpora, mírně dražší
Forpsi - velký poskytovatel, střední cena

Bezplatné možnosti (pro začátek)

GitHub Pages - zdarma hosting pro statické stránky (HTML/CSS/JS)
Netlify - zdarma, snadný deployment, populární
Vercel - zdarma, moderní, pro pokročilejší projekty

Jak nahrát web na GitHub Pages (zdarma)

1 Vytvořte účet na Git platformě

Registrace na Git hostingové platformě (zdarma)

2 Vytvořte repository

New repository → pojmenujte podle platformy (např. "vase-jmeno.[platforma].io") → Public → Create

3 Nahrajte soubory

Upload files → vyberte index.html, style.css, script.js → Commit changes. Za 1-2 minuty bude web dostupný na vaší adrese

První funkční projekt - osobní stránka

Co vytvoříme

Jednoduchou osobní stránku s:

Hlavička s vaším jménem a navigací
Sekce "O mně"
Sekce "Dovednosti"
Sekce "Kontakt"
Responzivní design (funguje na mobilu)

Struktura souborů

muj-web/
├── index.html
├── style.css
├── script.js
└── images/
    └── foto.jpg

Časový odhad

Týden 1: HTML struktura (4-6 hodin)
Týden 2: CSS styling (6-8 hodin)
Týden 3: JavaScript interaktivita (4-6 hodin)
Týden 4: Responsivita a deployment (4-6 hodin)

⚠️ Nepoužívejte website buildery hned

Wix, WordPress, Webnode - snadné, ale nenaučíte se kód. Pokud chcete rozumět webům a případně z toho mít kariéru, začněte od nuly s HTML/CSS/JS. Buildery můžete používat později, až budete rozumět základům.

Časté chyby začátečníků

Příliš složitý první projekt - e-shop s platbou? Ne. Začněte s jednoduchou stránkou.
Nevalidní HTML - nezavřené tagy, špatná struktura. Použijte validator (validator.w3.org).
Inline styly - <p style="color: red"> je špatně. Používejte externí CSS.
Nekopírujte celý tutoriál - pochopte co děláte, pak píšte vlastní kód.
Zapomenutí na responzivitu - 60% návštěvnosti je z mobilu. Testujte!
Žádné komentáře v kódu - za měsíc nevíte co jste dělali. Komentujte.
Neoptimalizované obrázky - 5MB foto zpomalí web. Komprimujte (tinypng.com).
Neučit se devtools - F12 v prohlížeči je váš nejlepší přítel. Naučte se ho používat.

💡 Zdroje na učení

Zdarma:
- MDN Web Docs (developer.mozilla.org) - nejlepší reference
- freeCodeCamp.org - interaktivní kurzy
- CSS-Tricks.com - CSS triky a návody
- YouTube: Traversy Media, Web Dev Simplified

Cvičení:
- Online platformy s výzvami - reálné projekty k procvičení

🌐 Začátek tvorby webu

Proč vytvořit vlastní web?

První kroky k vlastnímu webu

Co se může pokazit (a je to normální)

První týden

První měsíc

HTML základy - struktura stránky

Co je HTML?

Základní struktura

Základní HTML tagy

Příklad komplexnější stránky

CSS základy - styling

Co je CSS?

Jak propojit CSS s HTML

CSS selektory

Box model

JavaScript základy - interaktivita

Co je JavaScript?

Jak přidat JavaScript

Základní příklady

Hosting a doména - zveřejnění webu

Co potřebujete

Kde koupit

Bezplatné možnosti (pro začátek)

Jak nahrát web na GitHub Pages (zdarma)

První funkční projekt - osobní stránka

Co vytvoříme

Struktura souborů

Časový odhad

Časté chyby začátečníků

Kategorie

🌐 Začátek tvorby webu

Proč vytvořit vlastní web?

První kroky k vlastnímu webu

Co se může pokazit (a je to normální)

První týden

První měsíc

HTML základy - struktura stránky

Co je HTML?

Základní struktura

Základní HTML tagy

Příklad komplexnější stránky

CSS základy - styling

Co je CSS?

Jak propojit CSS s HTML

CSS selektory

Box model

JavaScript základy - interaktivita

Co je JavaScript?

Jak přidat JavaScript

Základní příklady

Hosting a doména - zveřejnění webu

Co potřebujete

Kde koupit

Bezplatné možnosti (pro začátek)

Jak nahrát web na GitHub Pages (zdarma)

První funkční projekt - osobní stránka

Co vytvoříme

Struktura souborů

Časový odhad

Časté chyby začátečníků

Užitečné nástroje

CS.WebDev.Wiki

Kategorie