diff --git a/step2-03/README.md b/step2-03/demo/README.md
similarity index 75%
rename from step2-03/README.md
rename to step2-03/demo/README.md
index 8962923..87c217f 100644
--- a/step2-03/README.md
+++ b/step2-03/demo/README.md
@@ -1,4 +1,4 @@
-# Step 2.3: Theming and styling with UI Fabric
+# Step 2.3: Theming and styling with UI Fabric (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -146,64 +146,3 @@ const className = mergeStyles(blueBackgroundClassName, {
const myDiv =
I am a green div that turns red on hover!
;
```
-
-# Exercises
-
-If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 3 to see results.
-
-## Fabric theming and styling
-
-### Applying Fabric themes
-
-Try applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing:
-
-```ts
-import { FluentCustomizations } from '@uifabric/fluent-theme';
-```
-
-with:
-
-```ts
-import { TeamsCustomizations } from '@uifabric/theme-samples';
-```
-
-### Applying customized themes
-
-1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code.
-
-2. In `exercise/src/components/TodoApp.tsx`, delete the `Customizer` component.
-
-3. Paste in the generated theme code before the `TodoApp` component definition.
-
-4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type.
-
-### Customizing one Fabric control instance
-
-1. Open `exercise/src/components/TodoFooter.tsx`
-
-2. Find the `` and insert a `styles` prop
-
-3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)
-
-4. Try to customize this with a styles function
-
-## Advanced/non-Fabric component styling
-
-### CSS-in-JS with `mergeStyles`
-
-1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`
-
-```tsx
-import { mergeStyles } from 'office-ui-fabric-react';
-
-const className = mergeStyles({
- backgroundColor: 'red',
- selectors: {
- ':hover': {
- backgroundColor: 'blue'
- }
- }
-});
-```
-
-2. Try to give a few components extra padding
diff --git a/step2-03/demo/index.html b/step2-03/demo/index.html
index ab43ffe..e848070 100644
--- a/step2-03/demo/index.html
+++ b/step2-03/demo/index.html
@@ -4,7 +4,7 @@
-
+
diff --git a/step2-03/exercise/README.md b/step2-03/exercise/README.md
new file mode 100644
index 0000000..88c7f72
--- /dev/null
+++ b/step2-03/exercise/README.md
@@ -0,0 +1,64 @@
+# Step 2.3: Theming and styling with UI Fabric (Exercise)
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+# Exercises
+
+If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 3 to see results.
+
+## Fabric theming and styling
+
+### Applying Fabric themes
+
+Try applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing:
+
+```ts
+import { FluentCustomizations } from '@uifabric/fluent-theme';
+```
+
+with:
+
+```ts
+import { TeamsCustomizations } from '@uifabric/theme-samples';
+```
+
+### Applying customized themes
+
+1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code.
+
+2. In `exercise/src/components/TodoApp.tsx`, delete the `Customizer` component.
+
+3. Paste in the generated theme code before the `TodoApp` component definition.
+
+4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type.
+
+### Customizing one Fabric control instance
+
+1. Open `exercise/src/components/TodoFooter.tsx`
+
+2. Find the `` and insert a `styles` prop
+
+3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)
+
+4. Try to customize this with a styles function
+
+## Advanced/non-Fabric component styling
+
+### CSS-in-JS with `mergeStyles`
+
+1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`
+
+```tsx
+import { mergeStyles } from 'office-ui-fabric-react';
+
+const className = mergeStyles({
+ backgroundColor: 'red',
+ selectors: {
+ ':hover': {
+ backgroundColor: 'blue'
+ }
+ }
+});
+```
+
+2. Try to give a few components extra padding
diff --git a/step2-03/exercise/index.html b/step2-03/exercise/index.html
index ab43ffe..ee7d10d 100644
--- a/step2-03/exercise/index.html
+++ b/step2-03/exercise/index.html
@@ -4,7 +4,7 @@
-
+
diff --git a/step2-04/README.md b/step2-04/demo/README.md
similarity index 90%
rename from step2-04/README.md
rename to step2-04/demo/README.md
index e1e57de..88388b3 100644
--- a/step2-04/README.md
+++ b/step2-04/demo/README.md
@@ -1,4 +1,4 @@
-# Step 2.4: Testing TypeScript code with Jest
+# Step 2.4: Testing TypeScript code with Jest (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -126,19 +126,3 @@ Take a look at code inside `demo/src`:
3. `index.spec.ts` is the test file
Note how tests are re-run when either test files or source files under `src` are saved.
-
-# Exercise
-
-Start the test runner by running `npm test` in the root of the `frontend-bootcamp` folder.
-
-## Basic testing
-
-1. Look at `exercise/src/stack.ts` for a sample implementation of a stack
-
-2. Follow the instructions inside `stack.spec.ts` file to complete the two tests
-
-## Enzyme Testing
-
-1. Open up `exercise/src/TestMe.spec.tsx`
-
-2. Fill in the test using Enzyme concepts introduced in the demo
diff --git a/step2-04/demo/index.html b/step2-04/demo/index.html
index 50d9fb4..92a9499 100644
--- a/step2-04/demo/index.html
+++ b/step2-04/demo/index.html
@@ -4,7 +4,7 @@
-
+
For this step, we look at unit testing. Run
npm test
diff --git a/step2-04/exercise/README.md b/step2-04/exercise/README.md
new file mode 100644
index 0000000..88880c0
--- /dev/null
+++ b/step2-04/exercise/README.md
@@ -0,0 +1,19 @@
+# Step 2.4: Testing TypeScript code with Jest (Exercise)
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+# Exercise
+
+Start the test runner by running `npm test` in the root of the `frontend-bootcamp` folder.
+
+## Basic testing
+
+1. Look at `exercise/src/stack.ts` for a sample implementation of a stack
+
+2. Follow the instructions inside `stack.spec.ts` file to complete the two tests
+
+## Enzyme Testing
+
+1. Open up `exercise/src/TestMe.spec.tsx`
+
+2. Fill in the test using Enzyme concepts introduced in the demo
diff --git a/step2-04/exercise/index.html b/step2-04/exercise/index.html
index 50d9fb4..e908cc3 100644
--- a/step2-04/exercise/index.html
+++ b/step2-04/exercise/index.html
@@ -4,7 +4,7 @@
-
+
For this step, we look at unit testing. Run
npm test
diff --git a/step2-05/README.md b/step2-05/demo/README.md
similarity index 84%
rename from step2-05/README.md
rename to step2-05/demo/README.md
index 88afced..d9f262a 100644
--- a/step2-05/README.md
+++ b/step2-05/demo/README.md
@@ -1,4 +1,4 @@
-# Step 2.5: Redux: Reducers
+# Step 2.5: Redux: Reducers (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -26,7 +26,7 @@ A view is a React components that consumes the store as its data. There is a spe
### Action
-Actions are messages that represent some event, such as a user's action or a network request. With the aid of *reducers*, they affect the overall state.
+Actions are messages that represent some event, such as a user's action or a network request. With the aid of _reducers_, they affect the overall state.
### Store
@@ -99,15 +99,3 @@ function reducer(state: Store['todos'], payload: any): Store['todos'] {
```
In the demo and exercises for this step, I separated the pure and reducer functions into different files to make it cleaner. The tests inside `pureFunctions.spec.ts` should describe the behavior of the individual functions. They are easy to follow and easy to write.
-
-# Exercise
-
-If you still have the app running from a previous step, stop it with `ctrl+c`. Start the tests instead by running `npm test` from the root of the `frontend-bootcamp` folder.
-
-1. First, take a look at the store interface in `exercise/src/store/index.ts`. Note that the `Store` interface has two keys: `todos` and `filter`. We'll concentrate on `todos`, which is an object where the keys are string IDs and the values are of a `TodoItem` type.
-
-2. Open `exercise/src/reducers/pureFunctions.ts` and fill in the missing function bodies.
-
-3. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch on `action.type`.
-
-4. Open `exercise/src/reducers/pureFunctions.spec.ts` and implement tests for the functions you wrote for `remove`, `complete`, and `clear`.
diff --git a/step2-05/demo/index.html b/step2-05/demo/index.html
index 50d9fb4..92a9499 100644
--- a/step2-05/demo/index.html
+++ b/step2-05/demo/index.html
@@ -4,7 +4,7 @@
-
+
For this step, we look at unit testing. Run
npm test
diff --git a/step2-05/exercise/README.md b/step2-05/exercise/README.md
new file mode 100644
index 0000000..117fbeb
--- /dev/null
+++ b/step2-05/exercise/README.md
@@ -0,0 +1,15 @@
+# Step 2.5: Redux: Reducers (Exercise)
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+# Exercise
+
+If you still have the app running from a previous step, stop it with `ctrl+c`. Start the tests instead by running `npm test` from the root of the `frontend-bootcamp` folder.
+
+1. First, take a look at the store interface in `exercise/src/store/index.ts`. Note that the `Store` interface has two keys: `todos` and `filter`. We'll concentrate on `todos`, which is an object where the keys are string IDs and the values are of a `TodoItem` type.
+
+2. Open `exercise/src/reducers/pureFunctions.ts` and fill in the missing function bodies.
+
+3. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch on `action.type`.
+
+4. Open `exercise/src/reducers/pureFunctions.spec.ts` and implement tests for the functions you wrote for `remove`, `complete`, and `clear`.
diff --git a/step2-05/exercise/index.html b/step2-05/exercise/index.html
index 50d9fb4..e908cc3 100644
--- a/step2-05/exercise/index.html
+++ b/step2-05/exercise/index.html
@@ -4,7 +4,7 @@
-
+