moving nav to top level

step1-01/css-demo/README.md

@@ -20,17 +20,32 @@ CSS is always applied in `property: value` pairs, like `background: blue;` and a
 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>`
-
+   - `<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" />`
+   - `<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. Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
+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 "[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)", and they are just as important to learn as the properties/values themselves. When selectors are combined with CSS styles, we call this a ruleset.
+
+CSS rulesets take on the following form:
+
+```css
+selector1,
+selector2 {
+  property1: value1;
+  property2: value2;
+}
+```
+
+Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296)
+
+<img src="../../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.
+
+Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
 
 ```css
 /* Targeting the entire page */

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

@@ -1,63 +0,0 @@
-/* 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-bottom: 15px;
-  margin-top: 15px;
-  padding: 10px;
-  border: 1px solid #ddd;
-} */
-
-/* span {
-  color: #004578;
-} */
-
-/* .tiles {
-  display: flex;
-} */
-
-/* .tiles img {
-  width: 100%;
-} */
-
-/* .tiles > div {
-  background: rgb(10, 10, 10);
-  color: white;
-  flex-basis: 100%;
-  padding: 10px 20px 15px;
-  margin: 10px 20px 10px 0;
-} */
-
-/* div.links {
-  background: #004578;
-} */
-
-/* a {
-  color: white;
-} */
-
-/* a:hover {
-  color: #ccc;
-} */
-
-/* a ~ a {
-  display: block;
-} */
-
-/* .tiles > div:last-child {
-  margin-right: 0;
-} */
-
-/* #contact-form {
-  display: flex;
-  flex-direction: column;
-} */
-
-/* input[type='submit'] {
-  margin-top: 10px;
-} */

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

@@ -22,7 +22,7 @@
 
       <div>
         <header>
-          <h1>My Website</h1>
+          <h1>My Website H1 inside Header</h1>
           <nav>
             <ul>
               <li><a href="page1">About Me</a></li>
@@ -32,9 +32,9 @@
         </header>
 
         <main>
-          <h2>My Blog</h2>
+          <h2>My Blog H2 inside Main</h2>
           <article>
-            <header><h3>Blog Title 1</h3></header>
+            <header><h3>Blog Title 1 H3 in Article Header</h3></header>
             <aside><p>Aside</p></aside>
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
@@ -48,7 +48,7 @@
             </p>
           </article>
         </main>
-        <footer>Copyright 2019</footer>
+        <footer>Copyright 2019 in the Footer</footer>
       </div>
     </section>
     <hr />
@@ -112,15 +112,18 @@
 
       <h3>Anchor tag, br and span</h3>
 
-      <a target="_blank" href="https://example.com"> Website <span style="color: red">address</span> </a><br />
-      <a target="_blank" href="mailto:m.bluth@example.com">Email</a><br />
-      <a target="_blank" href="tel:+123456789">Phone</a><br />
+      <a target="_blank" href="https://example.com"> Website <span style="color: red">address in span tag</span> </a><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 />
 
       <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>
 
+      <h3>Image tag</h3>
       <div>
         <img src="../../assets/fabric.jpg" width="100" />
+        <img src="../../assets/fabric.jpg" width="50" />
+        <img src="../../assets/fabric.jpg" width="150" />
       </div>
     </section>
     <hr />