Programming Assignment #3: Making Your Site Responsive100 points
Due Thursday, December 2 @ 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.
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.
The body of the document should be set up as follows:
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.
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.
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".
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):
Section 1 should appear vertically above Section 2.
Section 3 should appear to the right of Sections 1 and 2 and align with the top of Section 1.
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).
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.
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.
There should be a reasonable amount of padding and margin for each section to enhance readability.
You may add visible borders, if it fits the style of your overall site.
Adjust the line height of your sections' text to enhance readability.
On a screen less than 768 pixels wide, the elements above should be styled as follows (see Figure #2 below for an example):
Sections 1, 2, and 3 should appear vertically in that order.
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).
The entire width of Sections 1, 2, and 3 should take up 100% of the screen.
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.
You may add visible borders, if it fits the style of your overall site.
The line height of your sections' text should be smaller than the version above.
The text for headings in all three sections should be reduced from their default sizes.
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.
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.
Add a form element with the following attributes:
Set the action to this exact value (copy and paste it): https://www.jasontmickel.com/dci108/mailform/mail.php
Set the method to "post"
Inside the form, add the following fields:
A label that refers to a field with the ID of "contact" with the initial value of "Your Name".
An input field of type "text", the name "contact", and the ID "contact". The required attribute should be set.
A label that refers to an "email" field with the initial value of "Your E-mail Address".
An input field of type "email", the name "email", and the id "email". The required attribute should be set.
A label that refers to a "purpose" field with the initial value of "Nature of Your Message".
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
A label that refers to a "message" field with the initial value of "Your Message".
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".
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.
A submit button
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.
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