Vše máme připraveno a můžeme začít programovat.
-
Ve složce projektu založte soubor
index.html. Vložte to něj následující kód.<!DOCTYPE html> <html lang="cs"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Saturejka</title> </head> <body> <h1>Naše nabídka</h1> <p> Vybraná jídla z našeho jarního menu přepravená našimi prvotřídními šefkuchaři. </p> </body> </html> -
Spusťte v terminálu
npx serve. V prohlížeči na adrese http://localhost:3000 zkontrolujte, jak stránka vypadá. -
S gitem pracujte v druhém terminálu –
npx servesi zabral terminál pro sebe. -
Přidejte soubor
index.htmldo stage pomocígit add. -
Pomocí
git statuszkontrolujte, že je souborindex.htmlpřipraven ke commitu. -
Vytvořte nový commit pomocí
git commit -m "…". Ke commitu napište zprávu „Základní HTML“ -
Pomocí
git logzkontrolujte, že se commit opravdu vytvořil. Výpis logu ukončíte klávesou q -
Pomocí
git pushpublikujte nový commit na GitHub. -
Stejným postupem jako výše vytvořte soubor
style.csss tímto obsahem@import url('https://fonts.googleapis.com/css?family=Open+Sans:300|Playfair+Display:700&display=swap&subset=latin-ext'); html { font-family: 'Open Sans', sans-serif; font-size: 15px; } h1, h2 { font-family: 'Playfair Display', serif; } -
Soubor se styly správně nalinkujte do vašeho HTML a provedené změny opět commitněte stejným postupem jako výše.
Pokračujte ve tvorbě stránky vlastním tempem. Vždy, když dokončíte i třeba jen malou část, udělejte nový commit. Stránku rozhodně nemusíte dokončit. Cílem cvičení je především si vyzkoušet reálnou práci s Gitem.
Jakmile budete se svou stránkou spokojeni, publikujte ji pomocí GitHub Pages.