Wednesday, March 19, 2014

Assignment 2: add some style with CSS! (updated)

(updated: logistical correction)

Here is your second coding assignment!


This assignment has two parts. The first is due in one week, by end of day Wednesday, March 26. The second is due a week later, by end of day Wednesday, April 4.

As you know, with your consent we are performing an experiment with this assignment, so its mechanics are a bit unusual. You will be adding style to two html files: your own page, and someone else's page. You will be adding style two times to each file:

  • In one part of the assignment: you will create CSS from scratch for your own page, while with the other page, you create CSS with the help of starting CSS output from our experimental tool. 
  • In the other part: you will swap the pairing, meaning you will create CSS starting from our tool's output for your own page, while you will create CSS from scratch for the other page.
The order in which you perform these parts is being varied for experimental reasons.

My student (Juhee Bae) will shortly send each of you an email describing your randomly selected order, and a link to the experimental CSS output you need. On March 27, you will receive a link to the experimental output you need for the second part of the assignment.


Use CSS file to improve the appeal and understandability of html content.


When working with experimental CSS output:

  • Work with the improved html files that we provide you. (We sometimes improved semantic markup to enable better experimental CSS output.)
  • Do not significantly modify your html content.
  • Do not share the experimental CSS output with others. 
  • The output includes five different CSS style sheets. Choose one to work with, and improve it to reach your goals.

In any case:

  • Ensure your content is suitable for a classroom
  • Turn in exactly two CSS files for each part of the assignment, one for each html file.
  • As before, do not place any CSS styling or attributes in your html – remember, you won't be turning it in.


Validate your page using the W3C CSS Validation Service. Address as many of the resulting warnings and errors as you can.

Test your page on various browsers ("crossbrowser testing") using Browserling, Browsera, BrowserStack or SauceLabs. These tools make it easy to see how a page is rendered in different browsers without actually running those browsers. Test at least half of the following browsers:

  • Firefox for Windows
  • Firefox for OS X
  • Chrome for Windows
  • Chrome for OS X
  • Chrome for Android
  • Internet Explorer for Windows
  • Safari for OS X
  • Safari for iOS


Using wolfware classic assignment "css", for each part of the assignment, submit:

  • two CSS files
  • two matching html files
  • a text file of 1-2 pages documenting why you modified any CSS you received
  • (Optional) post your impressions of the appearance of your homepage with provided CSS file to our forum for extra credit.

No comments:

Post a Comment