Účastnice:
- ví, že mají mít základní znalosti HTML a CSS např. z workshopu nebo on-line kurzu,
- jsou obeznámené s organizací kurzu:
- podmínkami pro udělení certifikátu,
- funkcí FB skupiny,
- rolí koučů a lektorů,
- mají nainstalovaný textový editor (doporučený VS Code),
- mají založený účet na GitHubu a mají nainstalovaný GitHub Desktop nebo jiný nástroj pro práci s Gitem,
- jsou obeznámené s odevzdáváním úkolů přes Git.
- Organizační záležitosti
- Předpoklady kurzu
- Základní znalost HTML a CSS v rozsahu workshopu a on-line kurzu – kdo neumí, má týden na to si je doplnit.
- Nainstalovaný VS Code
- Práce s textovým editorem
- Kdo nepracoval nikdy s VS Code nebo jiným editorem?
- Používali Repl.it nebo Thimble?
- Úkol: Vytvoření prázdné HTML stránky
- Vytvoření adresáře, otevření adresáře v editoru
- Vytvořit v adresáři
index.html
- Emmet
- Základní struktura stránky:
!a Tab - Lorem ipsum (
lorem) - Značky (
a), - Zanořování a násobení značek (
ul>li,ul+,ul>li*5)
- Základní struktura stránky:
- Rozšíření Live Server
- Git: co to je a na co všechno se dá použít
- vysvětlit repozitář a commit
- GitHub: jak souvisí s gitem a co všechno umí
- GitHub Desktop
- Nainstalovat
- Založit účet
- založíme nový repozitář
- naklonujeme přes Github Desktop
- uděláme lokálně pár změn: vytvoříme HTML stránku
- commit a push
- GitHub Pages
- nastavíme master jako zdroj pro GitHub Pages
- pushneme jednoduchou stránku
- Odevzdávání domácích úkolů přes Github
- použít základ pro domácí úkol: GitHub Classroom
- naklonujeme přes GitHub Desktop, uděláme změny, commit a push
- Zadat DÚ
- PDF ke stažení: bit.ly/webaz1
Domácí úkol: projekt01-vizitka
Vytvoř osobní vizitku se:
- jménem,
- krátkým odstavcem o sobě,
- odkazem na svůj profil,
- vlastní fotkou (aby tě lektoři poznali),
- odkazem na svůj e-mail.
Vizitku ostyluj pomocí CSS:
- Nastav barvu pozadí, popředí
- Uprav velikost písma, zarovnání textu
- Přidej si vlastní písmo např. z Google Fonts
- Další vlastnosti dle vlastního uvážení