Add a basic introduction to Web Console / Developer Tools to foreshad…

…ow its use in the styles chapter (addresses Issue #14)
OpenTechSchool · Nov 16, 2013 · ed086e2 · timaschew · Nov 20, 2013 · projectgus
1 parent e76f293
commit ed086e2
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/core/structure.md b/core/structure.md
@@ -213,7 +213,7 @@ favourite image on the web and save it in the same directory as your HTML
 file (right-click the image in your browser and "Save Image...").
 
 If you don't have a picture in mind then
-[here's a page with a photo of some kittens that you can use](http://www.flickr.com/photos/nengard/67501122/sizes/z/)
+[here's a page with a photo of some kittens that you can use](http://www.flickr.com/photos/nengard/67501122/sizes/s/)
 (Cute cats on the internet? Egad!)
 
 After you have your image, you can include it in your HTML page by using an 
@@ -260,15 +260,19 @@ So far, our entire document might look like this:
         </head>
         <body>
             <h1>I'm the title.</h1>
-            <p>And I'm a paragraph! With some kittens:
-            <img src="kittens.jpg" alt="All the kittens are shown here">
+            <p>And I'm a paragraph!</p>
+            <p>
+                 <img src="kittens.jpg" alt="All the kittens are shown here">
             </p>
             <h3>This is a sub-heading...</h3>
             <p>Well now we're just blathering on.</p>
         </body>
     </html>
 
 
+Notice that the kitten image is part of it's own paragraph here, so it is
+shown by itself in the browser.
+
 Hopefully the document in your file looks similar, but not exactly the same. 
 You might have changed some of the text... does it all work in your browser?
 
@@ -283,10 +287,48 @@ using Word? How long might it take? That's the power of manual control that
 HTML (and CSS, and Javascript) gives to the web and web developers. You can 
 learn it too!
 
+## Browser Console
+
+The web browsers [Firefox](https://www.mozilla.org/en-US/firefox/new/) and 
+[Google Chrome](https://www.google.com/chrome) both include a browser console 
+tool which can help you create web pages.
+
+If you're not using either of these browsers you may want to download one 
+(they're both free) and use it for some of the exercises in this workshop.
+
+In either browser, you can right-click any element on your page and choose 
+"*Inspect Element*" to show it in the console. It's called the "Inspector" 
+tab of the "Web Console" in Firefox and the "Elements" tab of the "Developer 
+Tools" in Chrome, but they're both basically the same. This gives you a display of 
+how the browser sees your page.
+
+Try it with the page you've created so far, right-click something on your page 
+and choose "*Inspect Element*":
+
+The console that pops should look like this (this is FireFox, Chrome 
+is different but similar):
+
+![Example of the FireFox Web Console](../images/webconsole.png)
+
+You can also click the little triangle arrows next to elements in the web console 
+to look inside the structure of the HTML page, and click on other HTML elements 
+to see them highlighted in the browser view.
+
+Click around the HTML elements in the console to get a look at how
+the browser processes the HTML page you created. Don't be afraid to explore. The 
+console has a lot of features so don't worry if not everything makes sense.
+
+When you're done, you can **close the console** by clicking the "X" on the 
+far-right end.
+
+More information on working with the console can be found in the 
+[Firefox documentation](https://developer.mozilla.org/en-US/docs/Tools/Web_Console?redirectlocale=en-US&redirectslug=Using_the_Web_Console#Opening_the_Web_Console) 
+and also the [Chrome documentation](https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console).
+
 ## What's next?
 
 You may be thinking at this stage that your HTML page looks pretty bland. 
-How do I spice it up a little?
+How can you spice it up a little?
 
 Read on to find out in the next section, 
 [your first styled Hello World!](style.html).
diff --git a/core/style.md b/core/style.md
@@ -38,10 +38,12 @@ to the HTML document, same as the "src" for the `<img>` tag in the previous
 chapter.
 
 Once you link your external CSS file, open your HTML file in the
-browser, open your console and go to the Network tab.
-You should see the path of your CSS file and under the STATUS column 
-see a *200 OK* response.
-That means your file is read from your browser and linked to your HTML document
+browser, open your console (see Browser Console in the previous chapter) then 
+click on the Network tab. When you reload the page, the Network tab will show 
+all the files that were loaded as part of your page. You should see the path of 
+your CSS file and under the STATUS column see a *200 OK* response.
+
+That means your file is read from your browser and linked to your HTML document 
 in the right way.
 Now we are ready to work with it.
 

diff --git a/images/webconsole.png b/images/webconsole.png