{%hackmd anYwyN--TziyASUWcqP-Gw %}
# Tvořím web A–Z: lekce 1
jaro 2021, Praha
<small>16. března 2021</small>
note:
- přivítat, představit se
- představit ostatní (kolečko)
- Jindřich Máca – lektor
- Tomáš Kazatel – lektor
- Yana Taran – koučka
- Michaela Zelenková – koučka
- Jana Raczova – koučka
- Jana Chaloupková – koučka
- Jana Poesová – styčná důstojnice
- Vendula Šerá – styčná důstojnice
- role koučů
- pomáhají při lekcích
- opravují úkoly
- radí na FB
- **dotaz**: _Kdo není ve FB skupině?_
---
## Témata
Box Model, DevTools, Float, Pozicování, Rozvržení stránky, Flexbox, Responzivní web, Media queries, CSS transformace, Přechody, Animace, Centrování prvků, CSS specificita, Pseudotřídy, Pseudoelementy, Formuláře, Tabulky, CSS custom properties (CSS proměnné), Vkládání prvků 3. stran (mapa, video z YT), Generátor statických stránek (Netlify)
note:
- **dotaz**: _Chybí vám nějaké téma?_
- JS po zkušenostech ne, i tak bude dost témat
- během hodin krátké úlohy: hands-on
- domácí úkoly: části stránek a na závěr celá stránka
---
## Účty
- [ ] přidat se do skupiny na FB
- [ ] založit si účet na GitHubu
### Nainstalovat
- [ ] VS Code
- [ ] Git
---
## Zkušenosti
- úvodní kurz Czechitas
- online kurz Luďka Rolečka
note:
- předpokladem účasti bylo osvojit si základy, polovina přislíbila doplnit
- **dotaz**: _Doplnily jste si základy?_
---
## Nástroje
1. Visual Studio Code (VS Code)
1. Git
1. GitHub.com
1. prohlížeč: Google Chrome, Firefox (a jejich DevTools)
note:
- my si tyto nástroje propojíme
---
# 1. VS Code
note:
- textový editor pro psaní kódu v nejrůznějších programovacích jazycích
- ulehčuje nám psaní kódu
- otevřít VS Code
---
#### VS Code: projekty
```
Czechitas
└── jaro 2021
├── lekce_01
│ ├── cviceni_01
│ │ ├── index.html
│ │ └── style.css
│ └── cviceni_02
├── lekce_02
└── lekce_03
```
note:
- jen schéma: pojmenuj a uspořádej si projekty jak libo
- v průzkumníku si vytvořím adresář
- v průzkumníku pravým tlačítkem myši _Open in VS Code_
- VS Code: _Open folder_
- spodní lišta VS Code zmodrá
- vytvořit soubor `index.html`
---
#### VS Code: práce se soubory
osvojte si klávesové zkratky
- <kbd>Ctrl/Cmd+N</kbd> vytvořit nový soubor
- <kbd>Ctrl/Cmd+S</kbd> uložit soubor
- <kbd>Ctrl/Cmd+Tab</kbd> procházení otevřených souborů
---
## Cvičení 01
1. vytvoř si adresář s projektem
2. otevři projekt ve VS Code (spodní lišta bude modrá)
3. vytvoř soubor `index.html`
4. dej vědět, že máš hotovo (palec nahoru v Zoomu)
note:
- můžeme začít psát HTML
- **dotaz**: popište mi základní strukturu HTML dokumentu
- **dotaz**: diktujte mi, co mám psát
- sesmolit strukturu HTML
- Kdo by si to pamatoval? Editor přece, pomůže nám.
---
#### VS Code: emmet
- kouzelná klávesa <kbd>Tab</kbd>
- <kbd>!</kbd> + <kbd>Tab</kbd> =
- [Nápověda](https://docs.emmet.io/cheat-sheet/)
note:
- HTML i CSS, stačí napsat začátek značky nebo vlatnosti a zmáčknout <kbd>Tab</kbd>
- `ul>li*3>a`
- lorem ipsum
- a teď bychom mohli začít kódovat, ale hodilo by se vidět výsledek
- **dotaz** Jak ladit stránku, abych věděl, že pracuju správně.
- editor pomůže: nainstalujeme si rozšíření (extension)
---
#### VS Code: Live Server
- jedno ze stovek možných rozšíření VS Code
- aby fungoval, musíte mít vytvořený _workspace/projekt_ a mít soubor `index.html`
- přidáme rozšíření a zobrazíme si naši stránečku
- při uložení se obnoví stránka => <kbd>Ctrl/Cmd+S</kbd> (lze nastavit automatické ukládání)
- na stavové liště (modré) vlevo tlačítko _Go Live_
---
## Cvičení 02
1. Vytvoř stránku.
2. Přidej své jméno jako nadpis.
3. Přidej odkaz na svůj e-mail.
4. Dej vědět, že máš hotovo.
5. Za odměnu si nainstaluj rozšíření _vscode-pets_.
note:
- _Přestávka_
---
#### VS Code: práce s textem
[Psaní hravě](https://www.psanihrave.cz/) – pište všemi 10
- <kbd>Ctrl+šipky vlevo/vpravo</kbd> skáču po slovech
- <kbd>Ctrl+Shift+šipky vlevo/vpravo</kbd> výběr po slovech
- <kbd>Home/End</kbd> na Windows skok na začátek/konec řádku
- <kbd>Fn + šipka vlevo/vpravo</kbd> na Apple skok na začátek/konec řádku
- <kbd>Alt+šipky nahoru/dolů</kbd> přesun řádku (lze vybrat víc najednou)
---
## 2. Git
- nástroj pro správu verzí vašeho projektu
note:
- obdoba revizí ve Wordu, jen preciznější
- záloha naší práce
- týmová spolupráce
- údržba a rozvoj projektu
- ovládá se psanými příkazy, je vhodnější se nejprve naučit je
- příkazy se píší do příkazové řádky (console), ve VS Code _Terminál_
- otevřít terminál a zavolat `git --version`
---
### Git: příkazová řádka ve VS Code
VS Code má v sobě zabudován tzv. _terminál_
- terminál ~ console ~ command line [komandlajna] ~ příkazová řádka
```shell
git --version
```
note:
- ovládáme počítač psanými příkazy
- vyzkoušejte si
- Git sleduje změny na projektu včetně toho, kdo je provedl! Existuje příkaz
- musíme do Gitu zadat své jméno a e-mail – jednorázová operace (lze později změnit)
---
### Git: představte se
```shell
git config --global user.name "Tomáš Kout"
git config --global user.email "kout.tk@gmail.com"
```
note:
- nastavíme jméno a email globálně, tj. pro veškeré užití na tomto počítači, ale lze nastavit různě pro jednotlivé projekty
---
### Git: slovníček
- repozitář/repository/repo
- commit
- push
- klonovat/clone
note:
- vývojářská latina, jíž se neubráníme, proto si raději jednotlivé termity vysvětlíme – postupně
---
#### Git: repozitář/repository
- úložiště právě jednoho projektu
note:
- de facto složka s vaším projektem
- obohacená o histori jeho změn, a to od počátku projektu
- na počátku bylo slovo, totiž 2 slova: `git init`
---
#### Git: vytvoření repozitáře
```shell
git init
```
note:
- jen jednou, když zakládám projekt
---
#### Git: commit
- ucelený souhrn změn daného projektu
- bod v historii projektu
note:
- pokud možno ucelený
- souhrn změn/bod v historii
- pojmenovaný (pojmenovává ten, kdo ho vytvoří: _Doplněna navigace_, _Oprava rozpadlého boxu novinek_ apod.)
- zachycen v čase
- podepsán
- z commitů se vytváří komentovaná historie projektu
- my si to maximálně zjednodušíme
- commit se vytváří ve dvou krocích
---
#### Git: přidání souborů commitu
```shell
git add .
```
note:
- tečka: přidá **všechny** soubory k souhrnu změn
- lze jednotlivě (i po částech souborů), ale my budeme přidávat vše
---
### Git: commit
- commit = souhrn změn v našem projektu
- commit message: popis těchto změn
note:
- commit ~ závazat se, spáchat, předat
- doporučuje se commitovat často, nicméně záleží na vás
- commit message stručně, ale výstižně, při týmové spolupráci kolegové ocení vysvětlení, proč jste ty změny provedly
- kolegou, který to ocení, můžeš být i ty sama – za 2 měsíce
- obvykle anglicky, ale na našem kurzu klidně i česky
---
#### Git: zapsání commitu
```shell
git commit -m "Přidána navigace"
```
---
## Cvičení 03
1. Pokud jsi to dosud neudělala, inicializuj repozitář: `git init`
2. Přidej soubory do commitu `git add .`
3. Vytvoř commit s nějakým smysluplným popisem:
`git commit -m "Základ projektu"`
---
## 3. GitHub
GitHub ≠ Git
Git je program nainstalovaný na našem počítači.
GitHub je internetová služba. Slouží k uchovávání vzdálených repozitářů.
note:
- zbývá nám propojit editor a lokální projekty s GitHubem
- webová nadstavba nástroje _Git_
- lokální = na našem počítač
- vzdálená = někde na serveru, kdekoli na světě
- cloud (jako DropBox, iCloud, Google Drive, One Drive atp.)
- **úkol**: přihlaste se všechny do svého účtu na GitHubu
---
### GitHub: vytvoříme vzdálený repozitář
Vytvoříme si na GitHubu nový prázdný repozitář a nahrajeme do něj svůj lokální.
note:
- ukázat na anonymním účtu
---
## Cvičení 04
1. Vytvoř si na GitHubu nový repozitář.
2. Pojmenuj ho dle libosti, ponechej ho veřejný (_Public_).
3. Dál zatím nic nepodnikej.
---
### GitHub: propojíme vzdálený a lokální repozitář
V prázdném repozitáři nám GitHub nabízí 3 možnosti, jak do něj dostat svůj projekt.
note:
- vysvětlit 3 varianty
- ukázat prostřední variantu: kopírovat řádky po jednom
- obnovit stránku na GitHubu: je tam kód z lokálního repozitáře
---
### Git: push
- odeslání commitů na vzdálený server (pro nás GitHub.com)
note:
- Dokud jsou soubory u mě na počítači, mám nad nimi plnou kontrolu.
- Jakmile je _pushnu_ už se případné opravy a výmazy provádějí mnohem hůř.
- Tím se ale netrapte, commitujte a pushujte jak libo.
- _push_ je svým způsobem záloha
- ukázat: další změny, commit a push, obnovit GitHub.com
---
## Cvičení 05
1. Zkopíruj postupně 3 řádky z GitHub.com do terminálu ve VS Code a spusť je (stiskni `Enter/Return`).
1. Přidej jeden nebo více odstavců s _lorem ipsum_.
1. Vytvoř další commit:
`git add .` a `git commit -m "Přidán stylopis"`
1. Odešli (_pushni_) své lokální změny na GitHub.com: `git push`
1. VS Code tě vyzve k autorizaci na GitHubu. Potvrď. (jednorázová akce)
1. Pošli do chatu odkaz na svůj repozitář (zkopíruj URL z adresního řádku prohlížeče).
---
### Git: shrnutí
```
změny v repozitáři =>
commit (více commitů) =>
push (na GitHub.com) =>
změny v repozitáři…
```
note:
- a tak pořád dokola
---
# Domácí úkoly
- 4 + 2 nepovinné
- do sobotní půlnoci
note:
- přinejmenším první nepovinný si vypracujte, ať si ověříte propojení nástrojů, které stejně budete potřebovat pro úkoly povinné
- sobotní půlnoc: pokud chcete opravy od koučů před následující lekcí; pokud později, musíte počkat
---
# GitHub Classroom
note:
- odevzdávání úkolů
- jejich kontrola formou _codereview_, tj. připomínky přímo v kódu
- zadání přes FB (tím se propojí vše)
- zadání = repozitář, který si naklonujete k sobě do počítače a hotový ho pushnete na GitHub.com
---
### GitHub.com: klonování repozitářů
1. Odkaz na úkol => GitHub Classroom
2. Autorizuj GitHub Classroom (jednorázová akce).
3. Najdi své jméno a klikni na něj (jednorázová akce).
4. Přijmi zadání (_accept assignment_).
5. Obnov stránku a klikni na modrý odkaz => repozitář s tvým klonem úkolu
---
### GitHub.com: stažení repozitáře
1. Klikni na zelené tlačítko _Code_ a zkopíruj si adresu v něm uvedenou.
1. U sebe na počítači si otevři ve VS Code složku, kam chceš stáhnout repozitář s úkolem.
2. Otevři terminál a zadej `git clone ` + adresa repozitáře zkopírovaná z GitHubu.
4. Potvrď `Enter/Return`. Máš lokální verzi repozitáře s úkolem!
---
### GitHub.com: kontrolní push do nového repozitáře
1. Proveď změnu v kódu a vytvoř commit.
7. Zadej `git push`
9. Obnov stránku s repozitářem úkolu: měla bys vidět své změny.
---
# Konec 1. lekce
{"metaMigratedAt":"2023-06-15T12:48:53.552Z","metaMigratedFrom":"YAML","title":"Lekce 01 | Tvořím web A–Z | jaro 2021","breaks":false,"lang":"cs","slideOptions":"{\"transition\":\"none\",\"theme\":\"night\",\"margin\":0.05,\"minScale\":0.1,\"maxScale\":5,\"width\":1900,\"height\":1080}","contributors":"[{\"id\":\"772328be-33fa-4edc-bac0-7a7903521fb4\",\"add\":39523,\"del\":28648}]"}