add more context to the existing dev tools lecture

Ada-Developers-Academy · Mar 24, 2019 · 72f122e · 72f122e
1 parent 2f4253e
commit 72f122e
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/05-html-css/dev-tools-into-default-styles.md b/05-html-css/dev-tools-into-default-styles.md
@@ -1,27 +1,30 @@
 # Developer Tools & Default Styles
 
-
 ## Learning Goals 📚
+
 - Use developer tools to identify default styles of elements
 - Use developer tools to identify inherited styles of elements
 
 ## What are Developer Tools?
 
-The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application.
+The Chrome Developer Tools (Dev Tools for short), are a set of web authoring and debugging tools built into Google Chrome. The Dev Tools provide web developers deep access into the internals of the browser and their web application.
 
 Other Browsers, such as Firefox and Safari, have their own debugging developer tools. They are worth becoming familiar with as you begin to be aware of cross-browser compatibility. Because we are only developing with Chrome this week, we are going to focus specifically on Chrome's Developer Tools.
 
 
 ## Dive into Developer Tools!
-You can open Dev Tools in Chrome by any of the following:
-- right click on a page and click on 'inspect' from the menu
-- use Cmd+Opt+I on Mac to open the Developer Tools
+
+Now that we've gotten deeper into HTML and CSS, let's explore more fully what Dev Tools can show us.
+
+Reminder: you can open Dev Tools in Chrome with any of the following methods:
+- right click on a page and click on 'Inspect' from the menu
+- use the keyboard shortcut `cmd + opt + i`
 - in Google Chrome, on the top menu, do View > Developer > Developer Tools
 
 
 ![Elements Tab in Dev Tools](imgs/dev_tools_elements_tab.png)
 To start, click on the *Elements* tab. You should get something that looks like this:
-![Devtools](imgs/dev_tools.png)
+![dev tools](imgs/dev_tools.png)
 It should show you some HTML code of the page you are on in one panel and CSS in the other panel. This HTML code is reflecting your site's DOM (Document Object Model).
 
 ### The DOM