Gratulujeme!

Gratulujeme, Kino Hvězda má nový vzhled a vy máte za sebou třetí část cesty Tvorba webu!

Vzpomeňte si, čím kino začínalo: dvě stránky v HTML, styly, tři karty filmů a dvě tabulky. Od té doby se web dostal na internet pod vlastní adresou. Program se načítá ze souboru s daty, návštěvníci si vybírají místa a rezervují je formulářem, který kontroluje, co napsali, a stránka si jejich vstupenky pamatuje. A teď má web moderní vzhled, který funguje na mobilu stejně dobře jako na počítači.

Celé jste to postavili sami a zvládnete to znovu s jakýmkoli webem: napsat jeho stránky v HTML, nastylovat je v CSS nebo Tailwindu pro každou obrazovku, oživit je JavaScriptem, načítat data, kontrolovat formuláře, pamatovat si věci v prohlížeči a dát web na internet. Přesně tak se dělají weby.

Nová verze na internetu. Nahrajte ji jako v lekci Web na internetu, jen s jedním krokem navíc. Prohlížeče @import "tailwindcss"; nerozumí: Start Coder při každém spuštění převádí váš style.css na obyčejné CSS. Pro váš web to udělá Tailwind CLI na vašem počítači, jak jste viděli na konci kurzu Tailwindu. Potřebuje Node.js. Vaše styly pro Tailwind zůstanou na vašem počítači a web dostane hotové CSS:

1. Vytvořte složku kino a přesuňte do ní složku svého webu, kino-hvezda. Z editoru uložte index.html, program.html, script.js a program.json do kino-hvezda místo starých souborů a style.css do složky kino.
2. Otevřete terminál ve složce kino a spusťte:

   npm install tailwindcss @tailwindcss/cli
   npx @tailwindcss/cli -i style.css -o kino-hvezda/style.css --minify

   Druhý příkaz přečte vaše styly pro Tailwind, najde třídy v souborech webu, i ve script.js, a hotové CSS zapíše do kino-hvezda/style.css. --minify vynechá mezery a konce řádků, takže je soubor menší a rychleji se stáhne. Příkaz spusťte znovu, kdykoli změníte třídy.
3. Otevřete kino-hvezda/index.html v prohlížeči a zkontrolujte vzhled (samotný program se načte jen ze serveru, jak víte z projektu Program kina). Pak na Netlify přetáhněte složku kino-hvezda na stránku Deploys svého projektu, jako minule. Co nainstaloval npm, zůstane ve složce kino: web to nepotřebuje.

A pak si web otevřete na mobilu. Tentokrát je pro něj dělaný.

Co dál. Poslední část cesty je React, knihovna JavaScriptu pro stavbu celých aplikací z komponent, tedy z kousků stránky, které napíšete jednou a použijete znovu a znovu. Po kurzu Reactu se kino vrátí naposledy: postavíte ho znovu jako aplikaci v Reactu. A jestli chcete na téhle verzi ještě chvíli pracovat, pro tmavý režim znáte všechno: variantu dark: i přepínač z lekce Tmavý režim, a díky localStorage si přepínač dokonce zapamatuje, co si návštěvník vybral.

Než půjdete, podepište svůj web, jako jste podepsali svou úplně první stránku na začátku cesty.