Added mini-exercise before exercise #2

Author: christinatruong

framework/img/workshop/nav-list.png

@@ -307,7 +307,7 @@ <h2>Nesting HTML tags</h2>
         </section>
 
         <section class="slide project" data-markdown>
-##Adding content
+##Adding more HTML & content
 
 All three pages have the same headings, navigation links and footer information.  Though the home page header and navigation look different from the other two pages, don't worry about that just yet. Right now we are just concentrating on adding the HTML. 
 
@@ -339,6 +339,16 @@ <h2>Nesting HTML tags</h2>
 Navigational elements are commonly created using lists. Since the order of the list items doesn't matter for creating nav items, an unordered list can be used.    
         </section>
 
+        <section class="slide" data-markdown>
+            ##Class exercise: Add a navigation
+
+            Let's go back to **index.html** and add an unordered list, before `&lt;header>`, as a navigation menu for the three pages: **Home**, **About**, **Contact**.
+
+            It should look like this:
+            
+            ![nav list](framework/img/workshop/nav-list.png)
+        </section>
+
         <section class="slide" data-markdown>
 ##Links & Attributes
 
@@ -434,10 +444,7 @@ <h2>Nesting HTML tags</h2>
         <section class="slide">
             <h2>Exercise #2 - Adding pages and content (20mins)</h2>
 
-            <p>Follow the instructions below to complete the exercise. We are just adding HTML content so don’t worry about how to style the page just yet. If you get stuck, you can take a peek in the <strong>examples</strong> folder: <a href="project/examples/exercise2-home.html">exercise2-home.html</a>, <a href="project/examples/exercise2-about.html">exercise2-about.html</a>, <a href="project/examples/exercise2-contact.html">exercise2-contact.html</a></p>
-
-            <p><strong>Protip!</strong> Using keyboard shortcuts is important for speeding up your work flow. Writing code requires a lot of copying, pasting and saving.</p>
-
+            <p>We are just adding HTML content so don’t worry about how to style the page just yet. Writing code often requires a lot moving, deleting and adding content. Here are some more shortcuts that will come in handy to speed up your work flow.</p>
             <p>
                 <code>ctrl/cmnd + c</code> to copy <br>
                 <code>ctrl/cmnd + x</code> to copy and cut <br>
@@ -450,16 +457,16 @@ <h2>Exercise #2 - Adding pages and content (20mins)</h2>
                 <li>Create an new page (cmnd/ctrl + n) and name it <strong>about.html</strong>
                     <ul>
                         <li>Save it in the same folder as <strong>index.html</strong> (project folder)</li>
-                        <li>Be sure to include all the <a href="/#slide11">basic HTML tags</a></li>
-                        <li>Update the <code>title</code> tag content to update the page title</li>
-                        <li>Add the header and nav markup referenced in <a href="index.html#slide22">HTML5 Sectioning Tags</a></li>
-                        <li>Use <strong>relative</strong> links to navigate between pages</li>
+                        <li>Be sure to include all the <a href="/#slide14">basic HTML tags</a></li>
+                        <li>Update the <code>title</code> tag to update the page title</li>
+                        <li>Add the HTML5 header and nav markup referenced in <a href="index.html#slide23">HTML5 Sectioning Tags</a></li>
+                        <li>Add <strong>relative</strong> links to navigate between pages</li>
                         <li>Add the footer content created in <strong>index.html</strong></li>
                     </ul>
                 </li>
                 <li>Create a new page and name it <strong>contact.html</strong>
                     <ul>
-                        <li>Follow the same instructions as the About page</li>
+                        <li>Follow the same instructions as the About page (or just copy it and update the page title)</li>
                     </ul>
                 </li>
                 <li>
@@ -479,6 +486,8 @@ <h2>Exercise #2 - Adding pages and content (20mins)</h2>
 &lt;/header&gt;
 </code></pre>
             </ol>
+            <p>If you get stuck, you can take a peek in the <strong>examples</strong> folder: <a href="project/examples/exercise2-home.html">exercise2-home.html</a>, <a href="project/examples/exercise2-about.html">exercise2-about.html</a>, <a href="project/examples/exercise2-contact.html">exercise2-contact.html</a></p>
+
             <div class="presenter-notes">
                 <p>Check in with learners after 20mins. If majority of people have not started step 3, give them 5-10 more minutes.  If they are still not done after that, let them know they'll have some time in the next exercise to finish up.</p>
             </div>