Lesson 15 (HTTP & Forms)

Lesson 15: HTTP and Forms

In the prep work for this lesson, the students learned:

1. How the internet works.
2. The different parts of a URL.
3. The HTTP request/response flow.
4. How to create and submit HTML forms.
5. Common input types and attributes.

Large Group Time (Instructor Notes)

Announcements

1. Check with your class Candidate Engagement Manager for any other announcements.

For Part-Time Students:

1. Graded Assignment #5 is open! Remind students that the key to getting the assignment done is to read through everything carefully and start on what you can do as soon as possible. In class, read through the instructions with your students and highlight what they are capable of doing after this class.

For Full-Time Students:

• Welcome to Days 21 and 22!
• Assignment 4 due at end of Day 23.
• Day 21:
  • Start Lesson 15 prep work in morning.
  • Work on Assignment 4 in the afternoon.
• Day 22:
  • Lesson 5 lecture and studio time in the morning.
  • Work on Assignment 4 in the afternoon.

Topics That Require More Attention

1. "So THAT's what '404' means!" De-mystify one or two common HTTP errors.
2. There is a lot of nitty-gritty detail in the HTTP chapter. Note which parts are the most essential for new coders to understand.
3. Review the differences between GET and POST. Why should one method be used over the other?
4. How to use event handlers to validate form data.
5. Live coding:
   1. Show how changing type = "text" to type = "email" adds basic validation to an HTML input, even without an event handler.
   2. Difference between radio, select, and checkbox.
   3. How to align multiple labels and inputs:
      1. Horizontally,
      2. Vertically,
      3. Centered within a div.
6. If time allows, discuss why basic HTML forms (inputs, buttons, etc.) do not usually look like the ones we see on company websites.
7. Studio intro.
8. Studio follow-up. This activity will probably require a debrief at the end of the class.

Studio (TF Notes)

1. There are three open-ended questions (admonition boxes) within the studio activity. Answering the questions is not required, but they help guide your students' thinking. You should spend time discussing the questions with your group.
2. Common student stumbling blocks:
   1. There is a fair amount of text that comes before the actual studio instructions. Gently redirect your students to this information if they try to launch right into the task.
   2. Be ready with syntax reminders for adding attributes and properties inside the HTML tags.
   3. Aligning the input box, labels, radio buttons, and the "Go" button can be frustrating, especially for perfectionists. Be ready with tips for nesting these elements.
3. Transitioning from creating the form elements to coding the JavaScript functions can be confusing. Be ready to point out to a student where in the index.html file they should be working for each part of the studio.