From 5aed397e016ab0d51f9872e285047f93dfc00a79 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Wed, 27 Feb 2019 17:46:56 -0800 Subject: [PATCH] Day 1 updates --- step1-02/demo/README.md | 22 ++--- step1-03/demo/README.md | 26 ++--- step1-03/demo/index.html | 8 +- step1-03/exercise/README.md | 18 ++-- step1-03/exercise/index.html | 8 +- step1-03/final/index.html | 10 +- step1-04/demo/README.md | 98 +++++++++---------- step1-05/demo/README.md | 16 +-- step1-06/demo/README.md | 50 +++++----- .../exercise/src/components/TodoHeader.tsx | 6 +- step1-06/final/src/components/TodoHeader.tsx | 6 +- step1-07/demo/src/components/TodoHeader.tsx | 6 +- .../exercise/src/components/TodoHeader.tsx | 6 +- step1-07/final/src/components/TodoHeader.tsx | 6 +- 14 files changed, 144 insertions(+), 142 deletions(-) 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