diff --git a/index.html b/index.html index 7cbf2ab..92e17b2 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@
React Intro
- demo | + demo | final
diff --git a/playground/src/components/TodoFooter.tsx b/playground/src/components/TodoFooter.tsx index 889f05c..66f0c47 100644 --- a/playground/src/components/TodoFooter.tsx +++ b/playground/src/components/TodoFooter.tsx @@ -30,7 +30,7 @@ export const TodoFooter = connect( return ( - {itemCount} item{itemCount > 1 ? 's' : ''} left + {itemCount} item{itemCount === 1 ? '' : 's'} left props.clear()}>Clear Completed diff --git a/step1-01/html-demo/README.md b/step1-01/html-demo/README.md index 77a3b4a..3fa05a0 100644 --- a/step1-01/html-demo/README.md +++ b/step1-01/html-demo/README.md @@ -1,10 +1,31 @@ -## HTML Demo +# HTML Demo + +HTML tags are the basis of all web applications. They give the page structure, and define the content within. + +An HTML tag takes the following form: + +```html + +``` + +HTML tags can also be nested to create a tree that we call the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) + +```html +
+

My Page

+ +
+``` The [HTML demo page](https://microsoft.github.io/frontend-bootcamp/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 element names below. -### [Document Metadata](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 - [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (metadata) about the page @@ -12,7 +33,7 @@ To learn more about each element, click on the element names below. - [`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 -### [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning) +## [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 - [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid @@ -23,7 +44,7 @@ To learn more about each element, click on the element names below. - [`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 -### [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content) +## [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) - Generic block level container - [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - Paragraph @@ -32,7 +53,7 @@ To learn more about each element, click on the element names below. - [`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 -### [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics) +## [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, programs - [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container @@ -43,11 +64,11 @@ To learn more about each element, click on the element names below. - [`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) -### [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics) +## [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 -### [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content) +## [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 - [`thead`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container @@ -58,7 +79,7 @@ To learn more about each element, click on the element names below. > 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) +## [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 - [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements @@ -73,6 +94,6 @@ To learn more about each element, click on the element names below. - `radio` - `submit` -## Next Step +# Next Step [CSS Demo](../css-demo) diff --git a/step1-01/js-demo/README.md b/step1-01/js-demo/README.md index 3343979..1713430 100644 --- a/step1-01/js-demo/README.md +++ b/step1-01/js-demo/README.md @@ -63,7 +63,7 @@ function displayMatches() { ### Iteration -Next we'll update our function to iterate through a string of letters. We loop over each letter using the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) syntax. We'll use real input later, but for now this varifies that our function is working. +Next we'll update our function to iterate through a string of letters. We loop over each letter using the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) syntax. We'll use real input later, but for now this verifies that our function is working. ```js function displayMatches() { @@ -90,7 +90,7 @@ function displayMatches() { } ``` -> In JavaScript, it's safest to use strict `===` for comparisons, because `==` will try to convert the operands to the same type (and sometimes the behavior is [not what you'd expect](https://www.youtube.com/watch?v=et8xNAc2ic8)). For example, `"1" == 1` is true whereas `"1" === 1` would be false. +> In JavaScript, it's safest to use strict `===` for comparisons, because `==` will try to convert the operands to the same type. For example, `"1" == 1` is true whereas `"1" === 1` is false, but the behavior in certain other cases is [not what you'd expect](https://www.youtube.com/watch?v=et8xNAc2ic8). (See [this video](https://www.destroyallsoftware.com/talks/wat) for more strange JavaScript behavior.) ### Interacting with the DOM diff --git a/step1-02/demo/README.md b/step1-02/demo/README.md index 75f862e..e772944 100644 --- a/step1-02/demo/README.md +++ b/step1-02/demo/README.md @@ -8,7 +8,7 @@ Every website, application, form or component starts with markup. The HTML will ## Demo -In this exercise we will scaffold out some HTML for our Todo app, then add some basic styling to it. +In this exercise we will scaffold out some HTML for our todo app, then add some basic styling to it. ### Page scaffold @@ -20,14 +20,14 @@ In this exercise we will scaffold out some HTML for our Todo app, then add some ``` -1. The DOCTYPE tells the browser that this file is written in modern HTML. -2. The HTML tag wraps the entire page, and is the page root. Nothing is placed outside of those tags. Attributes can be set on HTML. -3. Head will contain all of the page's meta data, in this case a link to our CSS file. -4. Body is where all of the visible content should be placed. +1. The [`DOCTYPE`](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) tells the browser that this file is written in modern HTML. +2. The `html` tag wraps the entire page and is the page root. Nothing is placed outside of this tag. +3. `head` will contain all of the page's metadata, in this case a link to our CSS file. +4. `body` is where all of the visible content should be placed. ### Content Sectioning -As we saw in the previous demo, HTML elements can be used to describe different content sections of the applications. Let's add `header`, `main` and `footer`, as well as populate the header with an `h1`, addTodo div, and `nav` for our filters. +As we saw in the previous demo, HTML elements can be used to describe different content sections of the applications. Let's add `header`, `main` and `footer`, as well as populate the header with an `h1`, addTodo `div`, and `nav` for our filters. ```html @@ -41,11 +41,11 @@ As we saw in the previous demo, HTML elements can be used to describe different ``` -> Note that a `form` element would have been more semantic than a `div`, but we aren't using this form to POST to a server, so for this example a div is easier to use. +> Note that a `form` element would have been more semantically correct than a `div`, but we aren't using this form to POST to a server, so for this example a div is easier to use. ### Updating the header -The header of our page is where most of the action is going to happen. First, lets give our app a name, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. +The header of our page is where most of the action will happen. First, let's give our app a name, adding "TODO" to our `h1`. Then we can add an input and button to our `addTodo` div. ```html @@ -53,7 +53,7 @@ The header of our page is where most of the action is going to happen. First, le #### Navigation -The navigation for this application is quite simple. We want users to be able to switch between three filtered states. Since we need to track which state is currently selected, we'll add that as a class on the first item. +The navigation for this application is quite simple. We want users to be able to switch between three filtered states. Since we need to track which state is currently selected, we'll add a `selected` class to the first item. ```html