Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

Udělat základní webové stránky je k smíchu jednoduché. Vezmi svůj wireframe a převěd ho na statické webové stránky.

Kódování a design

Kodér

Zjistíš, kdo je kóder a proč je jeho práce dnes tak důležitá. Uvidíš, jakou roli hraje mezi designem a programováním a proč i bez vlastní kreativity dokáže tvořit stránky, které berou dech.

Nasadíš svou webovou stránku z lokálního prostředí do produkce a pustíme tvůj web do světa! Objevíš možnosti hostingu, domén, automatického deploye a řešení konfliktů mezi prostředími.

Deploy

koder

Webový kodér je člověk, který se stará hlavně o tvorbu vzhledu a struktury webových stránek. Jeho práce je převést grafický návrh (nejčastěji z Figma nebo Photoshopu) do funkčního HTML a CSS kódu. Často používá i trošku JavaScriptu, ale jeho hlavní úkol je udělat web tak, aby vypadal a fungoval podle návrhu.


## Co dělá kodér

- Převádí designy do HTML, CSS
- Upravuje rozložení a vzhled stránek podle návrhů
- Zajišťuje, aby byl web responzivní (fungoval na mobilech i počítačích)

## Rozdíl mezi kodérem a programátorem

- **Kodér** se stará hlavně o vzhled a strukturu (statické stránky)
- **Programátor** píše logiku aplikace (backend nebo frontend), tedy jak aplikace funguje a zpracovává data

> Kodér se většinou věnuje HTML, CSS a základnímu JavaScriptu, zatímco programátor používá složitější jazyky a frameworky (např. TypeScript, PHP, Java, .NET ...)

## Proč začít jako webový kodér
- Je to nejjednodušší vstup do světa webového vývoje
- Rychle uvidíš výsledky své práce přímo v prohlížeči
- Je to dobrý start, pokud chceš později přejít k programování
- Můžeš pracovat na reálných projektech už po krátké době učení


HTML a CSS jsou základní stavební kameny každé webové stránky. 

## HTML - HyperText Markup Language

**HTML** popisuje strukturu obsahu na tvé webové stránce.

- Určuje, jaké prvky jsou na stránce (nadpis, odstavec, obrázek...)
- Umožňuje přidávat odkazy, formuláře a seznamy
- Slouží pro strukturování obsahu na tvé stránce

## CSS - Cascading Style Sheets

**CSS** se stará o vzhled tvé webové stránky.

- Určuje barvy, styly písma, velikosti a mezery
- Řídí rozložení prvků na stránce (např. kartičky ve sloupcích)
- Přidává efekty a animace pro lepší vzhled

## Proč začít s HTML a CSS

Díky těmto dvoum jazykům, dokážeš převést grafický návrh do funkční webové stránky.

- HTML a CSS je jednoduché na naučení a nepotřebuješ žádné složité nástroje
- Rychle uvidíš výsledky své práce přímo v prohlížeči
- toto je základ pro další technologie jako JavaScript, React nebo TailwindCSS

HTML & CSS

Statická stránka je webová stránka, jejíž **obsah se nemění podle uživatele nebo databáze**. Znamená to, že **každý návštěvník vidí stejný obsah, který je napsaný přímo v HTML a stylovaný pomocí CSS**. Takové stránky jsou nejjednodušší na vytvoření a jsou ideální pro začátečníky.

## Co je statická stránka

