diff --git a/step1-00/css-demo.css b/step1-00/css-demo.css
new file mode 100644
index 0000000..62b4a88
--- /dev/null
+++ b/step1-00/css-demo.css
@@ -0,0 +1,49 @@
+h1 {
+  padding: 10px;
+  margin-bottom: 15px;
+  margin-top: 15px;
+  color: black;
+  background: #ddd;
+  border: 1px solid #ababab;
+}
+
+a {
+  color: white;
+}
+a:hover {
+  color: #ccc;
+}
+
+.tiles {
+  display: flex;
+}
+
+.tiles img {
+  display: block;
+  margin: 0 auto;
+  max-width: 75%;
+}
+
+.tiles > div {
+  background: rgb(10, 10, 10);
+  color: white;
+  flex-basis: 100%;
+  padding: 10px 20px 15px;
+  margin-right: 20px;
+}
+
+.tiles > div:last-child {
+  margin-right: 0;
+}
+
+a + a {
+  display: block;
+}
+
+#contact-form > * {
+  display: block;
+}
+
+input[type='submit'] {
+  margin-top: 10px;
+}
diff --git a/step1-00/css-demo.html b/step1-00/css-demo.html
new file mode 100644
index 0000000..99ecc74
--- /dev/null
+++ b/step1-00/css-demo.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="./css-demo.css" />
+  </head>
+  <body>
+    <div>
+      <h1>This is my <span>Title</span></h1>
+      <div class="tiles">
+        <div>
+          <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" alt="fabric logo" />
+        </div>
+        <div>
+          <h2>Contact Us</h2>
+          <form id="contact-form">
+            <label>Email</label><input type="email" />
+            <input value="Submit" type="submit" />
+          </form>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/step1-00/html-demo.html b/step1-00/html-demo.html
new file mode 100644
index 0000000..c15b04d
--- /dev/null
+++ b/step1-00/html-demo.html
@@ -0,0 +1,229 @@
+<html>
+  <head>
+    <title>Intro to HTML</title>
+    <link rel="stylesheet" href="./style.css" />
+    <style>
+      a {
+        color: #333333;
+      }
+    </style>
+  </head>
+
+  <body>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML Element Reference</a>
+
+    <h2><a 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>
+
+    <section>
+      <header>
+        <h1>My Website</h1>
+        <nav>
+          <ul>
+            <li><a href="page1">About Me</a></li>
+            <li><a href="page2">Contact Me</a></li>
+          </ul>
+        </nav>
+      </header>
+
+      <main>
+        <h2>My Blog</h2>
+        <article>
+          <header><h3>Blog Title 1</h3></header>
+          <aside><p>Aside</p></aside>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
+            consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga!
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
+            consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga!
+          </p>
+        </article>
+        <article>
+          <header><h3>Blog Title 2</h3></header>
+          <aside><p>Aside</p></aside>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus debitis cupiditate sunt possimus praesentium eligendi
+            iure, ratione consequuntur, facere ex dolores beatae nostrum cumque voluptatum doloremque id amet. Magnam, rem.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
+            consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga!
+          </p>
+        </article>
+      </main>
+      <footer>Copyright 2019</footer>
+    </section>
+    <section>
+      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Block Text content</a></h2>
+
+      <h3>Blockquote</h3>
+
+      <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="./fabric.jpg" alt="Fabric Logo" />
+        <figcaption>The Fabric Logo</figcaption>
+      </figure>
+
+      <h3>Ordered List</h3>
+      <ol>
+        <li>Ordered</li>
+        <li>list</li>
+        <li>items</li>
+      </ol>
+
+      <h3>Unordered List</h3>
+      <ul>
+        <li>Unordered</li>
+        <li>list</li>
+        <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
+        // But actual code still needs to be escaped
+        &lt;ul&gt;
+          &lt;li&gt;Unordered&lt;/li&gt;
+          &lt;li&gt;list&lt;/li&gt;
+          &lt;li&gt;items&lt;/li&gt;
+        &lt;/ul&gt;
+      </pre>
+    </section>
+    <section>
+      <h2><a 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 />
+
+      <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>
+    <section>
+      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content">Table content</a></h2>
+
+      <table border="1">
+        <thead>
+          <tr>
+            <th colspan="2">The table header</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>The table body</td>
+            <td>with two columns</td>
+          </tr>
+          <tr>
+            <td>Another table row</td>
+            <td>with two columns</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <section>
+      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Forms</a></h2>
+
+      <form action="" method="get" class="form-example">
+        <div>
+          <label for="name">Enter your name: </label>
+          <input type="text" name="name" id="name" required />
+        </div>
+        <div>
+          <div>
+            <input type="checkbox" id="option1" name="option1" checked />
+            <label for="option1">Option1</label>
+          </div>
+
+          <div>
+            <input type="checkbox" id="option2" name="option2" />
+            <label for="option2">Option2</label>
+          </div>
+        </div>
+
+        <div>
+          <input type="color" id="color1" name="color1" value="#e66465" />
+          <label for="color1">Color1</label>
+        </div>
+
+        <div>
+          <input type="color" id="color2" name="color2" value="#f6b73c" />
+          <label for="color2">Color2</label>
+        </div>
+        <div>
+          <label for="start">Start date:</label>
+
+          <input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
+        </div>
+        <div>
+          <div>
+            <input type="radio" id="Radio1" name="radios" value="Radio1" checked />
+            <label for="Radio1">Radio1</label>
+          </div>
+
+          <div>
+            <input type="radio" id="radio2" name="radios" value="radio2" />
+            <label for="radio2">Radio2</label>
+          </div>
+
+          <div>
+            <input type="radio" id="radio3" name="radios" value="radio3" />
+            <label for="radio3">Radio3</label>
+          </div>
+        </div>
+        <div>
+          <label for="pet-select">Choose a pet:</label>
+
+          <select id="pet-select">
+            <option value="">--Please choose an option--</option>
+            <option value="dog">Dog</option>
+            <option value="cat">Cat</option>
+            <option value="hamster">Hamster</option>
+            <option value="parrot">Parrot</option>
+            <option value="spider">Spider</option>
+            <option value="goldfish">Goldfish</option>
+          </select>
+        </div>
+
+        <div>
+          <input type="submit" value="Subscribe!" />
+        </div>
+      </form>
+    </section>
+  </body>
+</html>
diff --git a/step1-00/index.html b/step1-00/index.html
index c15b04d..be6fabc 100644
--- a/step1-00/index.html
+++ b/step1-00/index.html
@@ -1,229 +1,2 @@
-<html>
-  <head>
-    <title>Intro to HTML</title>
-    <link rel="stylesheet" href="./style.css" />
-    <style>
-      a {
-        color: #333333;
-      }
-    </style>
-  </head>
-
-  <body>
-    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML Element Reference</a>
-
-    <h2><a 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>
-
-    <section>
-      <header>
-        <h1>My Website</h1>
-        <nav>
-          <ul>
-            <li><a href="page1">About Me</a></li>
-            <li><a href="page2">Contact Me</a></li>
-          </ul>
-        </nav>
-      </header>
-
-      <main>
-        <h2>My Blog</h2>
-        <article>
-          <header><h3>Blog Title 1</h3></header>
-          <aside><p>Aside</p></aside>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
-            consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga!
-          </p>
-
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
-            consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga!
-          </p>
-        </article>
-        <article>
-          <header><h3>Blog Title 2</h3></header>
-          <aside><p>Aside</p></aside>
-
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus debitis cupiditate sunt possimus praesentium eligendi
-            iure, ratione consequuntur, facere ex dolores beatae nostrum cumque voluptatum doloremque id amet. Magnam, rem.
-          </p>
-
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
-            consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga!
-          </p>
-        </article>
-      </main>
-      <footer>Copyright 2019</footer>
-    </section>
-    <section>
-      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Block Text content</a></h2>
-
-      <h3>Blockquote</h3>
-
-      <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="./fabric.jpg" alt="Fabric Logo" />
-        <figcaption>The Fabric Logo</figcaption>
-      </figure>
-
-      <h3>Ordered List</h3>
-      <ol>
-        <li>Ordered</li>
-        <li>list</li>
-        <li>items</li>
-      </ol>
-
-      <h3>Unordered List</h3>
-      <ul>
-        <li>Unordered</li>
-        <li>list</li>
-        <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
-        // But actual code still needs to be escaped
-        &lt;ul&gt;
-          &lt;li&gt;Unordered&lt;/li&gt;
-          &lt;li&gt;list&lt;/li&gt;
-          &lt;li&gt;items&lt;/li&gt;
-        &lt;/ul&gt;
-      </pre>
-    </section>
-    <section>
-      <h2><a 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 />
-
-      <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>
-    <section>
-      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content">Table content</a></h2>
-
-      <table border="1">
-        <thead>
-          <tr>
-            <th colspan="2">The table header</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>The table body</td>
-            <td>with two columns</td>
-          </tr>
-          <tr>
-            <td>Another table row</td>
-            <td>with two columns</td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
-    <section>
-      <h2><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Forms</a></h2>
-
-      <form action="" method="get" class="form-example">
-        <div>
-          <label for="name">Enter your name: </label>
-          <input type="text" name="name" id="name" required />
-        </div>
-        <div>
-          <div>
-            <input type="checkbox" id="option1" name="option1" checked />
-            <label for="option1">Option1</label>
-          </div>
-
-          <div>
-            <input type="checkbox" id="option2" name="option2" />
-            <label for="option2">Option2</label>
-          </div>
-        </div>
-
-        <div>
-          <input type="color" id="color1" name="color1" value="#e66465" />
-          <label for="color1">Color1</label>
-        </div>
-
-        <div>
-          <input type="color" id="color2" name="color2" value="#f6b73c" />
-          <label for="color2">Color2</label>
-        </div>
-        <div>
-          <label for="start">Start date:</label>
-
-          <input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
-        </div>
-        <div>
-          <div>
-            <input type="radio" id="Radio1" name="radios" value="Radio1" checked />
-            <label for="Radio1">Radio1</label>
-          </div>
-
-          <div>
-            <input type="radio" id="radio2" name="radios" value="radio2" />
-            <label for="radio2">Radio2</label>
-          </div>
-
-          <div>
-            <input type="radio" id="radio3" name="radios" value="radio3" />
-            <label for="radio3">Radio3</label>
-          </div>
-        </div>
-        <div>
-          <label for="pet-select">Choose a pet:</label>
-
-          <select id="pet-select">
-            <option value="">--Please choose an option--</option>
-            <option value="dog">Dog</option>
-            <option value="cat">Cat</option>
-            <option value="hamster">Hamster</option>
-            <option value="parrot">Parrot</option>
-            <option value="spider">Spider</option>
-            <option value="goldfish">Goldfish</option>
-          </select>
-        </div>
-
-        <div>
-          <input type="submit" value="Subscribe!" />
-        </div>
-      </form>
-    </section>
-  </body>
-</html>
+<a href="./html-demo.html">HTML Demo</a><br />
+<a href="./css-demo.html">CSS Demo</a>

The table header
The table body	with two columns
Another table row	with two columns