Úvodní cvičení

Prostředí VS Code

Visual Studio Code je zdarma dostupný textový editor vyvíjený společností Microsoft. Podporuje velké množství programovacích jazyků, z nichž pro nás budou nejdůležitější HTML, CSS a později i JavaScript. VS Code je multiplatformní, takže funguje na Windows, macOS i Linuxu. Jeho velkou výhodou je i jednoduché propojení s Gitem, což se hodí například při tvorbě zápočtového projektu.

Rozšíření do VS Code

VS Code nabízí v současné době široké spektrum rozšíření, která práci s kódem výrazně usnadňují. My si ukážeme pár, které nám pomohou s tvorbou webových stránek.

• Live Server

  Dokáže automaticky sputit stránku ve webovém prohlížeči a po každé změně ji ihned aktualizuje.

• Auto Rename Tag

  Při změně otevíracího tagu automaticky přepisuje i uzavírací tag, čímž snižuje riziko chyby při ruční úpravě HTML elementů.

• CSS Peek

  Umožňuje rychle nahlédnout do definice CSS přímo z HTML, což usnadňuje úpravu a kontrolu stylů.

• Path Intellisense

  Automaticky doplňuje cesty k souborům, například při vytváření tagu src nebo img. Zabraňuje chybám vzniklým špatným zadáním cest.

Vývojářské nástroje prohlížeče

Vývojářské nástroje (DevTools) v prohlížeči nám umožňují zkoumat, jak web skutečně funguje, a odhalovat chyby v kódu, stylování nebo výkonu stránky.

• Zobrazení a změna DOMu

  Při otevření možností pro vývojáře se zobrazí panel se strukturou stránky tak, jak ji prohlížeč skutečně interpretuje. V tomto panelu můžeme přidávat nebo odstraňovat HTML elementy, měnit jejich obsah, zkoumat styly a pozici prvků. Umožňuje nám pochopit vztah mezi HTML a CSS a vidět, jak změny ovlivňují vzhled stránky.

• Zobrazení a změna CSS

  V panelu Styles uvidíte všechny CSS styly, které se vztahují na vybraný prvek. Můžete zde zjistit, jaké vlastnosti se na prvek skutečně aplikují, odkud styly pocházejí a upravovat je přímo v nástroji. Panel Computed pak ukáže konečné hodnoty všech vlastností pro daný prvek, tedy jak se opravdu vykreslí.

• Network

  V panelu Network se zobrazí všechny soubory, které prohlížeč načítá při zobrazení stránky – HTML, CSS, obrázky nebo fonty. Zde můžeme sledovat, které soubory se načítají a v jakém pořadí, jak dlouho trvá jejich načtení a jaké mají status kódy, například 200 pro úspěšné načtení nebo 404 pro nenalezený soubor. Zajímavou funkcí je také cache, tedy místo v prohlížeči, kam se ukládají soubory, aby se při opakovaném načtení stránky nemusely stahovat znovu.

• Performance a Lighthouse

  Panel Performance a nástroj Lighthouse umožňují zjistit, jak rychle se stránka načítá a jak dobře funguje. Poskytují přehled, kolik času zabírá načítání stránky a umožňují zjistit, co zpomaluje její načítání. Lighthouse navíc poskytuje automatická doporučení pro zlepšení výkonu, přístupnosti a optimalizace stránky.

• Režim zařízení (device mode)

  Režim zařízení (device mode) umožňuje simulovat různé velikosti obrazovky, aniž bychom potřebovali skutečný telefon nebo tablet. Zde si můžeme zkontrolovat, jak se stránka chová na různě velkých zařízeních.

Užitečné odkazy

Při vývoji webových stránek budeme pracovat s řadou technologií a informací. Důležitou součástí práce vývojáře je schopnost orientovat se v dokumentaci a používat ověřené zdroje. Pokud si při vývoji nebudete něčím jistí, vždy se obraťte na věrohodné zdroje a dohledávejte informace v oficiální dokumentaci.

• MDN Web Docs

  MDN Web Docs je dokumentace provozovaná organizací Mozilla, která srozumitelně popisuje webové standardy a chování webových technologií v prohlížečích.

• Can I use

  Can I use je webová služba, která poskytuje přehled front-endových webových technologií v konkrétních webových prohlížečích.

• W3C Validator

  W3C Validator je nástroj, který kontroluje, zda je HTML kód stránky napsaný správně podle webových standardů.

• Lorem ipsum generátor

  Lorem Ipsum je webová stránka, která generuje falešný text pro testování a návrh webových stránek. Pomáhá nám vidět, jak bude stránka vypadat s textem, aniž bychom museli vymýšlet reálný obsah.