diff --git a/docs/step1-07/src/style.css b/docs/step1-07/src/style.css
index c897b4c..347bb57 100644
--- a/docs/step1-07/src/style.css
+++ b/docs/step1-07/src/style.css
@@ -1,5 +1,5 @@
body {
- font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
@@ -28,7 +28,7 @@ h1 {
background: transparent;
border: none;
}
-.filter .active {
+.filter .selected {
border-bottom: 2px solid blue;
}
@@ -47,4 +47,4 @@ footer span {
.hidden {
display: none;
-}
\ No newline at end of file
+}
diff --git a/step1-02/README.md b/step1-02/README.md
index 151ab5a..2b29ba0 100644
--- a/step1-02/README.md
+++ b/step1-02/README.md
@@ -1,13 +1,95 @@
## HTML and CSS
+Every website, application, form or component starts with markup. The HTML will change over time as you develop, but a first pass helps you understand the UI you are trying to build.
+
## Demo
-Write html tag down to ul > li, footer
-add CSS link
-Add active styles, describe specificity
+In this exercise we will scaffold out some HTML for out Todo app, and add some basic styling to it.
+
+### Page scaffold
+
+```html
+
+
+
+
+
+```
+
+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.
+
+### 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.
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+> 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.
+
+### Updating the header
+
+The header of our page is where most of the action is going to happen. First, lets give our page a title, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div.
+
+```html
+
+```
+
+#### 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.
+
+```html
+
+```
+
+### Adding styles
+
+Now that we've got the top of our application scaffolded, we can add some our styles in the head.
+
+```html
+
+
+
+```
+
+### Updating styles
+
+It looks like the selected button isn't getting any special styles. Let's dig in and see why that is.
+
+Open up the browser inspector and target our 'all' button. You'll notice that the blue style is present on the list, but it is being overriden by the `border: none` above it. This is a situation where specificity is winning out over the cascade.
+
+> **Cascade** states that if two selectors are equal, the lowest one on the page wins
+
+> **Specificity** states that regardless of cascade, the selector with the highest specificity wins
+
+To fix this problem we need to either reduce the specificity of our button styles, or increase the specificity of the selected style. In this situation we will add `.filter` in front of the `.selected` selector, because the selected style only applies to the filter anyway.
## Exercise
-Update list item to match (already styled)
-duplicate 3 more times
-Add and style footer content
+1. Add an unordered list with class `todos` to the main section
+2. Add 4 list items with class `todo` inside of that list with the following content
+ ``
+3. Add a span and a button to your footer
+4. Span content should be `4 items left` and button should say `Clear Completed` and have a class of `submit`
+5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
+
+> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
+
+> There are many strategies for creating and organizing class names in a large application. This lesson is focused on using CSS selectors, not the optimized way to scale your CSS.
diff --git a/step1-02/demo/index.html b/step1-02/demo/index.html
index 0e76edd..e69de29 100644
--- a/step1-02/demo/index.html
+++ b/step1-02/demo/index.html
@@ -1 +0,0 @@
-
diff --git a/step1-02/demo/style.css b/step1-02/demo/style.css
index 4df1196..9ed149d 100644
--- a/step1-02/demo/style.css
+++ b/step1-02/demo/style.css
@@ -31,6 +31,10 @@ h1 {
border: none;
}
+.selected {
+ border-bottom: 2px solid blue;
+}
+
.todos {
list-style: none;
padding: 0;
diff --git a/step1-02/exercise/index.html b/step1-02/exercise/index.html
index 52cf71f..ee6a337 100644
--- a/step1-02/exercise/index.html
+++ b/step1-02/exercise/index.html
@@ -11,15 +11,12 @@
-
-