Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making friends with the inspector how non developers can harmlessly dig into code for the first time

278 views

Published on

WordCamp Philadelphia 2018. Live demonstration with tips on using the Chrome Inspector to learn and edit CSS on a website.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Making friends with the inspector how non developers can harmlessly dig into code for the first time

  1. 1. MAKING FRIENDS WITH THE INSPECTOR How Non-Developers Can Harmlessly Dig into Code for the First Time
  2. 2. INSPECTOR: Developer Tools Chrome - Developer Tools Chrome Visual Inspector Extension Firefox - Firebug Safari - Web Inspector (Develop > Show Web Inspector) Explorer - Firebug, IE Developer Tools
  3. 3. TOOLS Text Editor (Sublime Text, Notepad) Local Development (MAMP, Desktop Server, Local by Flywheel) SFTP, Git WordPress *Google Chrome
  4. 4. BASIC KNOWLEDGE DOM HTML CSS
  5. 5. CSS External style.css file in theme Embedded/Internal Inside the <HEAD> on a page Inline <h3 style="font-weight: bold">Bold Text</h3>
  6. 6. CSS Syntax
  7. 7. Inspect Right Click: (⌘+SHIFT+C ) Menu Bar: Keyboard Shortcut:
  8. 8. Let’s Play!
  9. 9. Add Local File to Workspace
  10. 10. Cool Things Disable Cache
  11. 11. View Local Modifications
  12. 12. Canvas Flip/Chrome Visual Inspector
  13. 13. MicroThemer
  14. 14. Resources https://developers.google.com/web/tools/chrome-devtools/css/ https://developers.google.com/web/tools/chrome-devtools/ https://www.youtube.com/watch?v=nOEw9iiopwI https://www.w3schools.com/css/default.asp CanvasFlip: https://www.canvasflip.com/visual-inspector/ MicroThemer: https://themeover.com/

×