Step 1-01 updates

README.md

@@ -4,9 +4,9 @@
 
 ## Purpose of this workshop
 
-This repo is the content for a two day workshop focused on introducing you to the fundamentals of web development. By the end of these two days you will have better understanding of how we write and deliver features on the web. You will also get some hands on experience using everything from HTML, CSS and JavaScript to React, Redux and UI Fabric as we build a working application together.
+This repo is the content for a two-day workshop focused on introducing you to the fundamentals of web development. By the end of these two days you will have a better understanding of how we write and deliver features on the web. You will also get some hands-on experience using everything from HTML, CSS and JavaScript to React, Redux and UI Fabric as we build a working application together.
 
-## Who is this workshop for
+## Who this workshop is for
 
 This workshop starts as a very high level introduction to the core principles of the web: HTML, CSS and JavaScript. This section is targeted at new and experienced developers alike. The second day dives into more complex topics such as TypeScript and state management within an application. The examples should be accessible to anyone, but you will get more out of the day if you have some foundational experience in programing or web technologies.
 
@@ -14,25 +14,25 @@ This workshop starts as a very high level introduction to the core principles of
 
 #### Computer Setup
 
-- Current version of [Node/NPM](https://nodejs.org/en/)
+- [Node/NPM](https://nodejs.org/en/) (choose the **LTS** option)
-- Install [Git](https://git-scm.com/downloads)
+- [Git](https://git-scm.com/downloads)
-- [VSCode Editor](https://code.visualstudio.com)
+- [VS Code Editor](https://code.visualstudio.com)
-- Up to date browser with dev tools (some demos will be shown using Chrome)
+- Up-to-date browser with dev tools (some demos will be shown using Chrome)
 
-### Getting Set Up
+### Demo/Exercise Setup
 
-```bash
+```
   $ git clone https://github.com/Microsoft/frontend-bootcamp.git
   $ cd frontend-bootcamp
   $ npm install
 
-  // For Day 1, Steps 1-3
+  # For Day 1, Steps 1-3
   $ npm run static
-  // For the rest of the steps
+  # For the rest of the steps
   $ npm start
 ```
 
-## Table Of Contents
+## Table of Contents
 
 ### Day One
 
@@ -80,7 +80,7 @@ Demo and Exercises are combined
 
 ### Follow the Authors!
 
-If you are interested in JavaScript, TypeScript, React, Redux, Design Systems, follow us on Twitter:
+If you are interested in JavaScript, TypeScript, React, Redux, or Design Systems, follow us on Twitter:
 
 @kenneth_chau
 @micahgodbolt

package-lock.json

@@ -10284,6 +10284,36 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
       "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
     },
+    "tslint": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.13.0.tgz",
+      "integrity": "sha512-ECOOQRxXCYnUUePG5h/+Z1Zouobk3KFpIHA9aKBB/nnMxs97S1JJPDGt5J4cGm1y9U9VmVlfboOxA8n1kSNzGw==",
+      "dev": true,
+      "requires": {
+        "babel-code-frame": "^6.22.0",
+        "builtin-modules": "^1.1.1",
+        "chalk": "^2.3.0",
+        "commander": "^2.12.1",
+        "diff": "^3.2.0",
+        "glob": "^7.1.1",
+        "js-yaml": "^3.7.0",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.1",
+        "resolve": "^1.3.2",
+        "semver": "^5.3.0",
+        "tslib": "^1.8.0",
+        "tsutils": "^2.27.2"
+      }
+    },
+    "tsutils": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.8.1"
+      }
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",

package.json

@@ -2,6 +2,10 @@
   "name": "bootcamp",
   "version": "1.0.0",
   "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Microsoft/frontend-bootcamp"
+  },
   "main": "index.js",
   "scripts": {
     "start:client": "webpack-dev-server --mode development --progress --open",
@@ -18,6 +22,7 @@
   "devDependencies": {
     "@types/body-parser": "^1.17.0",
     "@types/cors": "^2.8.4",
+    "@types/enzyme": "^3.9.0",
     "@types/express": "^4.16.1",
     "@types/jest": "^23.3.13",
     "@types/node": "~10.12.21",
@@ -26,11 +31,10 @@
     "@types/react-redux": "^7.0.0",
     "@types/redux": "^3.6.0",
     "@types/uuid": "^3.4.4",
-    "@types/enzyme": "^3.9.0",
     "body-parser": "^1.18.3",
+    "copy-webpack-plugin": "^4.6.0",
     "cors": "^2.8.5",
     "css-loader": "^2.1.0",
-    "copy-webpack-plugin": "^4.6.0",
     "fork-ts-checker-async-overlay-webpack-plugin": "^0.1.0",
     "fork-ts-checker-webpack-plugin": "^0.5.2",
     "html-webpack-plugin": "^4.0.0-beta.5",
@@ -41,6 +45,7 @@
     "style-loader": "^0.23.1",
     "ts-jest": "^23.10.5",
     "ts-loader": "^5.3.3",
+    "tslint": "^5.13.0",
     "typescript": "^3.3.3",
     "uuid": "^3.3.2",
     "webpack": "^4.28.4",
@@ -66,4 +71,4 @@
     "redux-starter-kit": "^0.4.3",
     "redux-thunk": "^2.3.0"
   }
-}
+}

step1-01/README.md

@@ -1,24 +1,23 @@
 ## How the Web Works
 
-A simple web page is rendered on the screen via the following steps
+A simple web page is rendered on the screen via the following steps.
 
-> There are many sub steps in this process
+*There are many sub-steps in this process, but these are the highlights.*
-> but these are the highlights
 
-1. You instruct the browser which webpage you'd like to see
+1. You instruct the browser which web page you'd like to see
-2. The browser looks up the site in a 'DNS Server'
+2. The browser looks up the site in a "DNS Server"
    - This is like a big phone book for website server addresses
-3. The browser asks the server to send over a specific page of the website `developer.mozilla.org/filename.html` or `developer.mozilla.org`
+3. The browser asks the server to send over a specific page of the website, such as `developer.mozilla.org/filename.html` or `developer.mozilla.org`
-   - If asked for a 'root' level address, most servers will return `'root'/index.html`
+   - If asked for a "root"-level address, most servers will return `<root>/index.html`
 4. The server sends the HTML file back to the browser
-5. The browser starts to read the HTML file from the top to the bottom, \*stopping any time that additional resources are required
+5. The browser starts to read the HTML file from the top to the bottom, stopping any time that additional resources are required:
    - CSS stylesheets
    - JavaScript files
    - Fonts
    - Images
 6. Browser makes requests for additional resources
    - Those resources might request even more files
-7. Once the browser gets to the bottom of the page it can start rendering, and then load the page
+7. Once the browser gets to the bottom of the page it can start working on rendering, and then display the page
 
 ![MDN Page Load](https://user-images.githubusercontent.com/1434956/53033758-9da8d580-3426-11e9-9ab8-09f42ccab9a8.png)
 

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;

step1-01/html-demo/README.md

@@ -2,73 +2,74 @@
 
 The [HTML demo page](http://localhost:8080/step1-01/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
 
-To learn more about each element, click on the elements below.
+To learn more about each element, click on the element names below.
 
-### [Document Meta Data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
+### [Document Metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
 
-- [html](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root level element
+- [`html`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root-level element
-- [head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (meta-data) about the page
+- [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (metadata) about the page
-- [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown via browser tab
+- [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown in browser tab/title bar
-- [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resource (usually stylesheets)
+- [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resources (usually stylesheets)
-- [style](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
+- [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
 
 ### [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning)
 
-- [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
+- [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
-- [header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
+- [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
-- [footer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
+- [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
-- [main](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominent content
+- [`main`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominant content
-- [nav](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
+- [`nav`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
-- [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
+- [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
-- [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
+- [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
-- [h1,h2,h3,h4,h5,h6](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
+- [`h1`,`h2`,`h3`,`h4`,`h5`,`h6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
 
 ### [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
 
-- [div](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - A generic block level container
+- [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - Generic block level container
-- [p](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - A paragraph
+- [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - Paragraph
-- [ol](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
+- [`ol`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
-- [ul](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list
+- [`ul`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list (bullets)
-- [li](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
+- [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
-- [pre](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
+- [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
 
 ### [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
 
-- [a](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, email
+- [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, programs
-- [span](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
+- [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
-- [b](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content
+- [`b`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content (usually bold)
-- [em](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis
+- [`em`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis (usually italic)
-- [i](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text
+- [`i`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text (usually italic)
-- [sub](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
+- [`sub`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
-- [sup](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
+- [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
-- [code](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
+- [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
 
 ### [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
 
-- [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
+- [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
 
 ### [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
 
-- [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
+- [`table`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
-- [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
+- [`thead`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
-- [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
+- [`tr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
-- [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
+- [`th`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
-- [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) - Table body container
+- [`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
+- [`td`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) - Normal table cell
 
 ### [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
+- [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container
-- [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
+- [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
-- [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
+- [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
-- [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
+- [`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
-- [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various inputs. Types include:
+- [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various types of input.
-  - text
+  Possible `type` values include:
-  - checkbox
+  - `text`
-  - color
+  - `checkbox`
-  - date
+  - `color`
-  - radio
+  - `date`
-  - submit
+  - `radio`
+  - `submit`
 
 
 ## Next Step

step1-01/html-demo/html-demo.html

@@ -12,7 +12,7 @@
 
   <body>
     <section>
-      <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
+      <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Metadata</a></h2>
       <p>head, title, link, style</p>
     </section>
     <hr />
@@ -34,8 +34,8 @@
         <main>
           <h2>My Blog H2 inside Main</h2>
           <article>
-            <header><h3>Blog Title 1 H3 in Article Header</h3></header>
+            <header><h3>Blog Title 1 (H3 in Article Header)</h3></header>
-            <aside><p>Aside</p></aside>
+            <aside><p>Aside: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum ultricies elit eget luctus.</p></aside>
             <p>
               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!
@@ -133,7 +133,8 @@
       <table border="1">
         <thead>
           <tr>
-            <th colspan="2">The table header</th>
+            <th>Column 1 header</th>
+            <th>Column 2 header</th>
           </tr>
         </thead>
         <tbody>
@@ -145,6 +146,9 @@
             <td>Another table row</td>
             <td>with two columns</td>
           </tr>
+          <tr>
+            <td colspan="2">Row spanning both columns</td>
+          </tr>
         </tbody>
       </table>
     </section>
@@ -160,23 +164,23 @@
         <div>
           <div>
             <input type="checkbox" id="option1" name="option1" checked />
-            <label for="option1">Option1</label>
+            <label for="option1">Option 1</label>
           </div>
 
           <div>
             <input type="checkbox" id="option2" name="option2" />
-            <label for="option2">Option2</label>
+            <label for="option2">Option 2</label>
           </div>
         </div>
 
         <div>
           <input type="color" id="color1" name="color1" value="#e66465" />
-          <label for="color1">Color1</label>
+          <label for="color1">Color 1</label>
         </div>
 
         <div>
           <input type="color" id="color2" name="color2" value="#f6b73c" />
-          <label for="color2">Color2</label>
+          <label for="color2">Color 2</label>
         </div>
         <div>
           <label for="start">Start date:</label>
@@ -186,17 +190,17 @@
         <div>
           <div>
             <input type="radio" id="Radio1" name="radios" value="Radio1" checked />
-            <label for="Radio1">Radio1</label>
+            <label for="Radio1">Radio 1</label>
           </div>
 
           <div>
             <input type="radio" id="radio2" name="radios" value="radio2" />
-            <label for="radio2">Radio2</label>
+            <label for="radio2">Radio 2</label>
           </div>
 
           <div>
             <input type="radio" id="radio3" name="radios" value="radio3" />
-            <label for="radio3">Radio3</label>
+            <label for="radio3">Radio 3</label>
           </div>
         </div>
         <div>