step 1 updates

package.json

@@ -71,4 +71,4 @@
     "redux-starter-kit": "^0.4.3",
     "redux-thunk": "^2.3.0"
   }
-}
+}

step1-01/css-demo/README.md

@@ -41,7 +41,7 @@ selector2 {
 
 Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296):
 
-<img src="../../assets/css-syntax.png"/>
+<img src="https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/css-syntax.png"/>
 
 Selectors can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements.
 
@@ -77,6 +77,12 @@ span {
   color: #004578;
 }
 
+/* Sibling selector */
+a ~ a {
+  /* Changing elements from inline to block */
+  display: block;
+}
+
 /* Targeting a class name  */
 .tiles {
   display: flex;
@@ -104,7 +110,7 @@ span {
 }
 
 /* Qualified selector */
-div.links {
+div.important-links {
   background: #004578;
 }
 

step1-01/css-demo/css-demo-final.css

@@ -27,6 +27,12 @@ span {
   color: #004578;
 }
 
+/* Sibling selector */
+a ~ a {
+  /* Changing elements from inline to block */
+  display: block;
+}
+
 /* Targeting a class name  */
 .tiles {
   display: flex;
@@ -54,7 +60,7 @@ span {
 }
 
 /* Qualified selector */
-div.links {
+div.important-links {
   background: #004578;
 }
 
@@ -68,12 +74,6 @@ a:hover {
   color: #ccc;
 }
 
-/* Sibling selector */
-a ~ a {
-  /* Changing elements from inline to block */
-  display: block;
-}
-
 /* Positional pseudo-selector  */
 .tiles > div:last-child {
   /* overrides margin-right but leaves other margins alone */

step1-01/css-demo/css-demo-final.html

@@ -6,7 +6,7 @@
     <div>
       <h1>This is my <span>Title</span></h1>
       <div class="tiles">
-        <div class="links">
+        <div class="important-links">
           <h2>Important Links</h2>
           <a href="#">We're Awesome</a>
           <a href="#">Learn More</a>

step1-01/css-demo/css-demo.html

@@ -6,7 +6,7 @@
     <div>
       <h1>This is my <span>Title</span></h1>
       <div class="tiles">
-        <div class="links">
+        <div class="important-links">
           <h2>Important Links</h2>
           <a href="#">We're Awesome</a>
           <a href="#">Learn More</a>

step1-01/html-demo/README.md

@@ -56,6 +56,8 @@ To learn more about each element, click on the element names below.
 - [`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
 
+> We used to use tables to lay out applications. Each cell would be filled with slices of images from Photoshop or Fireworks. Rounded corners were created by elaborate table tricks
+
 ### [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
@@ -71,7 +73,6 @@ To learn more about each element, click on the element names below.
   - `radio`
   - `submit`
 
-
 ## Next Step
 
 [CSS Demo](../css-demo)

step1-01/html-demo/html-demo.html

@@ -14,6 +14,7 @@
     <section>
       <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Metadata</a></h2>
       <pre>
+  &lt;html&gt;
     &lt;head&gt;
       &lt;title&gt;Intro to HTML&lt;/title&gt;
       &lt;link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot; /&gt;
@@ -24,6 +25,7 @@
         }
       &lt;/style&gt;
     &lt;/head&gt;
+  &lt;/html&gt;
       </pre>
     </section>
     <hr />
@@ -46,7 +48,9 @@
           <h2>My Blog H2 inside Main</h2>
           <article>
             <header><h3>Blog Title 1 (H3 in Article Header)</h3></header>
-            <aside><p>Aside: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum ultricies elit eget luctus.</p></aside>
+            <aside>
+              <p>Aside: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum ultricies elit eget luctus.</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!
@@ -107,13 +111,23 @@
       <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>
+
+      <pre>
+        // But actual code still needs to be escaped
+        
+        &amp;lt;ul&amp;gt;
+          &amp;lt;li&amp;gt;Unordered&amp;lt;/li&amp;gt;
+          &amp;lt;li&amp;gt;list&amp;lt;/li&amp;gt;
+          &amp;lt;li&amp;gt;items&amp;lt;/li&amp;gt;
+        &amp;lt;/ul&amp;gt;
+      </pre>
     </section>
     <hr />
     <section>
@@ -123,7 +137,8 @@
 
       <h3>Anchor tag, br and span</h3>
 
-      <a target="_blank" href="https://example.com"> Website <span style="color: red">address in span tag</span> </a><br />
+      <a target="_blank" href="https://example.com"> Website <span style="color: red">address in span tag</span> </a> (&lt;br&gt; tag here)
+      <br />
       <a target="_blank" href="mailto:m.bluth@example.com">Email</a> (no &lt;br&gt;) <a target="_blank" href="tel:+123456789">Phone</a
       ><br />
 
@@ -233,5 +248,6 @@
         </div>
       </form>
     </section>
+    <a href="../css-demo/css-demo.html">CSS Demo</a>
   </body>
 </html>