Merge pull request #122 from charlieegan3/gh-pages

HTML Tutorial Improvments

Author: jkbits1

html/lesson3/assets/images/box-model.png

@@ -10,7 +10,7 @@
       <img src="assets/images/ada_lovelace.jpg" height="60px"/>
     </div>
     <div class="title">
-      <h2> Hi, I'm Ada Lovelace</h2>
+      <h2>Hi, I'm Ada Lovelace</h2>
     </div>
     </header>
 

html/lesson3/assets/images/padding_and_margin-bottom.png

@@ -101,7 +101,7 @@ Add the heading `<h2>`, underneath the `<div>` wrapping the image, within the `<
 
 ```html
 <div>
-  <h2> Hi, I'm Ada Lovelace</h2>
+  <h2>Hi, I'm Ada Lovelace</h2>
 </div>
 ```
 
@@ -135,7 +135,7 @@ Make the `div` element surrounding the heading inline. Start by adding a class `
 
 ```html
 <div class="title">
- <h2> Hi, I'm Ada Lovelace</h2>
+ <h2>Hi, I'm Ada Lovelace</h2>
 </div>
 ```
 and then the relevant CSS
@@ -168,22 +168,19 @@ and make the picture a bit smaller
 
 ### What is the box model?
 
-An element can be visualised as a box. The box model tells browsers how the element and its attributes relate to each other.
+An element can be visualised as a box. The box model is a way of describing the stacking of spatial properties of an element, those which effect it's size &amp; spacing on the page. These are: `padding`, `margin`, `border` as well as `height` and `width`.
 
-Characteristics that define the box model are `padding`, `margin`, `border`, `height` and `width`.
+**<span style="color: rgb(130,171,182);">blue</span>** represents the values for `height` and `width`. Typically these values are set implicitly based on the content.
 
-**<span style="color: LightSkyBlue;">blue</span>** is where `height` and `width` are defined. These properties don't always need to be set. By default they will use relevant sizing dimensions based on the inner content.
+**<span style="color: rgb(185,197,124);">green</span>** represents the `padding` &mdash; the space inside the `border`. `padding` adds to the total size of the box. So setting `padding-left: 10px;` and `width: 20px;` would make the element **30px** wide on the page.
 
-**<span style="color: mediumpurple;">purple</span>** shows the `padding` &mdash; the space between the content and the `border`. The padding also adds to the total width of the box. So if you set `padding: 10px;` and `width: 20px;` your element will be **30px** long.
+**<span style="color: rgb(244,211,139);">yellow</span>** is the `border` &mdash; the edge around the content and `padding`. It can be styled in various ways and represents the outer most visible part of an element.
 
-**black** is the `border` &mdash; the edge around the box. Its _thickness_, _style_ and _color_ can be defined.
+**<span style="color: rgb(239,195,144);">orange</span>** is the `margin` &mdash; the spacing outside the border. This separates the element from other elements on the page.
 
-**<span style="color: gold;'">yellow</span>** is the `margin` &mdash; the transparent area around the box. This separates it from other elements.
-
-_only the bottom margin is visible in our example. `padding`, `margin` and `border` can be defined for any or all sides of the box._
-
-![](assets/images/padding_and_margin-bottom.png)
+Note: `padding`, `margin` and `border` can be applied to any combination of sides, below all three are applied in equal measure to all four sides around the content.
 
+![](assets/images/box-model.png)
 
 ### Styling the header
 
@@ -221,7 +218,7 @@ Let's add some content! Add the following inside the `div` in the html file
 
 ```html
 <div>
-  <b> Me on the internet</b>
+  <b>Me on the internet</b>
   <ul>
    <li><a href="https://www.facebook.com/augusta.ada.lovelace">facebook</a> </li>
    <li><a href="http://en.wikipedia.org/wiki/Ada_Lovelace">wikipedia</a> </li>
@@ -235,7 +232,7 @@ Add a class `sidebar` to the div we just defined. This is so that we can change
 
 ```html
 <div class="sidebar">
-  <b> Me on the internet</b>
+  <b>Me on the internet</b>
   ...
 ```
 
@@ -293,7 +290,7 @@ Remove the list bullets and change the default margin and padding of the **u**no
 
 ```css
 ul.social-media {
-  list-style:none;
+  list-style: none;
   margin-left: 10px;
   padding-left: 20px;
 }
@@ -333,7 +330,7 @@ We only want links that are within the list to be affected. So we will specifica
 ```css
 .social-media li a {
   color: #4c4066;
-  text-decoration:none;
+  text-decoration: none;
   text-shadow: 1px 0px #ffffff;
   border-left: 7px solid #fdcc38;
   padding-left: 10px;
@@ -358,7 +355,7 @@ The sidebar is now almost perfect. Tweak a couple of other properties so that th
 
 ```css
 .sidebar b {
-  margin-left:36px;
+  margin-left: 36px;
   color: #4c4066;
   font-size: 19px;
 }

html/lesson3/example.html

@@ -14,10 +14,10 @@ <h1> Grace Hopper</h1>
     </div>
     <div id="resources">
       <ul>
