Making friends with the inspector how non developers can harmlessly dig into code for the first time
•Download as PPTX, PDF•
0 likes•1,783 views
WordCamp Philadelphia 2018. Live demonstration with tips on using the Chrome Inspector to learn and edit CSS on a website.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Making friends with the inspector how non developers can harmlessly dig into code for the first time
Similar to Making friends with the inspector how non developers can harmlessly dig into code for the first time (20)
More from Tara Claeys
More from Tara Claeys (12)
Recently uploaded
Recently uploaded (20)
Making friends with the inspector how non developers can harmlessly dig into code for the first time
- 1. MAKING FRIENDS WITH THE INSPECTOR How Non-Developers Can Harmlessly Dig into Code for the First Time
- 3. INSPECTOR: Developer Tools Chrome - Developer Tools Chrome Visual Inspector Extension Firefox - Firebug Safari - Web Inspector (Develop > Show Web Inspector) Explorer - Firebug, IE Developer Tools
- 4. TOOLS Text Editor (Sublime Text, Notepad) Local Development (MAMP, Desktop Server, Local by Flywheel) SFTP, Git WordPress *Google Chrome
- 6. CSS External style.css file in theme Embedded/Internal Inside the <HEAD> on a page Inline <h3 style="font-weight: bold">Bold Text</h3>
- 7. CSS Syntax
- 8. Inspect Right Click: (⌘+SHIFT+C ) Menu Bar: Keyboard Shortcut:
- 9. Let’s Play!
- 10. Add Local File to Workspace
- 13. Canvas Flip/Chrome Visual Inspector
- 14. MicroThemer
Editor's Notes
- Thank you for joining me this morning! Who is ready to learn something new! Let’s all have a stretch for a minute - make sure we are awake and ready to go! Great! Now, let’s see by a show of hands how many of you have used a browser inspector tool before? How many have never looked at it and may not even know what the Inspector is? And, so I can get a sense of what all of you do ... Raise your hand if you are a designer. Ok, now Developers? Unicorns - you do it all? Awesome, so
- What is an Inspector? The inspector is a set of Developer Tools included in most web browsers. These tools do a range of things, from inspecting HTML, CSS and Javascript loaded on a web page, to showing assets and assessing performance of web page, as well as highlighting errors. It is a great way to make adjustments and corrections on a website, and it is also a really excellent way to learn. I learned CSS in large part by playing with the Inspector, so I am going to focus today on using the Inspector to edit CSS, and by doing so, to improve your CSS skills, or to start learning CSS if you have not used it before.
- DOM: Document Object Model The DOM represents the current content of the page, which can change over time. HTML: is the language that controls the structure and content of webpages. CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.
- CSS was first developed in 1997 as a way for web developers to define the visual appearance of the web pages that they were creating. It was intended to allow web professionals to separate the content and structure of a website's code from the visual design, something that had not been possible prior to this time. A style sheet is intended to cascade through a series of styles in that sheet, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. Algorithm fo each document element Rule Set - Declarations An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly. W3 Schools has some excellent tutorials and is a critical reference for learning and applying CSS
- Tag { Property: Value;} Tag – The element that will be affected Property – What part of the selector will be affected Value – How it will be affected
- View options - side, bottom, separate window Tabs: Elements, Console, Sources, Network Elements: DOM Tree, Styles, Box Model, Element State, Devices
- Washington Post : go over tabs in Inspector To view a history of live-edits made to your page: In the Styles pane, click on the file that you modified. DevTools takes you to the Sources panel. Right-click on the file. Select Local modifications. Network: Disable Cache! Edit colors and fonts Minified Show :hov state Box Model !important Patience