VS Code

• Textový editor pro psaní kódu v nejrůznějších jazycích
• Ke stažení zde: code.visualstudio.com
• Ulehčuje nám psaní kódu
• Osvojte si klávesové zkratky
  • Uložit Ctrl/Cmd+S
  • Posouvat se po slovech Ctrl+šipky vlevo/vpravo, Ctrl+Shift+šipky vlevo/vpravo
  • Prohodit řádky Alt+šipky nahoru/dolů
  • Nástrojová paleta Ctrl/Cmd+Shift+P
• Psaní hravě – pište všemi 10

Projekty

• Udržujte si všechny projekty/úkoly v jedné složce v podobné struktuře jako níže

Czechitas
├── adela_na_cestach
└── html_a_css_1
   ├── opakovani
   │   ├── index.html
   │   └── style.css
   └── boty
   └── recepty

Emmet

• Usnadňuje psaní kódu pomocí automatického doplňování
• V HTML i CSS stačí napsat začátek značky nebo vlatnosti a zmáčknout Enter
• ul>li*3>a + Enter
• lorem + Enter
• Nápověda

Cvičení 1

1. Vytvoř stránku (index.html) ve složce opakovani
2. Přidej základní html strukturu ! + Enter
3. Přidej nadpis s textem Opakování
4. Přidej odkaz na stránky kurzu

Live Server

• Jedno ze stovek možných rozšíření VS Code
• Aby fungoval, musíte mít vytvořený soubor index.html
• Přidáme rozšíření a zobrazíme si naši stránku
  • Na spodní liště okna s VS Code se vpravo objeví „Go Live“, klikněte a otevře se prohlížeč s rozpracovanou stránkou
• Propojili jsme si editor a prohlížeč!
• Při uložení se obnoví stránka => Ctrl/Cmd+S

Cvičení 2

1. Přidej odstavec s lorem ipsum nebo český text z Blábot
2. Vytvoř soubor CSS
3. Podbarvi stránku třeba na růžovo
4. Změň písmo nadpisů na bezpatkové (bezserifové)