-        <li> <a href="http://www.personal.psu.edu/djd5202/ass6.html">Computer Scientist</a></li>
-        <li> <a href="http://www.youtube.com/watch?v=1-vcErOPofQ">Grace Hopper on Letterman</a></li>
-        <li> <a href="http://en.wikipedia.org/wiki/Grace_Hopper">Wikipedia</a></li>
-        <li> <a href="http://en.wikiquote.org/wiki/Grace_Hopper">Wikiquote</a></li>
+        <li><a href="http://www.personal.psu.edu/djd5202/ass6.html">Computer Scientist</a></li>
+        <li><a href="http://www.youtube.com/watch?v=1-vcErOPofQ">Grace Hopper on Letterman</a></li>
+        <li><a href="http://en.wikipedia.org/wiki/Grace_Hopper">Wikipedia</a></li>
+        <li><a href="http://en.wikiquote.org/wiki/Grace_Hopper">Wikiquote</a></li>
       </ul>
     </div>
     </header>

html/lesson3/tutorial.md

@@ -70,8 +70,8 @@ Before styling the header, reset the default styling of the page. This ensures c
 
 ```css
 body {
-  padding:0;
-  margin:0;
+  padding: 0;
+  margin: 0;
 }
 ```
 
@@ -159,7 +159,7 @@ Color the `<h1>` so it stands out and is not the same as the other text on the p
 
 ## Adding a toolbar
 
-Add some of the resources we used to find out more information about Grace. 
+Add some of the resources we used to find out more information about Grace.
 This should be placed before the header closing tag.
 
 ```html
@@ -181,7 +181,7 @@ First let's remove the bullet from the list of links
 
 ```css
 #resources ul {
-  list-style:none;
+  list-style: none;
   margin: 0;
   padding: 0;
 }
@@ -459,7 +459,7 @@ Extend `header` and set its position to fixed
 position: fixed;
 ```
 
-> Refresh the page. Notice how the header size has now collapsed to the size of its content? 
+> Refresh the page. Notice how the header size has now collapsed to the size of its content?
 
 Fix this by setting the width
 

html/lesson4/example.html

@@ -23,7 +23,7 @@ <h1>Anita Borg</h1>
           <ul>
             <li>1995 Augusta Ada Lovelace Award</li>
             <li>1995 EFF Pioneer Award</li>
-            <li> 1996 Presidential Commission on the Advancement of Women and Minorities in Science, Engineering, and Technology
+            <li>1996 Presidential Commission on the Advancement of Women and Minorities in Science, Engineering, and Technology
             </li>
             <li>2002 8th Annual Heinz Award for Technology, the Economy and Employment</li>
             <li>2002 Honorary Doctor of Science and Technology</li>
@@ -63,7 +63,7 @@ <h2>
           </p>
 
           <p>
-          Now for a bit of advice: Don't underestimate yourself, but learn to know yourself. Learn to understand your strengths and believe in yourself. Be rationally optimistic. Optimism is a wonderful thing, it gets you where you're going. If you aren't optimistic that you will accomplish something, you never go after it. Pessimism is just plain self-defeating. Fantasize about the future and what you can do about it. We're in this fabulous bunch of fields where there are all sorts of futuristic things to be doing. The reality is almost outstripping some of our fantasies at this point. Keep an active fantasy life about what you can do and what your possibilities are. Have principles and work towards them, but be patient with yourself when you can't change the whole world. You can't do it all by yourself. So seek out other women in places like this. Seek out like-minded souls to talk to when you're in the middle of a struggle. And mentor others. The same questions that you have today are going to come up with young women in twenty years when you are up here on this stage. Be patient and keep answering them and keep answering them and keep helping people. 
+          Now for a bit of advice: Don't underestimate yourself, but learn to know yourself. Learn to understand your strengths and believe in yourself. Be rationally optimistic. Optimism is a wonderful thing, it gets you where you're going. If you aren't optimistic that you will accomplish something, you never go after it. Pessimism is just plain self-defeating. Fantasize about the future and what you can do about it. We're in this fabulous bunch of fields where there are all sorts of futuristic things to be doing. The reality is almost outstripping some of our fantasies at this point. Keep an active fantasy life about what you can do and what your possibilities are. Have principles and work towards them, but be patient with yourself when you can't change the whole world. You can't do it all by yourself. So seek out other women in places like this. Seek out like-minded souls to talk to when you're in the middle of a struggle. And mentor others. The same questions that you have today are going to come up with young women in twenty years when you are up here on this stage. Be patient and keep answering them and keep answering them and keep helping people.
           </p>
         </div>
       </div>

html/lesson4/tutorial.md

@@ -30,7 +30,7 @@
     </aside>
 
     <article id="women-have-always-coded">
-    <h1> Women have always coded </h1>
+    <h1>Women have always coded </h1>
     <p>
     Programming has always been women's work.
     </p>
@@ -53,7 +53,7 @@ <h1> Women have always coded </h1>
     <h1>Women Programmers</h1>
 
     <section id="ada">
-    <h3> Ada Lovelace</h3>
+    <h3>Ada Lovelace</h3>
     <figure>
     <img src="assets/images/ada_lovelace.jpg"/>
     <figcaption>
@@ -64,7 +64,7 @@ <h3> Ada Lovelace</h3>
     </section>
 
     <section id="grace">
-    <h3> Grace Hopper</h3>
+    <h3>Grace Hopper</h3>
     <figure>
     <img src="assets/images/grace.jpg"/>
     <figcaption>
@@ -75,7 +75,7 @@ <h3> Grace Hopper</h3>
     </section>
 
     <section id="anita">
-    <h3> Anita Borg</h3>
+    <h3>Anita Borg</h3>
     <figure>
     <img src="assets/images/anita.jpg" width='230px'/>
     <figcaption>