Revised forms to be official last exercise. Everything else will be moved to homework.

christinatruong · christinatruong · commit 79e079e080e4 · 2014-09-22T14:17:57.000-04:00
diff --git a/framework/extras-form-controls.html b/framework/extras-form-controls.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>Ladies Learning Code: Intro to HTML & CSS</title>
+    <!-- Don't alter slideshow.css, CSSS slide deck needs it to work -->
+    <link rel="stylesheet" href="css/slideshow.css">
+
+    <!-- Theme-specific styles -->
+    <link href='http://fonts.googleapis.com/css?family=Quicksand|Pacifico|Open+Sans:400,300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/font-awesome.css">
+    <link rel="stylesheet" href="css/highlightjs-themes/monokai.css">
+    <link rel="stylesheet" href="css/theme-llc.css">
+    <link rel="shortcut icon" href="img/favicon.ico"> 
+
+    <!-- Workshop-specific styles -->
+    <link rel="stylesheet" href="css/workshop.css">
+
+    <!-- Takes care of CSS3 prefixes! -->
+    <script src="scripts/prefixfree.min.js"></script>
+</head>
+
+<body>
+    
+    <base target="_blank">
+
+    <main>
+    	<section class="slide" data-markdown>
+            ##Form controls: putting it all together
+            
+            `input` elements are used to allow the user to type in their information and is used with a `type` attribute to determine the kind of information it is.
+
+            The `label` tags are used to label the input.
+
+            The `name` attribute is used to label the fields when sending the form data to the server. 
+            
+            The `for` and `id` attributes are used to associate the label to the input and should have matching values.
+
+            A form can contain any HTML markup (paragraphs, lists, etc.) in addition to form specific HTML tags.
+
+            [Each part of a form is considered a paragraph](http://dev.w3.org/html5/spec-LC/forms.html#forms) and can be separated using `&lt;p>` elements. 
+
+            **Further reading: ** [MDN forms](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms)
+        </section>
+    </main><!-- cls main section -->
+
+    <footer>
+        <p class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="img/cc-by-nc.svg" /></a> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
+        <p class="instructions">Use the left <i class="fa fa-arrow-left"></i> and right <i class="fa fa-arrow-right"></i> arrow keys to navigate</p>
+    </footer>
+    
+    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+    <script src="scripts/slideshow.js"></script>
+
+    <!-- Uncomment the plugins you need -->
+    <script src="scripts/plugins/css-edit.js"></script>
+    <script src="scripts/plugins/css-snippets.js"></script>
+    <script src="scripts/plugins/css-Ctrls.js"></script>
+    <!-- <script src="plugins/code-highlight.js"></script>-->
+
+    <script src="scripts/plugins/markdown/marked.js"></script>
+    <script src="scripts/plugins/markdown/markdown.js"></script>
+    <script src="scripts/plugins/highlight/highlight.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+    <!-- Prettify -->
+    <script src="scripts/plugins/prettify.js"></script>
+    <script src="scripts/plugins/lang-css.js"></script>
+    <script src="scripts/plugins/prism.js"></script>
+
+    <script>
+        var slideshow = new SlideShow();
+
+        // Grabs all the .snippet elements
+        var snippets = document.querySelectorAll('.snippet');
+        for(var i=0; i<snippets.length; i++) {
+            new CSSSnippet(snippets[i]);
+        }
+
+        // Opens all links in a new window
+        var links = document.getElementsByTagName("a");
+        for (var i = 0; i < links.length; i++) {
+            var link = links[i];
+            link.addEventListener(function() {
+                window.open(this.href);
+            });
+        }
+
+        jQuery(document).ready(function(){
+            jQuery(".snippet").before("<span class=\"edit\">edit me</span>");
+        });
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -44,7 +44,7 @@ <h2><span>with</span> Instructor Name</h2>
             </ul>
         </div>
         <div class="presenter-notes">
-            <p>It's important to note at the beginning that a lot of material will be covered and their site will not be 100% complete by the end of the day. The goal of the day is to learn about the concepts. However, they will have most of the project done by the end of the day and  "homework" and additional resources are provided at the end to help them complete their project. It's a lot to cover in one day and today will be a "guided tour."</p>
+            <p>It's important to note at the beginning that a lot of material will be covered and their site will not be 100% complete by the end of the day. The goal of the day is to learn about the concepts. However, they will have about 75% of the project done by end of the day and  "homework" and additional resources are provided at the end to help them complete their project. It's a lot to cover in one day and today will just be a "guided tour."</p>
             <p>All code blocks in white are editable and CSS changes will be reflected in the slide.  For exercises, all instructions listed under <strong>bonus</strong> are for those who complete the exercises early to make sure learners at all different levels have something to work on.</p>
         </div>
     </header>
@@ -1653,7 +1653,7 @@ <h2>Class Exercise - Positioning the Header &amp; Nav</h2>
         </section>
 
         <section class="slide" data-markdown>
-            ##Class Exercise: Background Images
+            ##Class Exercise #8: Background Images
 
             So far, we've used `background` to add colours. We can also use it to add images. We've added images in the HTML using `img` but we can also set images as a background style using CSS.
             
@@ -1693,7 +1693,7 @@ <h2>Class Exercise - Positioning the Header &amp; Nav</h2>
         </section>
 
         <section class="slide">
-            <h2>Class exercise: Background-size</h2>
+            <h2>Class exercise #8: Background-size</h2>
 
             <p>Thanks to CSS3, we can now change the size of a background image. </p>
             <p><code>background-size</code> is the longhand property.  To include it in the shorthand <code>background</code> property, it <em>must</em> be included after <code>background-position</code>, separated with the <code>/</code> character.  </p>
@@ -1741,73 +1741,112 @@ <h2>Class exercise: Background-size</h2>
         </section>
 
         <section class="slide" data-markdown>
-            ##Forms: organizing the interface
+            ##Forms
             
             Forms are used to capture information from a user. The information processing and form submission usually requires the use of a server-side language such as PHP, Ruby or Python. But there are different services available to help do the processing for us without writing any of these languages!
 
-            Today we're going to use http://forms.brace.io/ to submit our form info and the information will be forwarded to your email. Simple!
+            Let's look at the markup first.
 
             All forms begin with the `form` element and requires 
             two attributes, `method` (defines how the form will communicate with the web server) and `action` (provides the file path to where the form script is processed after the form is submitted.
 
-            Since we're using a 3rd party service, the `action` value is their url *and* the email you want the form to be submitted to.
-
             ```xml
-            &lt;form method="POST" action="http://forms.brace.io/hello@email.com">
+            &lt;form method="POST" action="path/to/form/script/processing">
                 ...
             &lt;/form>
             ```
         </section>
 
-        <section class="slide" data-markdown>
-            ##Forms (continued)
+        <section class="slide">
+            <h2>Class Exercise #9 - Contact Form</h2>
+
+            <p>On your contact page, under the header, create a new <code>&lt;section&gt;</code> tag.  Add the below markup <em>in between</em> the <code>section</code> element.</p>
+
+<pre><code class="xml">&lt;section&gt;
+    &lt;form class="contact-form" method="POST" action="" &gt;
+        &lt;h2&gt;Let's meet for coffee!&lt;/h2&gt;
+
+        &lt;p&gt;Send me a message at &lt;a href="mailto:hello@your-email.com"&gt;hello@your-email.com&lt;/a&gt;, 
+        use the form below or say "hi!" on one of my social networks.&lt;/p&gt;
+        &lt;p&gt;
+            &lt;label for="name"&gt;Name&lt;/label&gt;
+            &lt;input id="name" type="text" name="name"&gt;
+        &lt;/p&gt;
+        &lt;p&gt;
+            &lt;label for="email"&gt;Email&lt;/label&gt;
+            &lt;input id="email" type="email" name="replyto"&gt;
+        &lt;/p&gt;
+        &lt;p&gt;
+            &lt;label for="message"&gt;Message&lt;/label&gt;
+            &lt;textarea id="message" name="message"&gt;&lt;/textarea&gt;
+        &lt;/p&gt;
+        &lt;input type="submit" value="SEND"&gt;
+    &lt;/form&gt;
+&lt;/section&gt;
+</code></pre>
+            <p>Your contact page and form should look similar to <a href="project/examples/exercise9-contact.html">Example 9</a>.</p>
 
-            `input` elements are used to allow the user to type in their information and is used with a `type` attribute to determine the kind of information it is.
+            <div class="presenter-notes">
+                <p>Give an general overview of what each from control is used for as you are adding in the code. There's further resources available in the next slide.</p>
 
-            The `label` tags are used to label the input.
+                <p>This will be the official last exercise for the day. Though there are plenty of other lessons in the next steps/homework section. If you find yourself with extra time, congratulate the class on picking up the concepts so well and either give them free time to tweak their projects, pick one of the homework assignments to go through together. Save some time to briefly cover the next steps.</p>
+            </div>
+        </section>
 
-            The `name` attribute is used to label the fields when sending the form data to the server. 
+        <!-- <section class="slide" data-markdown>
+            ##Forms
             
-            The `for` and `id` attributes are used to associate the label to the input and should have matching values.
-
-            A form can contain any HTML markup (paragraphs, lists, etc.) in addition to form specific HTML tags.
-
-            [Each part of a form is considered a paragraph](http://dev.w3.org/html5/spec-LC/forms.html#forms) and can be separated using `&lt;p>` elements. 
-
-            **Example:** [MDN form example](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form/Example)
-        </section>
+            Forms are used to capture information from a user. The information processing and form submission usually requires the use of a server-side language such as PHP, Ruby or Python. But there are different services available to help do the processing for us without writing any of these languages!
 
-        <section class="slide" data-markdown>
-            ##Exercise #9 - Contact Form
+            Today we're going to use http://forms.brace.io/ to submit our form info.  Through this service, the information will be forwarded to your email. Simple!
 
-            On your contact page, under the header, create a `&lt;section>` tag.  Add the below markup *in between* the `section` element.
+            All forms begin with the `form` element and requires 
+            two attributes, `method` (defines how the form will communicate with the web server) and `action` (provides the file path to where the form script is processed after the form is submitted.
 
-            Brace.io requires that you verify your email. The verification email will be sent on the first form submit so make sure you test your form first!
+            Since we're using a 3rd party service, the `action` value is their url *and* the email you want the form to be submitted to.
 
             ```xml
-            &lt;form class="contact-form" action=&quot;http://forms.brace.io/hello@your-email.com&quot; method=&quot;POST&quot;&gt;
-                &lt;h2&gt;Let's meet for coffee!&lt;/h2&gt;
-
-                &lt;p&gt;Send me a message at &lt;a href=&quot;mailto:hello@your-email.com&quot;&gt;hello@your-email.com&lt;/a&gt;, 
-                use the form below or say &quot;hi!&quot; on one of my social networks.&lt;/p&gt;
-                &lt;p&gt;
-                    &lt;label for=&quot;name&quot;&gt;Name&lt;/label&gt;
-                    &lt;input id=&quot;name&quot; type=&quot;text&quot; name=&quot;name&quot;&gt;
-                &lt;/p&gt;
-                &lt;p&gt;
-                    &lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;
-                    &lt;input id=&quot;email&quot; type=&quot;email&quot; name=&quot;replyto&quot;&gt;
-                &lt;/p&gt;
-                &lt;p&gt;
-                    &lt;label for=&quot;message&quot;&gt;Message&lt;/label&gt;
-                    &lt;textarea id=&quot;message&quot; name=&quot;message&quot;&gt;&lt;/textarea&gt;
-                &lt;/p&gt;
-                &lt;input type=&quot;submit&quot; value=&quot;SEND&quot;&gt;
-            &lt;/form&gt;
+            &lt;form method="POST" action="http://forms.brace.io/hello@email.com">
+                ...
+            &lt;/form>
             ```
+        </section> -->
+
+        <!-- <section class="slide">
+            <h2>Class Exercise #9 - Contact Form</h2>
+
+            <p>On your contact page, under the header, create a new <code>&lt;section&gt;</code> tag.  Add the below markup <em>in between</em> the <code>section</code> element.</p>
+            <p>Brace.io requires that you verify your email first. The verification email will be sent on the <strong>first</strong> form submit so make sure you test your form first!</p>
+
+<pre><code class="xml">&lt;section&gt;
+    &lt;form class="contact-form" action="http://forms.brace.io/hello@your-email.com" method="POST"&gt;
+        &lt;h2&gt;Let's meet for coffee!&lt;/h2&gt;
+
+        &lt;p&gt;Send me a message at &lt;a href="mailto:hello@your-email.com"&gt;hello@your-email.com&lt;/a&gt;, 
+        use the form below or say "hi!" on one of my social networks.&lt;/p&gt;
+        &lt;p&gt;
+            &lt;label for="name"&gt;Name&lt;/label&gt;
+            &lt;input id="name" type="text" name="name"&gt;
+        &lt;/p&gt;
+        &lt;p&gt;
+            &lt;label for="email"&gt;Email&lt;/label&gt;
+            &lt;input id="email" type="email" name="replyto"&gt;
+        &lt;/p&gt;
+        &lt;p&gt;
+            &lt;label for="message"&gt;Message&lt;/label&gt;
+            &lt;textarea id="message" name="message"&gt;&lt;/textarea&gt;
+        &lt;/p&gt;
+        &lt;input type="submit" value="SEND"&gt;
+    &lt;/form&gt;
+&lt;/section&gt;
+</code></pre>
+            <p>Your contact page and form should look similar to <a href="project/examples/exercise9-contact.html">Example 9</a>.</p>
+            <p>For more information about forms, <a href="framework/extras-form-controls.html">go here</a>.</p>
 
-            Your contact page and form should look similar to [Example 9](project/examples/exercise9-contact.html).
-        </section>
+            <div class="presenter-notes">
+                <p>Give an general overview of what each from control is used for as you are adding in the code. There's further resources available in the link provided in this slide.</p>
+            </div>
+        </section> -->
         
         <section class="slide">
             <h2>Center aligning with margin</h2>
@@ -1985,7 +2024,7 @@ <h2>Center aligning with margin</h2>
 
             You will need to register a domain name (www.mysite.com) and get hosting. Here are a couple domain & hosting options:
             
-            * [hover.com](https://www.hover.com/?ircid=2799&irmpname=Ladies+Learning+Code)
+            * [hover.com](hover.com/ladiescode)
             * [dreamhost.com](http://www.dreamhost.com/r.cgi?205190)  
             * [bluehost.com](http://www.bluehost.com/)
 
