Step 1-01 updates

step1-01/css-demo/README.md

@@ -2,7 +2,7 @@
 
 ### CSS Properties
 
-Now that we've gone over adding HTML tags to the page, lets cover adding styles to those tags. We can do quite a lot with styles! We can change:
+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
@@ -13,21 +13,21 @@ Now that we've gone over adding HTML tags to the page, lets cover adding styles
 - Animations
 - and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
 
-CSS is always applied in `property: value` pairs, like `background: blue;` and are terminated with a semi colon.
+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 - Styles are applied directly to the HTML tag
+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 externally loaded CSS file
+3. Through an external CSS file
    - `<link rel="stylesheet" href="./css-demo-finished.css" />`
 
-### Targeting specific HTML tags
+### Targeting specific elements
 
-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.
+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:
 
@@ -39,13 +39,13 @@ selector2 {
 }
 ```
 
-Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296)
+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
+Below is a series of selectors and property/value combinations that we'll apply to our CSS demo page.
 
 ```css
 /* Targeting the entire page */
@@ -58,17 +58,17 @@ h1 {
   /* Color name */
   color: black;
 
-  /* 6 digit hex  */
+  /* 6-digit hex  */
   background: #ababab;
 
-  /* Margin: property for each side */
+  /* Margin: specified separately for each side */
   margin-bottom: 15px;
   margin-top: 15px;
 
   /* Shorthand: Padding applies to all sides  */
   padding: 10px;
 
-  /* 3 digit hex and border shorthand */
+  /* Border shorthand and 3-digit hex */
   border: 1px solid #ddd;
 }
 
@@ -82,18 +82,18 @@ span {
   display: flex;
 }
 
-/* Decendant selector */
+/* Descendant selector */
 .tiles img {
   width: 100%;
 }
 
-/* Direct decendant selector */
+/* Direct descendant selector */
 .tiles > div {
-  /* rgb colors */
+  /* rgb color */
   background: rgb(10, 10, 10);
   color: white;
   flex-basis: 100%;
-  /* Longhand goes clockwise from top
+  /* Padding/margin shorthand. Goes clockwise from top.
   10px - all
   10px 20px - top/bottom left/right
   10px 20px 15px - top left/right bottom
@@ -113,18 +113,18 @@ a {
   color: white;
 }
 
-/* Pseudo hover selector */
+/* Hover pseudo-selector */
 a:hover {
   color: #ccc;
 }
 
-/* Sibling selectors */
+/* Sibling selector */
 a ~ a {
   /* Changing elements from inline to block */
   display: block;
 }
 
-/* Positional Pseudo Selectors  */
+/* Positional pseudo-selector  */
 .tiles > div:last-child {
   /* overrides margin-right but leaves other margins alone */
   margin-right: 0;

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

@@ -1,4 +1,4 @@
-/* Targeting an HTML tag */
+/* Targeting the entire page */
 body {
   font: 1.2em sans-serif;
 }
@@ -8,17 +8,17 @@ h1 {
   /* Color name */
   color: black;
 
-  /* 6 digit hex  */
+  /* 6-digit hex  */
   background: #ababab;
 
-  /* Margin: property for each side */
+  /* Margin: specified separately for each side */
   margin-bottom: 15px;
   margin-top: 15px;
 
   /* Shorthand: Padding applies to all sides  */
   padding: 10px;
 
-  /* 3 digit hex and border shorthand */
+  /* Border shorthand and 3-digit hex */
   border: 1px solid #ddd;
 }
 
@@ -32,18 +32,18 @@ span {
   display: flex;
 }
 
-/* Decendant selector */
+/* Descendant selector */
 .tiles img {
   width: 100%;
 }
 
-/* Direct decendant selector */
+/* Direct descendant selector */
 .tiles > div {
-  /* rgb colors */
+  /* rgb color */
   background: rgb(10, 10, 10);
   color: white;
   flex-basis: 100%;
-  /* Longhand goes clockwise from top
+  /* Padding/margin shorthand. Goes clockwise from top.
   10px - all
   10px 20px - top/bottom left/right
   10px 20px 15px - top left/right bottom
@@ -63,18 +63,18 @@ a {
   color: white;
 }
 
-/* Pseudo hover selector */
+/* Hover pseudo-selector */
 a:hover {
   color: #ccc;
 }
 
-/* Sibling selectors */
+/* Sibling selector */
 a ~ a {
   /* Changing elements from inline to block */
   display: block;
 }
 
-/* Positional Pseudo Selectors  */
+/* Positional pseudo-selector  */
 .tiles > div:last-child {
   /* overrides margin-right but leaves other margins alone */
   margin-right: 0;