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
2026-01-26 14:56:42 +08:00 · 2022-01-13 09:22:50 -08:00
parent 4998c158d2
commit 7cea32428e
60 changed files with 923 additions and 929 deletions
--- a/step1-02/lesson/README.md
+++ b/step1-02/lesson/README.md
@@ -0,0 +1,50 @@
+# Step 1.2 - Introduction to CSS (Demo)
+
+[Demo](../demo/) | [Exercise](../exercise/)
+
+## 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.
+
+Bonus: Check out the [Vocabs project](http://apps.workflower.fi/vocabs/css/en)
--- a/step1-02/lesson/index.html
+++ b/step1-02/lesson/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="../../assets/step.css" />
+  </head>
+  <body class="ms-Fabric">
+    <div id="markdownReadme" data-src="./README.md"></div>
+
+    <script src="../../assets/scripts.js"></script>
+  </body>
+</html>
--- a/step1-02/lesson/src/index.tsx
+++ b/step1-02/lesson/src/index.tsx