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 #4: Improving Your CSS, Accessibility, and Fully Responsive Complete Site100 points

Due Friday, April 9 @ 11:55pm ET

Overview

For PA #4, you should have all pages added to your site with sufficient (if not final) information on each page. You will also apply some of the advanced CSS selectors as well as at least two instances of transforms or transitions.

Steps to Complete This Assignment

HTML

  • Open your portfolio in VSCode: Open VSCode.
  • Have a separate browser tab open to preview your site: View Your Portfolio Site
  • Address any comments or fix any errors indicated in my grading from PAs 1 through 3.
  • Be sure your site has pages for all of the pieces laid out in the original portfolio summary (https://jasontmickel.com/dci108/assignments/portfolio/) including the start of your discussion of your group's project and the link to your group's site.
  • All HTML pages should be syntactically correct and should follow all of the conventions discussed throughout the course.
  • All HTML pages should include real content versus sample information. They should be sufficiently filled out, but the information does not need to be finalized.

CSS

  1. Address any comments or fix any errors indicated in my grading from PAs 1 through 3.
  2. Find at least 3 spots in your site where using complex selectors would be more efficient/flexible than using IDs/classes. Make the changes necessary. You may either change existing code or begin using them in newly developed code. These should be 3 different applications, i.e., not changing three items that are the same throughout your site like the header, footer, or menu.
  3. Add transitions that occur over a specific duration of time (rather than instantly) to your contact form to give the user feedback while filling it out:
    • When each of the inputs or textarea get focus, transition its border to be 2 pixels wide and red. To help make it visible, set the property outline: none; on the inputs and textarea, as well.
    • Make the submit button and the text in it larger.
    • When the user hovers over the button, transition its background color, font color, and font weight.
    • When the user clicks the button, transition its background color to a lighter version of the same color from the hover.
  4. Apply a transform or properly written CSS transition to at least one other element anywhere in your site.

Responsiveness

  • Using either media queries or Bootstrap, apply the same responsive design concepts from your designer's statement page to all pages on your site.
  • Responsiveness should occur at least at the 768 pixel mark, but you may add more screen widths if you desire.

Accessibility

  1. Test all of the pages in your site using WebAIM's WAVE tool (http://wave.webaim.org/).
  2. Correct any errors that it suggests.
  3. Run through the W3C accessibility checklist (https://www.w3.org/WAI/test-evaluate/preliminary/) to ensure any issues not caught by WAVE are addressed.

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.

Grading Specifications

You will be graded on:

  • Accurately meeting all of the specifications above
  • 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
  • Video not playing
  • Unreadable content
  • CSS rules not being reflected on the live pages
  • Lack of responsiveness at 768px
  • Accessibility errors reported by WAVE

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
  • Responsive at 768px but some elements not drawing properly
  • Accessibility errors not reported in WAVE but not fixed based on the W3C checklist

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