step 1 updates

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>