diff --git a/package.json b/package.json index f342a97..d290100 100644 --- a/package.json +++ b/package.json @@ -71,4 +71,4 @@ "redux-starter-kit": "^0.4.3", "redux-thunk": "^2.3.0" } -} \ No newline at end of file +} diff --git a/step1-01/css-demo/README.md b/step1-01/css-demo/README.md index 5125850..24f59e0 100644 --- a/step1-01/css-demo/README.md +++ b/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): - + 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; } diff --git a/step1-01/css-demo/css-demo-final.css b/step1-01/css-demo/css-demo-final.css index 68afa64..fbdc5c2 100644 --- a/step1-01/css-demo/css-demo-final.css +++ b/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 */ diff --git a/step1-01/css-demo/css-demo-final.html b/step1-01/css-demo/css-demo-final.html index 32335db..9f17474 100644 --- a/step1-01/css-demo/css-demo-final.html +++ b/step1-01/css-demo/css-demo-final.html @@ -6,7 +6,7 @@

This is my Title

-
+

Important Links

We're Awesome Learn More diff --git a/step1-01/css-demo/css-demo.html b/step1-01/css-demo/css-demo.html index f1ea2c9..bb2a506 100644 --- a/step1-01/css-demo/css-demo.html +++ b/step1-01/css-demo/css-demo.html @@ -6,7 +6,7 @@

This is my Title

-
+

Important Links

We're Awesome Learn More diff --git a/step1-01/html-demo/README.md b/step1-01/html-demo/README.md index 78729f2..e1a5569 100644 --- a/step1-01/html-demo/README.md +++ b/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) diff --git a/step1-01/html-demo/html-demo.html b/step1-01/html-demo/html-demo.html index 0a3f9f6..e02fdc0 100644 --- a/step1-01/html-demo/html-demo.html +++ b/step1-01/html-demo/html-demo.html @@ -14,6 +14,7 @@

Document Metadata

+  <html>
     <head>
       <title>Intro to HTML</title>
       <link rel="stylesheet" href="./style.css" />
@@ -24,6 +25,7 @@
         }
       </style>
     </head>
+  </html>
@@ -46,7 +48,9 @@

My Blog H2 inside Main

Blog Title 1 (H3 in Article Header)

- +

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 @@

Pre

         // This is a pre tag            --           It respects spacing and tabs
-        // But actual code still needs to be escaped
+        
         <ul>
           <li>Unordered</li>
           <li>list</li>
           <li>items</li>
         </ul>
+ + 
+        // 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;
+
@@ -123,7 +137,8 @@

Anchor tag, br and span

- Website address in span tag
+ Website address in span tag (<br> tag here) +
Email (no <br>) Phone
@@ -233,5 +248,6 @@
+ CSS Demo