- Obsah je pevně daný v souborech HTML a CSS
- Nevyužívá databáze ani serverové skripty (Node.js, Java, C#, PHP...)
- Všichni návštěvníci vidí stejnou stránku

## Proč začít se statickými stránkami

- Jsou nejjednodušší cestou, jak se dostat do webového vývoje
- Naučí tě základní strukturu webu
- Můžeš je zadarmo zveřejnit na službách jako GitHub Pages 



Statické stránky

Když vytváříš aplikaci nebo web, hodně záleží na tom, jestli je určená jen pro **interní použití (private/in-house)** nebo pro **širokou veřejnost (public)**. Každý typ má úplně jiné požadavky na design, bezpečnost, testování a rozpočet.

## Private (in-house) aplikace
- Určené jen pro zaměstnance nebo partnery firmy
- Obsahují funkce potřebné pro práci, ale vzhled nebývá prioritou
- Často stačí jednoduché rozhraní s důrazem na funkčnost
- Menší potřeba škálování, velkých serverů a složité podpory
- Rychlejší vývoj a nižší náklady (není nutný full-time UI/UX tým)

## Public aplikace
- Přístupné široké veřejnosti, často tisíce až miliony uživatelů
- Vzhled a použitelnost jsou klíčové – investice do UI/UX týmu se vyplatí
- Potřebují lepší zabezpečení, škálování a optimalizaci výkonu
- Více času na testování, dokumentaci a podporu

## Proč jsou private aplikace levnější
- Uživatelská skupina je menší a známá, takže není nutné dělat rozsáhlé uživatelské testy
- UI může být jednodušší, důležitá je hlavně funkčnost
- Často se používají interní knihovny a komponenty, které zrychlí vývoj
- Menší tlak na brand a marketing

## Zajímavé hinty
- Pokud děláš private aplikaci, můžeš rychle prototypovat a testovat přímo s interními uživateli
- U public aplikací se vyplatí investovat do design systému
- Private aplikace můžou mít méně „hezké“ UI, ale musí vykonávat správně svou funkci
- U public aplikací předpokládej, že uživatelé nic neví a potřebují jednoduché a intuitivní ovládání


> **Full-time** - člověk, který pracuje na projektu nebo ve firmě na plný úvazek (celý pracovní týden).  

> **UX/UI tým** - skupina lidí specializovaných na uživatelský zážitek (UX) a vzhled aplikace (UI), kteří navrhují a testují, jak bude aplikace vypadat a fungovat.

> **Design systém** – sada pravidel, komponent a stylů (barvy, fonty, tlačítka...), která zajišťuje jednotný vzhled a chování aplikací a webů.



Private & Public aplikace

Když stavíš web, můžeš vytvořit buď **_statickou stránku_** nebo **_interaktivní stránku_**. Rozdíl je hlavně v tom, jak se stránka chová k uživateli a odkud získává obsah.

## Statické stránky

- Obsah je **pevně daný** v HTML a CSS
- **Každý uživatel vidí stejný obsah**
- Nepotřebují databázi ani serverové skripty
- Jsou **rychlé a jednoduché na vytvoření**
- Ideální pro **prezentační weby, osobní stránky, portfolia**

## Interaktivní stránky

- Obsah se **mění podle uživatele nebo akcí** (např. formuláře, komentáře, přihlášení)
- Často využívají **JavaScript** a **serverové technologie** pro dynamický obsah
- Můžou komunikovat s databází nebo API, aby načítaly nové informace
- **Reagují na vstupy uživatele** – kliknutí, psaní, odesílání dat
- Jsou vhodné pro **aplikace, sociální sítě, e-shopy**

## Hlavní rozdíly

- **Statické stránky** = jednoduché, rychlé, každý vidí totéž
- **Interaktivní stránky** = reagují na uživatele, mění se, propojené s databází nebo API
- **Statické** jsou lepší pro začátek učení HTML & CSS
- **Interaktivní** potřebují znalosti **JavaScriptu, backendu** a často i **frameworků** (např. React, Next.js)

## Proč začít se statickými stránkami

- Snadněji pochopíš základní HTML strukturu a stylování přes CSS
- Rychle uvidíš výsledky a nebudeš řešit složitou logiku
- Získáš pevný základ pro přechod na interaktivní aplikace



Interaktivní stránky

Q: Kdo je kodér a jakou roli hraje mezi designem a programováním?
A: Kodér převádí vizuální návrh do funkční podoby, takže propojuje designový záměr s technickou realizací.

Kdo je kodér a jakou roli hraje mezi designem a programováním?

Q: Proč může kodér tvořit skvělé stránky i bez vlastní kreativity?
A: Má jasný designový podklad a zaměřuje se na precizní realizaci, kde rozhoduje řemeslo a proces.

Proč může kodér tvořit skvělé stránky i bez vlastní kreativity?

Q: Jak kodér překládá design do funkčních webových stránek?
A: Rozloží návrh na sekce a komponenty a krok po kroku je sestaví v HTML a CSS.

Kodér

Kodér

Materiály pro tebe.

Co dělá kodér

Rozdíl mezi kodérem a programátorem

Proč začít jako webový kodér