Web Programming for Non-Programmers

DCI 110

Winter 2019

Credits: 4

Requirements Met: SC, DCI Minor Core Elective

GitHub Site: https://github.com/dci110w19

Class Meeting Metadata
Meets: M
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 212
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:00 - 12:00
T 11:00 - 12:00
W 1:00 - 2:00
Or by appointment

Programming Assignment #4: Organizing and Submitting Information50 points

Due Tuesday, February 5 @ 11:55pm


For this assignment, you will organize information and allow users to get in contact with you. You'll be building a small contact form and adding a table of the best places to eat around your town.

Steps to Complete the Assignment

  1. In VS Code, be sure you are on the master branch of your Insider's Guide assignment. Perform a sync in lower left corner by clicking the "two arrows in a circle" button. Sync your master branch Then add a new branch called pa4.
  2. Correct any errors and address any comments made on the previous assignment (once available).
  3. Create a new section below your images section containing a table that lists restaurants you recommend along with a brief description and their normal hours.
    1. Directly above the table, add a header to the section with an H2 tag that reads: "Best Places to Eat".
    2. The table should be 6 rows tall and 4 columns wide.
    3. The cells across row #1 should be table headers with "Name", "Description", "Address", and "Usual Hours", respectively.
    4. The cells for "Description" should contain a sentence or two about what each place offers and why you recommend it.
  4. Using CSS, style your table:
    1. All of the header cells should have a dark background color complementary to your site's other colors with white text against it.
    2. Each row should have a border above and below, but there should be no borders on the left and right sides of any cell. No space should appear between the borders.
    3. Each cell should have padding on all sides to make the text more readable.
  5. Below the table, create a new section containing a small form that allows a user to enter their name, a valid e-mail address, the purpose of their contact, and a message for you.
    1. Directly above the form, add a header with an H2 tag with the contents "Contact Us".
    2. For the form element:
      1. Set the action to this exact value (copy and paste it): https://www.jasontmickel.com/dci110/mailform/mail.php
      2. Set the method to "post"
    3. Inside the form, add the following fields:
      1. A label that connects to the "contact" field with the initial contents of "Your Name".
      2. An input field of type "text", the name "contact", and the id "contact". The required attribute should be set.
      3. A label that connects to the "email" field with the initial contents of "Your Email Address".
      4. An input field of type "email", the name "email", and the id "email". The required attribute should be set.
      5. A label that connects to the "purpose" field with the initial contents of "Nature of the Message".
      6. A select field with the name "purpose" and the id "purpose". The required attribute should be set. It should contain the following options:
        • Question
        • Comment
        • Request
        • Following Up
      7. A label that connects to the "message" field with the initial contents of "Your Message".
      8. A textarea field with the name "message" and the id "message". It should be 50 columns wide and 15 rows tall. The required attribute should be set. The placeholder attribute should have the value "Please limit your message to approximately 1,000 characters".
      9. An input field of type "hidden", the name "email_to", the id "email_to", and the value of your W&L email address.
      10. A submit button
    4. All visible fields should appear on separate lines to the right of their respective labels, except for the textarea, which should appear below the label.
    5. Make sure you test the form and receive the email message in your W&L mailbox!
  6. Use CSS to style your form:
    1. Set all labels to the same width of 200 pixels and make them each display on the screen as inline-block.
    2. Make all labels appear in bold text
    3. Add space after each line of the form (including the button) to make it more readable
    4. Set the width of the form to 400 pixels and center the entire form on the screen. Go back to the "Box Model" if you forget how to do this.
    5. Add a 2 pixel border using one of your site's colors around the entire form and add enough padding so that there is ample space between the border and the form elements.
  7. Use the Live Server tool in VS Code to preview your results.
  8. Commit and sync your code to GitHub. On the GitHub site, create a pull request to merge your pa4 branch into the master branch. Please DO NOT delete the pa4 branch when finished.


HTML and CSS should be properly formatted following their respective coding conventions discussed in class.

You can use the live preview extension in VSCode to test the page as you're building (click Preview Available in the lower left of the VSCode window), but when you're finished, be sure to check the live URL at https://dci110w19.github.io/insiders-YOURUSERNAME (e.g. "https://dci110w19.github.io/insiders-mickelj") to see that it is completely uploaded and working.

The new portions of your page should look similar to this:

Sample image for how the results of Lab 4 should look

Grading Specifications

You will be graded on:

  1. Accurately meeting all of the specifications above
  2. Following HTML and CSS coding rules and conventions discussed in class and in the textbook
  3. Correcting errors from the last lab

The lab will begin with a full score of 50 points and deductions will be made according to the amount and severity of errors.