Rewrite of Day 1 to use modern React (#294)

* update to hooks

* more class to function

* cleanup

* finish ts final

* update html lesson

* add lessons page

* clean up

* move getters into context

* adding type

* fix bug

* step 5 cleanup

* init final pass

* text tweak

* fix ternaries

* readme cleanup

* fixed root readme

step1-02/demo/README.md

@@ -1,46 +0,0 @@
-# Step 1.2 - Introduction to CSS (Demo)
-
-## CSS properties
-
-Now that we've gone over adding HTML tags to the page, let's cover adding styles to those tags. We can do quite a lot with styles! We can change:
-
-- Typography
-- Colors
-- Appearance (corners, borders, decorations)
-- Layout
-- Position
-- Display format: inline vs block
-- Animations
-- and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
-
-CSS styles are always written in `property: value` pairs (like `background: blue;`) and terminated with a semicolon.
-
-## Applying CSS to an HTML file
-
-CSS can be applied to HTML tags in three different ways.
-
-1. Inline using an HTML tag's `style` attribute
-   - `<div style="background: blue; color: white;">Hello </div>`
-2. Via a `<style>` tag in the HTML page
-3. Through an external CSS file
-   - `<link rel="stylesheet" href="./css-demo-finished.css" />`
-
-## Targeting specific elements
-
-Inline styles are always applied directly to the element you place them on, but `<style>` tags and external CSS files need a way to match elements with their respective style sets. This is done with **[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)**. 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="https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/css-syntax.png"/>
-
-A selector 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.

step1-02/demo/index.html

@@ -114,7 +114,7 @@
   </div>
   <div>
     <h2>Our Logo</h2>
-    <img src="../../assets/fabric.jpg" width="100" alt="fabric logo" />
+    <img src="https://github.com/microsoft/frontend-bootcamp/blob/master/assets/fabric.jpg?raw=true" width="100" alt="fabric logo" />
   </div>
   <div>
     <h2>Contact Us</h2>