Opakování a pozicování

Opakování základních znalostí HTML a CSS a vlastnost position.

Devtools

Devtools, developer's tools nebo vývojářské nástroje, je nezbytný denní chléb každého vývojáře.

I my s nimi budeme na našich lekcích pracovat. Postupně budeme objevovat další možnosti a zákoutí vývojářských nástrojů, pro začátek se naučíme prozkoumat prvky a stylování stránek.

Otevření devtools

Vývojářské nástroje není potřeba instalovat, jsou už součástí dnešních prohlížečů. Pokud máš v prohlížeči otevřenou stránku a zajímá tě, jak vypadá její HTML, stačí udělat jednu z možností:

  • vybrat další možnosti (tři tečky) vpravo nahoře > More Tools > Developer Tools
  • kamkoli na stránce stisknout pravým tlačítkem a vybrat prozkoumat nebo v angličtině inspect
  • F12

Měla by defaultně být otevřená záložka Elements.

Při najetí na elementy v html se nám vyznačí prvky na stránce. Po kliknutí můžeme vidět stylování prvků a dokonce je upravovat. Úpravy jsou pouze v našem prohlížeci a jsou dočasné, po refreshi se stránka načte v původním stavu. Vývojářské nástroje jsou nezbytné pro sledování našich změn i pro zkoušení stylování při kódování stránek.

Devtools guide