Toto je první ze série pěti úkolů, ve kterých si postupně naprogramuješ hru piškvorky.
-
Na GitHubu si otevři repozitář piskvorky. Použij jej jako šablonu (Use this template → Create a new repository) pro vytvoření veřeného repozitáře pojmenovaného
piskvorky(jméno je důležité), do kterého budeš průběžně nahrávat svoji práci.
-
Otevři si VS Code ve složce, do které budeš chtít naklonovat složku
piskvorkys úkolem (složkapiskvorkyse jako vždy vytvoří sama při klonování). Otevři si ve VS Code terminál a naklonuj si repository piskvorky příkazem (nezapomeň nahradit<GITHUB_USERNAME>tvým loginem na GitHubu):git clone https://github.com/<GITHUB_USERNAME>/piskvorky.git
-
Otevři si naklonovanou složku
piskvorkyznovu ve VS Code pomocí File → Open Folder. -
V průzkumníku souborů ve VS Code uvidíš otevřený projekt
PISKVORKY, v něm bude jen souborREADME.md(je tam také soubor.gitignorea adresář.git, ty jsou ale skryté). -
V této složce založ soubor
index.html. -
Do
index.htmlpřidej základní strukturu HTML a mezi značky<body></body>vlož nadpis úrovněh1s textemPiškvorky. Stejný text přidej také do<title>v hlavičce dokumentu (<head>). -
Spusť si v terminálu vývojový server pomocí
npx serve. Otevři si vytvořenou stránku ve webovém prohlížeči. Výsledek by měl vypadat takto (jenom v adresním řádku bude port 3000 místo 5500, který je na screenshotu):
-
Příkazem
git add .vyber nově vytvořený HTML soubor a sgit commit -m "Základní html"dokonči první commit. -
Přes
git pushnahraj první commit na github. -
Zkontroluj, že na adrese
https://github.com/<GITHUB_USERNAME>/piskvorkyje nahranýindex.html. -
V nastavení povol GitHub Pages.
-
Odkaz na stránku přidej do popisku repozitáře v sekci Website.
-
Vedle souboru
index.htmlvytvoř istyly.cssa napoj je do stránky pomocí tagu<link … />. -
Do stejné složky si stáhni obrázek uvodni.jpg.
-
Postupnou úpravou HTML a CSS uprav stránku do této podoby:
-
Nezapomeň průběžně commitovat a nahrávat na GitHub.
- Proveď změny. Uprav soubory. Napiš HTML, CSS.
- Pomocí
git add .označ všechny nové změny. - Přes
git commit -m "Název změn"pojmenuj, čeho se změny týkají. - S
git pushnahraj commit na Github. - Vrať se do prvního kroku.
-
Pro spodní dvě tlačítka použij tag
<a>.- Prvnímu tlačítku, odkazu na pravidla nastav atribut
href="https://czechitas-podklady.cz/Piskvorky-pravidla/". - Druhému nastav atribut
href="index.html". Bude tedy prozatím odkazovat na stránku, kde zrovna uživatel je. Stránku s hrou totiž doplníte až v dalších úkolech.
- Prvnímu tlačítku, odkazu na pravidla nastav atribut
-
Tlačíka by se po najetí myši měly ztmavit.
- Nadpis Piškvorky je fontem
Lobster. Najdeš ho zdarma na Google Fonts. - Různé vzdálenosti, velikosti textu odhadni od oka nebo přesně změř na obrázku výše.
- Gradient v pozadí jde z fialové
#615daddo růžové
#ffc8da. - Další barvy, které se ti budou hodit:
- Barva textu
#ffffff. - Podkladová tmavě modrá
#283e50. - Tlačítko Pravidla
#1fcca4. A po najetí myši
#1cbb96. - Tlačítko Začít hrát
#0197f6. Po najetí
#0090e9.
- Barva textu
- Úvodní text nemusíš opisovat. Stačí ho zkopírovat zde:
Piškvorky jsou velmi oblíbená společenská hra pro dva hráče. Obvykle se hraje s tužkou a čtverečkovaným papírem. Nyní můžete využít naši skvělou aplikaci, takže už nepotřebujete ani tužku a nemusíte hledat čtverečkovaný papír. Přejeme vám hodně zábavy!
