andersr · October 6, 2015 03:36 · Oct 5, 2015 · Oct 5, 2015 · Oct 5, 2015 · Oct 5, 2015
diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -369,10 +369,10 @@ Meteor.methods({
 
 *eg in /client/templates/addItems/addItems.js*
 
-~~Items.insert({~~
-  title: itemTitle,
-  createdAt: Date()
-});
+~~Items.insert({~~<br>
+  ~~title: itemTitle,~~<br>
+  ~~createdAt: Date()~~<br>
+~~});~~
 
 ```js
     Meteor.call('addItem', itemTitle, function(error, result){

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -369,13 +369,13 @@ Meteor.methods({
 
 *eg in /client/templates/addItems/addItems.js*
 
-    ~Items.insert({~
-     ~title: itemTitle,~
-      ~createdAt: Date()~
-    ~});~
+~~Items.insert({~~
+  title: itemTitle,
+  createdAt: Date()
+});
 
 ```js
-    ~Meteor.call('addItem', itemTitle, function(error, result){~
+    Meteor.call('addItem', itemTitle, function(error, result){
       if (error){
         console.log(error.reason);
       } else {

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -366,7 +366,14 @@ Meteor.methods({
 
 - In the templates, replace direct db calls with calls to the Meteor methods:
 
+
 *eg in /client/templates/addItems/addItems.js*
+
+    ~Items.insert({~
+     ~title: itemTitle,~
+      ~createdAt: Date()~
+    ~});~
+
 ```js
     ~Meteor.call('addItem', itemTitle, function(error, result){~
       if (error){

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -10,7 +10,7 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 - Why have your app in an "app" sub-directory? Making your app a sub-directory of your working directory allows for making external files, such as config files, build files, etc, be part of your repo without being mixed in with  actual app files.
 
 ## Step 1: App File Structure
-1. Delete the default files: app.html, app.js, app.css (```eg using rm app*```) 
+1. Delete the default files: app.html, app.js, app.css (```eg using rm app.*```) 
 1. Add client, lib, and server directories: ```mkdir client lib server```  (Files in 'client' will only run on the client, files in 'server' will only run on the server, while files in 'lib' will be loaded first and run on both the server and client.)
 2. Learn more about recommended Meteor file structure: http://meteortips.com/first-meteor-tutorial/structure/
 2. Run ```git checkout step1-file-structure``` for the finalized version of this step.
@@ -305,10 +305,76 @@ Template.singleItem.events({
 - Run ```git checkout step6-edit-items``` for the finalized version of this step.
 
 ## Step 7: Add Publish and Subcribe
-- Run ```git checkout step7-pub-sub``` for the finalized version of this step.
+- The current version of the app is not secure (eg it is possible to insert basically anything directly from the client.)
 - Remove the packages autopublish and insecure: ```meteor remove autopublish insecure```
-- You'll notice that items are no longer displaying. This is because you need to explicitly publish this content from the server and subscribe to it from the client.
-- Add calls for publishing 'items' from the server and subscribing to them from the client.
-- Move db operations out of your templates into Meteor.methods with some basic pattern validation.
-- In the templates, replace direct db calls with calls to the Meteor methods.
+- You'll notice that items are no longer displaying. This is because you need to explicitly publish content from the server and subscribe to it from the client.
+- Publish items from the server:
+*/server/publications.js*
+
+```js
+Meteor.publish('items', function() {
+  return Items.find(); 
+});
+```
+
+- Subscribe from the client:
+*/client/lib/subscriptions.js*
+
+```js
+Meteor.subscribe('items');
+```
+
+- Add db operations using Meteor.methods with some basic pattern validation:
+
+*/lib/collections/items.js*
+```js
+Items = new Mongo.Collection('items');
+
+Meteor.methods({
+
+  addItem:function(itemTitle){
+    check(itemTitle, String);
+    Items.insert({
+      title: itemTitle,
+      createdAt: Date()
+    });
+  },
+
+  updateItem: function(itemAttributes){
+    check(itemAttributes, {
+      id:    String,
+      title: String
+    });
+
+    Items.update({ _id:itemAttributes.id },
+    {
+      $set: {
+        title: itemAttributes.title
+      }
+    });
+  },
+
+  removeFromCollection: function(collectionAttributes){
+    check(collectionAttributes, {
+      collection: String,
+      id:         String
+    });
+    Mongo.Collection.get(collectionAttributes.collection).remove({ _id: collectionAttributes.id });
+  }
+});
+```
+
+- In the templates, replace direct db calls with calls to the Meteor methods:
+
+*eg in /client/templates/addItems/addItems.js*
+```js
+    ~Meteor.call('addItem', itemTitle, function(error, result){~
+      if (error){
+        console.log(error.reason);
+      } else {
+       $('.add-item-form')[0].reset();
+      }
+    });
+```
+- Run ```git checkout step7-pub-sub``` for the finalized version of this step.
 
diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -274,7 +274,34 @@ Template.singleItem.events({
 });
 ```
 
-- Add some css to provide ui feedback that line items are editable.
+- Add some css to provide ui feedback that line items are editable:
+*/client/stylesheets/styles.scss*
+```css
+.two-col-row {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items:center;
+
+  .main-content {
+    flex: 1;
+  }
+
+  .secondary-content {
+    text-align: right;
+    width: 5em;
+  }
+
+}
+
+.clickable {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #F2F2F2;
+  }
+}
+```
+
 - Run ```git checkout step6-edit-items``` for the finalized version of this step.
 
 ## Step 7: Add Publish and Subcribe

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -197,8 +197,7 @@ Template.deleteBtn.events({
 
 ## Step 6: Allow for editing items (reactive variables)
 - This feature will be implemented by reactively toggling each item between an edit and view state.
-- JS variables are not reactive by default.  Install this package to gain access to Reactive Variables: ```meteor add reactive-var```
-
+- We will need Reactive Variables to achieve this: ```meteor add reactive-var```
 - Update the singleItem template to include a form that displays conditionally:
 
 ```html
@@ -218,9 +217,63 @@ Template.deleteBtn.events({
 </template>
 ```
 
+- Set up reactively tracking individual items and their state:
+
+*/client/templates/itemsList/itemsList.js*
+```js
+Template.singleItem.onCreated(function(){
+  var
+  templateInstance               = this;
+  templateInstance.currentItem   = new ReactiveVar(templateInstance.data._id),
+  templateInstance.editableItem  = new ReactiveVar(""),
+  templateInstance.editing       = new ReactiveVar(false)
+  ;
+
+  templateInstance.autorun(function(){
+    if (templateInstance) {
+      templateInstance.editing.set(
+        templateInstance.currentItem.get() ===
+        templateInstance.editableItem.get()
+      );
+    };
+  });
+});
+```
+
+- In the same file, add a helper for reactively getting edit state and event handlers for editing:
+
+```js
+Template.singleItem.helpers({
+  editing: function () {
+    return Template.instance().editing.get();
+  }
+});
+
+Template.singleItem.events({
+
+  'click .edit-item': function () {
+    Template.instance().editableItem.set(this._id);
+  },
+
+  'click .cancel-edit': function () {
+    Template.instance().editableItem.set("");
+  },
+
+  "submit .update-item": function(event, template){
+    event.preventDefault();
+
+    Items.update({ _id:this._id }, {
+      $set : {
+        title: template.find('.update-item .item-title').value
+      }
+    });
+    $('.update-item')[0].reset();
+    Template.instance().editableItem.set("");
+  }
+
+});
+```
 
-- Set up reactive variables associated with this template.
-- Add event listeners for switching to edit mode and saving changes.
 - Add some css to provide ui feedback that line items are editable.
 - Run ```git checkout step6-edit-items``` for the finalized version of this step.
 

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -155,7 +155,8 @@ Template.addItem.events({
 
 
 ## Step 5: Allow for deleting items (components)
-- We'll implement the delete feature as a component so that it can be re-used in multiple contexts.  Install this package to allow for referencing collections by name: ```meteor add dburles:mongo-collection-instances```
+- We'll implement this feature as a component so that it can be re-used in multiple contexts.
+- We'll need to be able to reference collections dynamically to do this. Install this package to support that: ```meteor add dburles:mongo-collection-instances```
 - Create a deleteBtn component:
 
 */client/templates/components/deleteBtn/deleteBtn.html*
@@ -195,7 +196,6 @@ Template.deleteBtn.events({
 - Run ```git checkout step5-delete-items``` for the finalized version of this step.
 
 ## Step 6: Allow for editing items (reactive variables)
-- Run ```git checkout step6-edit-items``` for the finalized version of this step.
 - This feature will be implemented by reactively toggling each item between an edit and view state.
 - JS variables are not reactive by default.  Install this package to gain access to Reactive Variables: ```meteor add reactive-var```
 
@@ -222,6 +222,7 @@ Template.deleteBtn.events({
 - Set up reactive variables associated with this template.
 - Add event listeners for switching to edit mode and saving changes.
 - Add some css to provide ui feedback that line items are editable.
+- Run ```git checkout step6-edit-items``` for the finalized version of this step.
 
 ## Step 7: Add Publish and Subcribe
 - Run ```git checkout step7-pub-sub``` for the finalized version of this step.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -7,7 +7,7 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 - Cd into the "app" directory and run ```meteor``` from the command line. 
 - Open a browser window and enter the URL: http://localhost:3000
 - Leave this window open while building the app. Meteor will auto-refresh as you make changes.
-- Why have your app in an "app" sub-directory? Making your app a sub-directory of your working directory allows for making external files, such as config files, build files, task runners, etc, be part of your repo without being mixed in with  actual app files.
+- Why have your app in an "app" sub-directory? Making your app a sub-directory of your working directory allows for making external files, such as config files, build files, etc, be part of your repo without being mixed in with  actual app files.
 
 ## Step 1: App File Structure
 1. Delete the default files: app.html, app.js, app.css (```eg using rm app*```) 

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -7,7 +7,7 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 - Cd into the "app" directory and run ```meteor``` from the command line. 
 - Open a browser window and enter the URL: http://localhost:3000
 - Leave this window open while building the app. Meteor will auto-refresh as you make changes.
-- Why have your app in an "app" sub-directory? Having your app as sub-directory of your working app allows for making external files, such as config files, build files, task runners, etc, be part of your repo without being mixed in with  actual app files.
+- Why have your app in an "app" sub-directory? Making your app a sub-directory of your working directory allows for making external files, such as config files, build files, task runners, etc, be part of your repo without being mixed in with  actual app files.
 
 ## Step 1: App File Structure
 1. Delete the default files: app.html, app.js, app.css (```eg using rm app*```) 

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -7,7 +7,7 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 - Cd into the "app" directory and run ```meteor``` from the command line. 
 - Open a browser window and enter the URL: http://localhost:3000
 - Leave this window open while building the app. Meteor will auto-refresh as you make changes.
-- Why have your app in an "app" sub-directory? Having your app as sub-directory of your working app directory allows for making external files, such as config files, build files, task runners, etc, be part of the app, without being mixed in with the actual app files.
+- Why have your app in an "app" sub-directory? Having your app as sub-directory of your working app allows for making external files, such as config files, build files, task runners, etc, be part of your repo without being mixed in with  actual app files.
 
 ## Step 1: App File Structure
 1. Delete the default files: app.html, app.js, app.css (```eg using rm app*```) 

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -198,7 +198,27 @@ Template.deleteBtn.events({
 - Run ```git checkout step6-edit-items``` for the finalized version of this step.
 - This feature will be implemented by reactively toggling each item between an edit and view state.
 - JS variables are not reactive by default.  Install this package to gain access to Reactive Variables: ```meteor add reactive-var```
-- Update the singleItem template to conditionally be editable.
+
+- Update the singleItem template to include a form that displays conditionally:
+
+```html
+<template name="singleItem">
+{{#if editing}}
+<li class="list-group-item">
+  <form class="update-item two-col-row">
+    <input type="text" class="form-control item-title main-content" placeholder="Update..." value="{{title}}">
+     <span class="secondary-content"><button type="button" class="btn btn-default btn-xs cancel-edit">Cancel</button></span>
+  </form>
+  </li>
+  {{else}}
+  <li class="list-group-item edit-item clickable">
+    {{title}} <span class="pull-right">{{> deleteBtn currentItem=this collection="items"}}</span>
+  </li>
+  {{/if}}
+</template>
+```
+
+
 - Set up reactive variables associated with this template.
 - Add event listeners for switching to edit mode and saving changes.
 - Add some css to provide ui feedback that line items are editable.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -183,7 +183,7 @@ Template.deleteBtn.events({
 });
 ```
 
-- Invoke the deleteBtn component in the singleItem template and add pass in the necessary instance arguments:
+- Invoke the deleteBtn component in the singleItem template and pass in the necessary instance arguments:
 
 */client/templates/singleItem/singleItem.html*
 ```html

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -183,8 +183,15 @@ Template.deleteBtn.events({
 });
 ```
 
+- Invoke the deleteBtn component in the singleItem template and add pass in the necessary instance arguments:
+
+*/client/templates/singleItem/singleItem.html*
+```html
+...
+  {{title}} <span class="pull-right">{{> deleteBtn currentItem=this collection="items"}}</span>
+...
+```
 
-- Invoke the component in the singleItem template and add the necessary template instance arguments.
 - Run ```git checkout step5-delete-items``` for the finalized version of this step.
 
 ## Step 6: Allow for editing items (reactive variables)

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -16,7 +16,7 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 2. Run ```git checkout step1-file-structure``` for the finalized version of this step.
 
 ## Step 2: Basic Setup
-- Add a meteor bootstrap packages: ``` meteor add twbs:bootstrap``` (Optional: add a Sass package, which we'll use later: ``` meteor add fourseven:scss```)
+- Add a meteor bootstrap package: ``` meteor add twbs:bootstrap``` (Optional: add a [Sass](http://sass-lang.com/) package, which we'll use later: ``` meteor add fourseven:scss```)
 - In client/templates/, add an index page with ```<head>``` and ```<body>``` blocks only, containing some basic markup for layout. This will be the core app page.
 
 ```html
@@ -155,10 +155,37 @@ Template.addItem.events({
 
 
 ## Step 5: Allow for deleting items (components)
-- Run ```git checkout step5-delete-items``` for the finalized version of this step.
-- We'll implement the delete feature as a component.  Install this package to allow for referencing collections by name: ```meteor add dburles:mongo-collection-instances```
-- Create a deleteBtn component in client/components/deleteBtn.
+- We'll implement the delete feature as a component so that it can be re-used in multiple contexts.  Install this package to allow for referencing collections by name: ```meteor add dburles:mongo-collection-instances```
+- Create a deleteBtn component:
+
+*/client/templates/components/deleteBtn/deleteBtn.html*
+```html
+<template name="deleteBtn">
+  <button type="button" class="btn btn-default btn-xs delete"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
+</template>
+```
+- Add an event handler for deleteBtn:
+
+*/client/templates/components/deleteBtn/deleteBtn.js*
+
+```js
+Template.deleteBtn.events({
+  'click .delete': function () {
+
+    var collection = this.collection;
+    var id = this.currentItem._id;
+    var confirmDelete = confirm("Really delete this?");
+
+    if (confirmDelete) {
+      Mongo.Collection.get(collection).remove({ _id: id });
+    };
+  }
+});
+```
+
+
 - Invoke the component in the singleItem template and add the necessary template instance arguments.
+- Run ```git checkout step5-delete-items``` for the finalized version of this step.
 
 ## Step 6: Allow for editing items (reactive variables)
 - Run ```git checkout step6-edit-items``` for the finalized version of this step.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -115,14 +115,11 @@ Template.itemsList.helpers({
 - Insert the form into the itemsList template:
 
 ```html
-<template name="itemsList">
+...
   <ul class="list-group">
     {{> addItem}}
     {{#each allItems}}
-       {{> singleItem}}
-    {{/each}}
-  </ul>
-</template>
+...
 ```
 
 - Add an event handler for the addItems form:
@@ -149,11 +146,9 @@ Template.addItem.events({
 
 */client/template/itemsList/itemsList.js*
 ```js
-Template.itemsList.helpers({
-  allItems: function () {
+...
     return Items.find({}, {sort: {createdAt: -1}});
-  }
-});
+...
 ```
 
 - Run ```git checkout step4-add-items``` for the finalized version of this step.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -98,7 +98,7 @@ Template.itemsList.helpers({
 - Run ```git checkout step3-items-list``` for the finalized version of this step.
 
 ## Step 4: Add a form for adding items
-- Add a form for adding items:
+- Add the following form:
 
 */client/templates/addItem/addItem.html*
 
@@ -144,8 +144,18 @@ Template.addItem.events({
 });
 ```
 
-- In the allItems helper, add a reverse chron to sort to the item list so that new items appear at the top of the list: ```Items.find({}, {sort: {createdAt: -1}});```
-- When inserting a new item into the db, there is no need to update the itemsList - it will do so reactively.
+- You should now be able to add items using the form.  The itemsList will update reactively as new items are added.
+- Update the sorting of the items list to be reverse chronological, so that newest items appear on top:
+
+*/client/template/itemsList/itemsList.js*
+```js
+Template.itemsList.helpers({
+  allItems: function () {
+    return Items.find({}, {sort: {createdAt: -1}});
+  }
+});
+```
+
 - Run ```git checkout step4-add-items``` for the finalized version of this step.
 
 

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -98,7 +98,7 @@ Template.itemsList.helpers({
 - Run ```git checkout step3-items-list``` for the finalized version of this step.
 
 ## Step 4: Add a form for adding items
-- Add a for for adding items:
+- Add a form for adding items:
 
 */client/templates/addItem/addItem.html*
 
@@ -112,7 +112,7 @@ Template.itemsList.helpers({
 </template>
 ```
 
-- Insert the addItem template at the top of the itemsList template:
+- Insert the form into the itemsList template:
 
 ```html
 <template name="itemsList">
@@ -125,7 +125,25 @@ Template.itemsList.helpers({
 </template>
 ```
 
-- a "addItem.html" template file with a corresponding js file.
+- Add an event handler for the addItems form:
+
+```js
+Template.addItem.events({
+  "submit .add-item-form": function(event, template){
+    event.preventDefault();
+
+    var itemTitle = template.find('.add-item-form .item-title').value;
+
+    Items.insert({
+      title: itemTitle,
+      createdAt: Date()
+    });
+
+    $('.add-item-form')[0].reset();
+  }
+});
+```
+
 - In the allItems helper, add a reverse chron to sort to the item list so that new items appear at the top of the list: ```Items.find({}, {sort: {createdAt: -1}});```
 - When inserting a new item into the db, there is no need to update the itemsList - it will do so reactively.
 - Run ```git checkout step4-add-items``` for the finalized version of this step.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -86,6 +86,7 @@ Template.itemsList.helpers({
 
 - Invoke your "itemsList" template in the main index file to display its contents in your app:
 
+*/client/templates/index.html*
 ```html
 ...
   <div class="container">
@@ -97,10 +98,37 @@ Template.itemsList.helpers({
 - Run ```git checkout step3-items-list``` for the finalized version of this step.
 
 ## Step 4: Add a form for adding items
-- Run ```git checkout step4-add-items``` for the finalized version of this step.
-- Add a "addItem.html" template file with a corresponding js file.
+- Add a for for adding items:
+
+*/client/templates/addItem/addItem.html*
+
+```html
+<template name="addItem">
+  <li class="list-group-item">
+     <form class="add-item-form">
+       <input type="text" class="item-title form-control" placeholder="Add item...">
+    </form>
+  </li>
+</template>
+```
+
+- Insert the addItem template at the top of the itemsList template:
+
+```html
+<template name="itemsList">
+  <ul class="list-group">
+    {{> addItem}}
+    {{#each allItems}}
+       {{> singleItem}}
+    {{/each}}
+  </ul>
+</template>
+```
+
+- a "addItem.html" template file with a corresponding js file.
 - In the allItems helper, add a reverse chron to sort to the item list so that new items appear at the top of the list: ```Items.find({}, {sort: {createdAt: -1}});```
 - When inserting a new item into the db, there is no need to update the itemsList - it will do so reactively.
+- Run ```git checkout step4-add-items``` for the finalized version of this step.
 
 
 ## Step 5: Allow for deleting items (components)

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -60,10 +60,40 @@ Template.itemsList.helpers({
 });
 ```
 
+- Add the following view template files (we need to break out each individual item instance into a "singleItem" template to support editing of an item in a later step):
+
+*/client/templates/itemsList/itemsList.html:*
+
+```html
+<template name="itemsList">
+  <ul class="list-group">
+    {{#each allItems}}
+       {{> singleItem}}
+    {{/each}}
+  </ul>
+</template>
+```
+
+*/client/templates/singleItem/singleItem.html:*
+
+```html
+<template name="singleItem">
+<li class="list-group-item">
+  {{title}}
+</li>
+</template>
+```
+
+- Invoke your "itemsList" template in the main index file to display its contents in your app:
+
+```html
+...
+  <div class="container">
+    {{> itemsList}}
+  </div>
+...
+```
 
-- Add an "itemsList.html" file and corresponding js file for displaying your list of items.
-- Break out each individual item instance into a "singleItem" template. (This will be needed when we want to support editing of an item.)
-- Invoke your "itemsList" template in the main index file to display its contents in your app.
 - Run ```git checkout step3-items-list``` for the finalized version of this step.
 
 ## Step 4: Add a form for adding items

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -43,13 +43,24 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 
 
 ## Step 3: Create an Items List
-- In /lib/collections, add an items.js file and add a 'items' Mongo collection:
+- In /lib/collections, add an items.js file with a 'items' Mongo collection:
 
 ```js
 Items = new Mongo.Collection('items');
 ```
 
 - Open your browser console (eg using Option + Cmd + J) and insert some items into your new collection: ```Items.insert({title:"My first item", createdAt: Date()});``` (If all goes well, Mongo should return the id of the newly created item.
+- In /client/templates/itemsList, add a itemList.js file containing a itemsList helper, which will reactively find all items in the 'items' collection:
+
+```js
+Template.itemsList.helpers({
+  allItems: function () {
+    return Items.find();
+  }
+});
+```
+
+
 - Add an "itemsList.html" file and corresponding js file for displaying your list of items.
 - Break out each individual item instance into a "singleItem" template. (This will be needed when we want to support editing of an item.)
 - Invoke your "itemsList" template in the main index file to display its contents in your app.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -43,12 +43,17 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 
 
 ## Step 3: Create an Items List
-- Run ```git checkout step3-items-list``` for the finalized version of this step.
-- In /lib/collections, add an items.js file and add a 'items' Mongo collection.
+- In /lib/collections, add an items.js file and add a 'items' Mongo collection:
+
+```js
+Items = new Mongo.Collection('items');
+```
+
 - Open your browser console (eg using Option + Cmd + J) and insert some items into your new collection: ```Items.insert({title:"My first item", createdAt: Date()});``` (If all goes well, Mongo should return the id of the newly created item.
 - Add an "itemsList.html" file and corresponding js file for displaying your list of items.
 - Break out each individual item instance into a "singleItem" template. (This will be needed when we want to support editing of an item.)
 - Invoke your "itemsList" template in the main index file to display its contents in your app.
+- Run ```git checkout step3-items-list``` for the finalized version of this step.
 
 ## Step 4: Add a form for adding items
 - Run ```git checkout step4-add-items``` for the finalized version of this step.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -18,7 +18,8 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 ## Step 2: Basic Setup
 - Add a meteor bootstrap packages: ``` meteor add twbs:bootstrap``` (Optional: add a Sass package, which we'll use later: ``` meteor add fourseven:scss```)
 - In client/templates/, add an index page with ```<head>``` and ```<body>``` blocks only, containing some basic markup for layout. This will be the core app page.
-```
+
+```html
 <head>
   <title>Meteor CRUD</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -37,7 +37,6 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 </body>
 ```
 
-- Add a main page layout inside the body block.
 - (Optional) Add a scss.json file to the root directory with: ```{ "enableAutoprefixer": true}```
 - Run ```git checkout step2-basic-setup`` for the finalized version of this step.
 

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -17,7 +17,7 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 
 ## Step 2: Basic Setup
 - Add a meteor bootstrap packages: ``` meteor add twbs:bootstrap``` (Optional: add a Sass package, which we'll use later: ``` meteor add fourseven:scss```)
-- Add an index page with head and body blocks.
+- In client/templates/, add an index page with ```<head>``` and ```<body>``` blocks only, containing some basic markup for layout. This will be the core app page.
 ```
 <head>
   <title>Meteor CRUD</title>

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -16,8 +16,27 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 2. Run ```git checkout step1-file-structure``` for the finalized version of this step.
 
 ## Step 2: Basic Setup
-- Add a meteor bootstrap and sass packages: ``` meteor add twbs:bootstrap fourseven:scss```
+- Add a meteor bootstrap packages: ``` meteor add twbs:bootstrap``` (Optional: add a Sass package, which we'll use later: ``` meteor add fourseven:scss```)
 - Add an index page with head and body blocks.
+```
+<head>
+  <title>Meteor CRUD</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <nav class="navbar">
+    <div class="container">
+      <div class="navbar-header">
+        <h2 class="navbar-brand">Meteor CRUD</h2>
+      </div>
+    </div>
+  </nav>
+  <div class="container">
+    (Main page content goes here)
+  </div>
+</body>
+```
+
 - Add a main page layout inside the body block.
 - (Optional) Add a scss.json file to the root directory with: ```{ "enableAutoprefixer": true}```
 - Run ```git checkout step2-basic-setup`` for the finalized version of this step.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -16,11 +16,11 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 2. Run ```git checkout step1-file-structure``` for the finalized version of this step.
 
 ## Step 2: Basic Setup
-- Run ```git checkout step2-basic-setup`` for the finalized version of this step.
 - Add a meteor bootstrap and sass packages: ``` meteor add twbs:bootstrap fourseven:scss```
 - Add an index page with head and body blocks.
 - Add a main page layout inside the body block.
 - (Optional) Add a scss.json file to the root directory with: ```{ "enableAutoprefixer": true}```
+- Run ```git checkout step2-basic-setup`` for the finalized version of this step.
 
 
 ## Step 3: Create an Items List

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -11,7 +11,7 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 
 ## Step 1: App File Structure
 1. Delete the default files: app.html, app.js, app.css (```eg using rm app*```) 
-1. Add client, lib, and server directories: ```mkdir client lib server```
+1. Add client, lib, and server directories: ```mkdir client lib server```  (Files in 'client' will only run on the client, files in 'server' will only run on the server, while files in 'lib' will be loaded first and run on both the server and client.)
 2. Learn more about recommended Meteor file structure: http://meteortips.com/first-meteor-tutorial/structure/
 2. Run ```git checkout step1-file-structure``` for the finalized version of this step.
 

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -10,8 +10,8 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 - Why have your app in an "app" sub-directory? Having your app as sub-directory of your working app directory allows for making external files, such as config files, build files, task runners, etc, be part of the app, without being mixed in with the actual app files.
 
 ## Step 1: App File Structure
-1. Delete the default files (app.html, app.js, app.css) 
-1. Add common default directories used in Meteor.
+1. Delete the default files: app.html, app.js, app.css (```eg using rm app*```) 
+1. Add client, lib, and server directories: ```mkdir client lib server```
 2. Learn more about recommended Meteor file structure: http://meteortips.com/first-meteor-tutorial/structure/
 2. Run ```git checkout step1-file-structure``` for the finalized version of this step.
 

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -10,10 +10,10 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 - Why have your app in an "app" sub-directory? Having your app as sub-directory of your working app directory allows for making external files, such as config files, build files, task runners, etc, be part of the app, without being mixed in with the actual app files.
 
 ## Step 1: App File Structure
-1 Delete the default files (app.html, app.js, app.css) 
-1 Add common default directories used in Meteor.
-2 Learn more about recommended Meteor file structure: http://meteortips.com/first-meteor-tutorial/structure/
-2 Run ```git checkout step1-file-structure``` for the finalized version of this step.
+1. Delete the default files (app.html, app.js, app.css) 
+1. Add common default directories used in Meteor.
+2. Learn more about recommended Meteor file structure: http://meteortips.com/first-meteor-tutorial/structure/
+2. Run ```git checkout step1-file-structure``` for the finalized version of this step.
 
 ## Step 2: Basic Setup
 - Run ```git checkout step2-basic-setup`` for the finalized version of this step.

diff --git a/meteor_crud_app_instructions.md b/meteor_crud_app_instructions.md
@@ -10,10 +10,10 @@ Instructions for building this [Meteor CRUD](https://github.com/andersr/meteor_c
 - Why have your app in an "app" sub-directory? Having your app as sub-directory of your working app directory allows for making external files, such as config files, build files, task runners, etc, be part of the app, without being mixed in with the actual app files.
 
 ## Step 1: App File Structure
-- Delete the default files (app.html, app.js, app.css) 
-- Add common default directories used in Meteor.
-- Learn more about recommended Meteor file structure: http://meteortips.com/first-meteor-tutorial/structure/
-- Run ```git checkout step1-file-structure``` for the finalized version of this step.
+1 Delete the default files (app.html, app.js, app.css) 
+1 Add common default directories used in Meteor.
+2 Learn more about recommended Meteor file structure: http://meteortips.com/first-meteor-tutorial/structure/
+2 Run ```git checkout step1-file-structure``` for the finalized version of this step.
 
 ## Step 2: Basic Setup
 - Run ```git checkout step2-basic-setup`` for the finalized version of this step.
No results found