Skip to content

Latest commit

 

History

History

lekce01

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

Lekce 1: Úvod – Organizace kurzu, VSCode, GitHub

Cíl

Úč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.

Osnova

  1. Organizační záležitosti
  2. 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
  3. Práce s textovým editorem
    • Kdo nepracoval nikdy s VS Code nebo jiným editorem?
    • Používali Repl.it nebo Thimble?
  4. Ú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
  5. 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)
  6. Rozšíření Live Server
  7. Git: co to je a na co všechno se dá použít
    • vysvětlit repozitář a commit
  8. GitHub: jak souvisí s gitem a co všechno umí
  9. 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
  10. GitHub Pages
    • nastavíme master jako zdroj pro GitHub Pages
    • pushneme jednoduchou stránku
  11. 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
  12. Zadat DÚ
  13. 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í

Tip: Webdesign In 4 Minutes