Communication Through the Web

DCI 108

Winter 2021

Credits: 3

Requirements Met: DCI Minor Core

Class Meeting Metadata
Meets: MW 4:00 - 5:35pm Eastern
Classroom: Virtual (Zoom links in Canvas)
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 1:00-2:00
T 2:30-3:30
W 11:00-12:00
Or by appointment

Programming Assignment #3: Making Your Site Responsive100 points

Due Wednesday, March 31 @ 11:55pm ET

Overview

You now have some of the key design elements applied to your site. Now begin the process of making your site adapt for mobile devices. Also, add a contact form to your site so that you will receive email should someone wish to contact you.

Steps to Complete This Assignment

Responsive Design

  1. Open your portfolio in VSCode: Open VSCode.
  2. Have a separate browser tab open to preview your site: View Your Portfolio Site
  3. Begin experimenting with responsive design by adding a page to your site for your designer's statement, if it doesn't already exist. This HTML file should be added to a subfolder, and when that folder is accessed in a browser as part of your domain, this file should load automatically (hint: it's all about what you name the new file). The file should be a complete, syntactically correct HTML document that should fit stylistically with the rest of your site.
  4. The body of the document should be set up as follows:
    1. A section (#1) that includes text adapted from Exercise #1 where you discussed your intended audience and your story. The section should have a brief heading that describes the content. Do not simply copy and paste your paper. Extract key ideas and present them in narrative form. Your audience is now viewers of your site, not just your professor.
    2. A section (#2) that includes text adapted from Exercise #2 where you conducted interviews to gain insight into how to present your story. The section should have a brief heading that describes the content. Do not simply copy and paste your paper. Extract key ideas and present them in narrative form. Your audience is now viewers of your site, not just your professor.
    3. A section (#3) that includes the two images of your wireframes from Exercise #3. If you submitted links to online versions of your wireframes, save image versions of them (or take a screenshot of them) to your site. The section should have a heading of "Wireframes".
  5. On a screen that is at least 768 pixels wide, the elements above should be styled as follows (see Figure #1 below for an example):
    1. Section 1 should appear vertically above Section 2.
    2. Section 3 should appear to the right of Sections 1 and 2 and align with the top of Section 1.
    3. The images in Section 3 should be vertical (one above the other), and their size should be contained within the section (no overlapping its borders).
    4. The entire width of your content area that contains Sections 1, 2, and 3 should take up only 83% of the screen, and together they should be centered in the browser.
    5. Sections 1 and 2 should be approximately 50% of the width of the content area, and Section 3 should be approximately 45% of its width.
    6. There should be a reasonable amount of padding and margin for each section to enhance readability.
    7. You may add visible borders, if it fits the style of your overall site.
    8. Adjust the line height of your sections' text to enhance readability.
  6. On a screen less than 768 pixels wide, the elements above should be styled as follows (see Figure #2 below for an example):
    1. Sections 1, 2, and 3 should appear vertically in that order.
    2. The images in Section 3 should be horizontal (one next to the other), and their size should be contained within the section (no overlapping its borders).
    3. The entire width of Sections 1, 2, and 3 should take up 100% of the screen.
    4. There should be a reasonable amount of padding and margin for each section to enhance readability, but it should be smaller than the version above.
    5. You may add visible borders, if it fits the style of your overall site.
    6. The line height of your sections' text should be smaller than the version above.
    7. The text for headings in all three sections should be reduced from their default sizes.
  7. You may use either Bootstrap or media queries to accomplish these tasks. Do not use float or any form of the position property on the material added for this assignment.
Example of desktop styling
Figure #1: Example of styling for desktop
Example of mobile styling
Figure #2: Example of styling for mobile

Your Contact Form

Anywhere in your site where you deem appropriate, create 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. Add a form element with the following attributes:
    1. Set the action to this exact value (copy and paste it): https://www.jasontmickel.com/dci108/mailform/mail.php
    2. Set the method to "post"
  2. Inside the form, add the following fields:
    1. A label that refers to a field with the ID of "contact" with the initial value 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 refers to an "email" field with the initial value of "Your E-mail 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 refers to a "purpose" field with the initial value of "Nature of Your 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
    7. A label that refers to a "message" field with the initial value 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 an email address (W&L or other) where you would like to receive messages.
    10. A submit button
  3. Use CSS to make all visible fields appear on separate lines to the right of their respective labels, except for the textarea, which should appear below its label.
  4. Test this form to ensure you receive an email message with all of the correct data entered.

Expectations

You do not need to turn anything in to Canvas or via email. As of the due date and time, your assignment will be considered submitted.

  • All HTML and CSS should be properly formatted following the style conventions discussed in class for each language.
  • Your pages should load correctly in a web browser.
  • Site should switch correctly between desktop and mobile following the example.
  • Contact form should produce an email with all data entered in the form.

Grading Specifications

You will be graded on:

  • Accurately meeting all of the specifications above for both the responsive page and the contact form
  • Following HTML and CSS coding rules and conventions discussed in class and in the textbook

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

Examples of Major Errors

  • Placing elements in areas outside of head and body
  • Repeatedly not closing tags
  • Haphazard or lack of indentation
  • Website not loading
  • Links not working
  • Images not loading
  • Unreadable content
  • CSS rules not being reflected on the live pages
  • Form does not function properly
  • Site does not respond properly when switching between desktop and mobile

Examples of Minor Errors

  • One time missing a closing tag
  • Orderly, but inconsistent indentation
  • Using i when em would be more semantically correct
  • Incorrect spacing within CSS rules
  • Repeated CSS selectors

Proofread, proofread, proofread! Test, test, test!