diff --git a/package-lock.json b/package-lock.json
index 7a58396..2136b74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3608,7 +3608,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3629,12 +3630,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3649,17 +3652,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3776,7 +3782,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3788,6 +3795,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3802,6 +3810,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3809,12 +3818,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3833,6 +3844,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3913,7 +3925,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3925,6 +3938,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4010,7 +4024,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4046,6 +4061,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4065,6 +4081,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4108,12 +4125,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/step1-00/README.md b/step1-00/README.md
index bb715f6..3ce439b 100644
--- a/step1-00/README.md
+++ b/step1-00/README.md
@@ -21,75 +21,3 @@ A simple web page is rendered on the screen via the following steps
 7. Once the browser gets to the bottom of the page it can start rendering, and then load the page
 
 ![MDN Page Load](https://user-images.githubusercontent.com/1434956/53033758-9da8d580-3426-11e9-9ab8-09f42ccab9a8.png)
-
-## HTML Demo
-
-The [HTML demo page](http://localhost:8080/step1-00/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
-
-To learn more about each element, click on the elements below.
-
-### [Document Meta Data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
-
-- [html](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root level element
-- [head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (meta-data) about the page
-- [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown via browser tab
-- [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resource (usually stylesheets)
-- [style](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
-
-### [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning)
-
-- [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
-- [header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
-- [footer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
-- [main](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominent content
-- [nav](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
-- [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
-- [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
-- [h1,h2,h3,h4,h5,h6](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
-
-### [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
-
-- [div](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - A generic block level container
-- [p](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - A paragraph
-- [ol](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
-- [ul](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list
-- [li](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
-- [pre](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
-
-### [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
-
-- [a](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, email
-- [span](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
-- [b](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content
-- [em](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis
-- [i](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text
-- [sub](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
-- [sup](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
-- [code](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
-
-### [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
-
-- [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
-
-### [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
-
-- [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
-- [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
-- [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
-- [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
-- [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) - Table body container
-- [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) - Normal table cell
-
-### [Forms](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
-
-- [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container
-- [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
-- [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
-- [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
-- [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various inputs. Types include:
-  - text
-  - checkbox
-  - color
-  - date
-  - radio
-  - submit
diff --git a/step1-00/css-demo/css-demo-finished.css b/step1-00/css-demo/README.md
similarity index 55%
rename from step1-00/css-demo/css-demo-finished.css
rename to step1-00/css-demo/README.md
index b1b8ca9..920b06e 100644
--- a/step1-00/css-demo/css-demo-finished.css
+++ b/step1-00/css-demo/README.md
@@ -1,5 +1,38 @@
-/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
+## CSS Demo
 
+### CSS Properties
+
+Now that we've gone over adding HTML tags to the page, lets cover adding styles to those tags. We can do quite a lot with styles! We can change:
+
+- Typography
+- Colors
+- Appearance (Corners, Borders, Decorations)
+- Layout
+- Position
+- Inline vs Block
+- Animations
+- and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
+
+CSS is always applied in `property: value` pairs, like `background: blue;` and are terminated with a semi colon.
+
+### Applying CSS to an HTML file
+
+CSS can be applied to HTML tags in three different ways.
+
+1. Inline - Styles are applied directly to the HTML tag
+
+- `<div style="background: blue; color: white;">Hello </div>`
+
+2. Via a `<style>` tag in the HTML page
+3. Through an externally loaded CSS file
+
+- `<link rel="stylesheet" href="./css-demo-finished.css" />`
+
+### Targeting specific HTML tags
+
+Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "selectors", and they are just as important to learn as the properties/values themselves.
+
+```css
 body {
   font: 1.2em sans-serif;
 }
@@ -90,3 +123,4 @@ a ~ a {
 input[type='submit'] {
   margin-top: 10px;
 }
+```
diff --git a/step1-00/css-demo/css-demo-finished.html b/step1-00/css-demo/css-demo-finished.html
deleted file mode 100644
index ff34678..0000000
--- a/step1-00/css-demo/css-demo-finished.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" href="./css-demo-finished.css" />
-  </head>
-  <body>
-    <div>
-      <h1>This is my <span>Title</span></h1>
-      <div class="tiles">
-        <div class="links">
-          <h2>Important Links</h2>
-          <a href="#">We're Awesome</a>
-          <a href="#">Learn More</a>
-          <a href="#">Hire Us</a>
-        </div>
-        <div>
-          <h2>Our Logo</h2>
-          <img src="./fabric.jpg" width="100" alt="fabric logo" />
-        </div>
-        <div>
-          <h2>Contact Us</h2>
-          <div id="contact-form">
-            <label>Email</label><input type="email" />
-            <input value="Submit" type="submit" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/step1-00/css-demo/css-demo.css b/step1-00/css-demo/css-demo.css
index e69de29..6d769bd 100644
--- a/step1-00/css-demo/css-demo.css
+++ b/step1-00/css-demo/css-demo.css
@@ -0,0 +1,88 @@
+/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
+
+body {
+  font: 1.2em sans-serif;
+}
+
+h1 {
+  color: black;
+  background: #ababab;
+
+  /* Margin: property for each side */
+  margin-bottom: 15px;
+  margin-top: 15px;
+
+  /* Shorthand: Padding applies to all sides  */
+  padding: 10px;
+
+  /* 3 digit hex and border shorthand */
+  border: 1px solid #ddd;
+}
+
+/* Overriding inherited styles */
+span {
+  color: #004578;
+}
+
+/* Targeting a class name  */
+.tiles {
+  display: flex;
+}
+
+/* Decendant selector */
+.tiles img {
+  width: 100%;
+}
+
+/* Direct decendant selector */
+.tiles > div {
+  /* rgb colors */
+  background: rgb(10, 10, 10);
+  color: white;
+  flex-basis: 100%;
+  /* Longhand goes clockwise from top
+  10px - all
+  10px 20px - top/bottom left/right
+  10px 20px 15px - top left/right bottom
+  */
+  padding: 10px 20px 15px;
+  margin: 10px 20px 10px 0;
+}
+
+/* Qualified selector */
+div.links {
+  background: #004578;
+}
+
+/* Style inheritance only works for unstyled elements */
+a {
+  color: white;
+}
+
+/* Pseudo hover selector */
+a:hover {
+  color: #ccc;
+}
+
+/* Sibling selectors */
+a ~ a {
+  /* Changing elements from inline to block */
+  display: block;
+}
+
+/* Positional Pseudo Selectors  */
+.tiles > div:last-child {
+  /* overrides margin-right but leaves other margins alone */
+  margin-right: 0;
+}
+
+/* ID selector */
+#contact-form {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Attribute selector */
+input[type='submit'] {
+  margin-top: 10px;
+}
diff --git a/step1-00/css-demo/css-demo.html b/step1-00/css-demo/css-demo.html
index 295440c..6aed91a 100644
--- a/step1-00/css-demo/css-demo.html
+++ b/step1-00/css-demo/css-demo.html
@@ -14,7 +14,7 @@
         </div>
         <div>
           <h2>Our Logo</h2>
-          <img src="../assets/fabric.jpg" width="100" alt="fabric logo" />
+          <img src="./fabric.jpg" width="100" alt="fabric logo" />
         </div>
         <div>
           <h2>Contact Us</h2>
diff --git a/step1-00/html-demo/README.md b/step1-00/html-demo/README.md
new file mode 100644
index 0000000..3f650d0
--- /dev/null
+++ b/step1-00/html-demo/README.md
@@ -0,0 +1,71 @@
+## HTML Demo
+
+The [HTML demo page](http://localhost:8080/step1-00/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
+
+To learn more about each element, click on the elements below.
+
+### [Document Meta Data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
+
+- [html](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root level element
+- [head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (meta-data) about the page
+- [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown via browser tab
+- [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resource (usually stylesheets)
+- [style](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
+
+### [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning)
+
+- [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
+- [header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
+- [footer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
+- [main](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominent content
+- [nav](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
+- [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
+- [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
+- [h1,h2,h3,h4,h5,h6](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
+
+### [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
+
+- [div](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - A generic block level container
+- [p](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - A paragraph
+- [ol](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
+- [ul](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list
+- [li](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
+- [pre](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
+
+### [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
+
+- [a](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, email
+- [span](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
+- [b](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content
+- [em](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis
+- [i](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text
+- [sub](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
+- [sup](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
+- [code](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
+
+### [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
+
+- [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
+
+### [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
+
+- [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
+- [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
+- [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
+- [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
+- [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) - Table body container
+- [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) - Normal table cell
+
+### [Forms](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
+
+- [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container
+- [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
+- [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
+- [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
+- [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various inputs. Types include:
+  - text
+  - checkbox
+  - color
+  - date
+  - radio
+  - submit
diff --git a/step1-00/html-demo/html-demo.html b/step1-00/html-demo/html-demo.html
index 356790f..a337da9 100644
--- a/step1-00/html-demo/html-demo.html
+++ b/step1-00/html-demo/html-demo.html
@@ -126,6 +126,10 @@
 
       <h3>Inline style tags</h3>
       <p><b>b tag</b> <em>em tag</em> <i>i tag</i> <sub>sub tag</sub> <sup>sup tab</sup> <code>code tag</code></p>
+
+      <div>
+        <img src="../assets/fabric.jpg" width="100" />
+      </div>
     </section>
     <hr />
     <section>