Měním web: Developer Tools a uživatelské styly

Prezentace

  1. Úvod
  2. Developer Tools
  3. Uživatelské styly

Úkoly

Změna HTML v Developer Tools

  1. Najdi si zprávu na zpravodajském webu
  2. Přepiš existující zprávu
    • Přepiš titulek, perex
    • Přidej formátování, tučný text
    • Zmeň obrázek (můžeš použít třeba place kitten)
    • Odstraň zbytečné prvky, komentáře nebo reklamy

Změna stylů v Developer Tools

  1. Najdi nečitelnou stránku, například tuto: Báje a mýty
  2. Uprav styly tak, aby stránka byla čitelná
    • Odstraň obrázek na pozadí, změň barvu pozadí
    • Změň barvu, velikost a písmo textu
    • Odstraň rušivé prvky
    • Zkus upravit šířku textu aby byl čitelnější

Nainstaluj Stylish

Napiš si vlastní styl

  1. Zkus stránku upravit pomocí Developer Tools
  2. Ve Stylish vytvoř nový styl, nezapomeň jej pojmenovat
  3. Zapiš změněná pravidla a selektory
  4. Podívej se v Developer Tools, jak se tvůj styl aplikoval

Inspirace

Užitečné zdroje pro stylování

Další nástroje pro modifikaci webu

Ukázky rozšíření