diff --git a/index.html b/index.html
index d855a4e..bf2c180 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <div style="display: inline-flex; flex-direction: column">
   <h2>Day 1</h2>
+  <a href="/step1-00/">Step 0</a>
   <a href="/step1-01/">Step 1</a>
   <a href="/step1-02/">Step 2</a>
   <a href="/step1-03/">Step 3</a>
diff --git a/step1-00/fabric.jpg b/step1-00/fabric.jpg
new file mode 100644
index 0000000..27722a2
Binary files /dev/null and b/step1-00/fabric.jpg differ
diff --git a/step1-00/index.html b/step1-00/index.html
new file mode 100644
index 0000000..6958a0b
--- /dev/null
+++ b/step1-00/index.html
@@ -0,0 +1,127 @@
+<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>
+          <ol>
+            <li><a href="page1">About Me</a></li>
+            <li><a href="page2">Contact Me</a></li>
+          </ol>
+        </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">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>
+  </body>
+</html>
diff --git a/step1-00/style.css b/step1-00/style.css
new file mode 100644
index 0000000..8c97104
--- /dev/null
+++ b/step1-00/style.css
@@ -0,0 +1,6 @@
+aside {
+  float: right;
+  width: 33%;
+  padding: 10px;
+  background: #eee;
+}
