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 #2: Applying CSS to Your Site100 points

Due Wednesday, March 17 @ 11:55pm ET

Overview

In PA #1, you roughly established the content and structure of your site using HTML. This time, use CSS to begin applying the design originated in your wireframes. You will add new HTML to integrate multimedia and tables.

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 PA #1.
  • If you didn't do so last time, add id and class attributes to your HTML elements so that they are uniquely selectable in CSS.
  • Link your stylesheet to all of your HTML files. Remember what was discussed about URLs and paths. That will determine the correct method of linking to your style.css file.
  • Create a new folder at the main level in VSCode (alongside — not in — "about" and "css") called "media".
  • Add at least 5 images the you'll use within your site. Images can be logos, photographs, drawings, etc. You MUST consider copyright when choosing images. If an image requires attribution even though it is free, you must do so. If the image is used as a background image, use CSS; however, copyright rules still apply.
  • To add images to your project, drag them from your computer's Explorer/Finder onto the "media" folder.
  • Add the images to your HTML using the proper, semantically-correct format.
  • Add a brief 10 to 30 second video or audio clip that YOU have created. Use the video or audio element. The video should be uploaded and NOT hosted on another site and embedded. To add the video/audio, drag and drop the file just as you did with your images.
  • If you haven't already, create a new HTML file within your site that will list examples of the work you have done either at W&L or elsewhere. Either add this file to your main folder, or create a folder for it and place it inside.
  • Layout the HTML for this page following the conventions we have used for other pages.
  • To this new file, add a table displaying various examples of work you have done. The table should contain:
    • A caption describing what the table is for
    • 4 columns: name of project, for whom it was created (a course, an employer, an internship, etc.), when it was completed, what skills you learned from it
    • A header row with a word or phrase indicating what information each column holds
    • 5 rows of works

CSS

Making reference to elements, ids, and classes from HTML begin to style your site by manipulating the boxes created previously and beginning to apply a color scheme.

  1. Use width and height to size your HTML elements as appropriate from your wireframes.
  2. Use position, top, and left to affix your header to the top of the page.
  3. Use margin, padding, and border to create space around HTML elements so that they stand out and are readable.
  4. Apply a color scheme to your text using color. Can you change link colors without confusing the user?
  5. Choose specific fonts from either the web-safe set or from Google Fonts to apply to your headings, body text, or other elements special to your pages. Even if you choose the default fonts of Times New Roman or Arial, specify them in your CSS using font-family.
  6. Add a background color, background image, or gradient to at least one element on your page. Apply more if desired. Think about spacing and color contrast within and among elements to maintain readability.
  7. Style your images for good spacing and mindfulness of readability of the text around them.
  8. Style your table so that:
    • There is enough padding inside each cell that the text is not pressed up against the border or other cells
    • Each row has a thin, black bottom border
    • No space appears between borders horizontally
    • The background color of the header row is dark with light colored text
  9. Optional: Use border-radius, box-shadow, or text-shadow to add subtle visual effects.

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.
  • Your styling does not need to be final, but it should reflect the site design laid out in your wireframes and reports.

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
  • CSS rules not being reflected on the live pages

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!