diff --git a/step1-00/css-demo/css-demo.html b/step1-00/css-demo/css-demo.html
index 6aed91a..295440c 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="./fabric.jpg" width="100" alt="fabric logo" />
+          <img src="../assets/fabric.jpg" width="100" alt="fabric logo" />
         </div>
         <div>
           <h2>Contact Us</h2>
diff --git a/step1-00/html-demo/html-demo.html b/step1-00/html-demo/html-demo.html
index 25f19ac..356790f 100644
--- a/step1-00/html-demo/html-demo.html
+++ b/step1-00/html-demo/html-demo.html
@@ -4,17 +4,17 @@
     <link rel="stylesheet" href="./style.css" />
 
     <style>
-      a {
-        color: #333333;
+      hr {
+        margin: 40px;
       }
     </style>
   </head>
 
   <body>
-    <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
+    <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
     <p>head, title, link, style</p>
 
-    <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">Content Sections</a></h2>
+    <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">Content Sections</a></h2>
 
     <section>
       <header>
@@ -59,34 +59,33 @@
       </main>
       <footer>Copyright 2019</footer>
     </section>
+    <hr />
     <section>
-      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Block Text content</a></h2>
+      <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Block Text content</a></h2>
 
-      <h3>Blockquote</h3>
+      <h3>Div</h3>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo et quod odio velit, hic qui autem dolores magni earum ducimus dolorem
+        modi, numquam laborum accusamus adipisci eius excepturi doloremque vero.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum maiores vitae? Architecto amet provident labore error
+        officia accusantium reiciendis, vero perspiciatis. Incidunt numquam enim deserunt, velit earum totam veritatis.
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nobis ex optio, minus in, eum ratione magnam aut distinctio,
+          aliquid libero eaque nihil provident nemo est adipisci repellendus nisi numquam?
+        </div>
+      </div>
 
-      <blockquote cite="https://www.huxley.net/bnw/four.html">
-        <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
-      </blockquote>
-
-      <cite>– Aldous Huxley, Brave New World</cite>
-
-      <h3>Definition List</h3>
-      <dl>
-        <dt>Beast of Bodmin</dt>
-        <dd>A large feline inhabiting Bodmin Moor.</dd>
-
-        <dt>Morgawr</dt>
-        <dd>A sea serpent.</dd>
-
-        <dt>Owlman</dt>
-        <dd>A giant owl-like creature.</dd>
-      </dl>
-
-      <h3>Figure</h3>
-      <figure>
-        <img src="../assets/fabric.jpg" alt="Fabric Logo" />
-        <figcaption>The Fabric Logo</figcaption>
-      </figure>
+      <h3>Paragraph</h3>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel
+        eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit
+        enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non?
+      </p>
 
       <h3>Ordered List</h3>
       <ol>
@@ -102,15 +101,6 @@
         <li>items</li>
       </ul>
 
-      <h3>Paragraph</h3>
-      <p>
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel
-        eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit
-        enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non?
-      </p>
       <h3>Pre</h3>
       <pre>
         // This is a pre tag            --           It respects spacing and tabs
@@ -122,20 +112,24 @@
         &lt;/ul&gt;
       </pre>
     </section>
+    <hr />
     <section>
-      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text elements</a></h2>
+      <h2>
+        <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text elements</a>
+      </h2>
 
       <h3>Anchor tag, br and span</h3>
 
       <a target="_blank" href="https://example.com"> Website <span style="color: red">address</span> </a><br />
-      <a href="mailto:m.bluth@example.com">Email</a><br />
-      <a href="tel:+123456789">Phone</a><br />
+      <a target="_blank" href="mailto:m.bluth@example.com">Email</a><br />
+      <a target="_blank" href="tel:+123456789">Phone</a><br />
 
       <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>
     </section>
+    <hr />
     <section>
-      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content">Table content</a></h2>
+      <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content">Table content</a></h2>
 
       <table border="1">
         <thead>
@@ -155,8 +149,9 @@
         </tbody>
       </table>
     </section>
+    <hr />
     <section>
-      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Forms</a></h2>
+      <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Forms</a></h2>
 
       <form action="" method="get" class="form-example">
         <div>
@@ -224,5 +219,6 @@
         </div>
       </form>
     </section>
+    <hr />
   </body>
 </html>
diff --git a/step1-00/html-demo/style.css b/step1-00/html-demo/style.css
index b1a4247..54da6e3 100644
--- a/step1-00/html-demo/style.css
+++ b/step1-00/html-demo/style.css
@@ -8,3 +8,16 @@ aside {
 form > div {
   margin-bottom: 20px;
 }
+
+h2 a {
+  color: #0078d4;
+  text-decoration: none;
+}
+
+h2 a:hover {
+  text-decoration: underline;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
diff --git a/step1-00/index.html b/step1-00/index.html
index 7764819..8e0bfb1 100644
--- a/step1-00/index.html
+++ b/step1-00/index.html
@@ -10,6 +10,7 @@
         <li class="Tile"><a href="./html-demo/html-demo.html" class="Tile-link">HTML Demo</a></li>
         <li class="Tile"><a href="./css-demo/css-demo.html" class="Tile-link">CSS Demo</a></li>
         <li class="Tile"><a href="./css-demo/css-demo-finished.html" class="Tile-link">CSS Demo Finished</a></li>
+        <li class="Tile"><a href="./js-demo/js-demo.html" class="Tile-link">JS Demo</a></li>
       </ul>
     </div>
   </body>
diff --git a/step1-00/js-demo/js-demo.html b/step1-00/js-demo/js-demo.html
new file mode 100644
index 0000000..ce350c2
--- /dev/null
+++ b/step1-00/js-demo/js-demo.html
@@ -0,0 +1,41 @@
+<html>
+  <head> </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="../assets/fabric.jpg" width="100" alt="fabric logo" />
+        </div>
+        <div>
+          <h2>Contact Us</h2>
+          <div id="contact-form">
+            <label>Email</label><input class="email" type="email" />
+            <input onclick="displayMatches()" class="submit" value="Submit" type="submit" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script>
+    const match = 'a';
+    let matches = 0;
+
+    function displayMatches() {
+      const text = document.querySelector('.email').value;
+      for (let letter of text) {
+        if (letter === match) {
+          matches++;
+        }
+      }
+      document.querySelector('.submit').value = matches + ' matches';
+    }
+  </script>
+</html>
