Skip to content

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

License

Notifications You must be signed in to change notification settings

czechitas/menim-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 

Repository files navigation

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

  • Změň barvu lišty a pozadí na Facebook, přidej koťátka dle úvahy
  • Uprav portál IDOS aby měl hezčí barvy a větší písmo
  • Přestyluj iDnes (nebo jiný zpravodajský portál)
    • Zvětši písmo a změň jej na patkové
    • Odstraň rušivé prvky na stránce: související články, diskuze, reklamy…
  • Zvýrazni text „Komerční sdělení“ na webu Lupa (nebo jinde)

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

Další nástroje pro modifikaci webu

Ukázky rozšíření

Releases

No releases published

Packages

No packages published