Merge pull request #533 from Ada-Developers-Academy/ddr/html-dev-tool…

…s-intro

add intro to dev tools to html's intro to web

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

05-html-css/the-web.md

@@ -86,6 +86,33 @@ There are also many different browsers (Safari, Internet Explorer, Chrome, Firef
 
 In the Ada curriculum, we will focus our learning goals on developing web sites that are compatible with the latest version of [Google Chrome](https://www.google.com/chrome/). Students don't need to switch to Google Chrome for their every day use, but are asked to use Google Chrome for web development at Ada.
 
+## Each Web Site and Web App is Made of Code
+
+When we use an Internet browser to go to a web address, our browser (as a _client_) makes a _request_ to a _server_, which usually gives us a _response_ that is a set of HTML, CSS, and other code for our browsers to interpret and then display.
+
+Therefore, it's safe to say that all websites and web apps we use and have a visual/interactive element rendered on the browser has some HTML and CSS. Let's prove it!
+
+### Intro to Chrome Dev Tools
+
+Google Chrome provides tools for developers to inspect the rendered code of a website or web app with its Chrome Dev Tools.
+
+Although Chrome Dev Tools have a huge amount of functionality, for this week, we will focus on using them to observe code.
+
+On any page rendered with Google Chrome, you can open the Chrome Dev Tools to inspect its innards. Let's do it on _this literal page_. Right click on this website and find the option "Inspect". Alternatively, you can use the menu path View > Developer > Developer Tools, or the keyboard shortcut `cmd + opt + i`.
+
+![intro to dev tools](imgs/intro_to_dev_tools.png)
+
+A separate pane should show up. You can configure how this pane shows up (on the side, on the top or bottom, or on a separate window). However, the important thing is that you can see that the elements that make up this page is all HTML.
+
+Try inspecting the code on some of these websites!
+
+- Some websites have very "simple"-looking code for a very effective web page... http://nicole.pizza/
+- Some websites have a mix of JavaScript... https://www.omayeli.com/
+- Some have unrealistically complex CSS... http://diana-adrianne.com/purecss-francine/
+- Huge, complex web apps (dynamic sites) are mostly JavaScript, and actually some are even very self-aware about Chrome Dev Tools! https://www.facebook.com/
+
+We will absolutely get deeper into these tools soon enough, but for now, we'll use it to prove to ourselves that we can see _something_.
+
 ## 🔑 Key Takeaway
 
 There's a lot to web development and web!