444.2 Contrastive CSS (20%, 20 points)
Project Two is motivated in part by CSS Zen Garden, which presents an array of variations on one commonly structured html page. For this project, you, too, will be working with a commonly structured html page to develop two distinctive CSS alternatives. The basic HTML structure and empty CSS files are provided below. We will spend time in class making copies of these files and moving them into a folder (../p2/) you will create in your people.emich.edu root directory.
index.html
contrast-a.html
contrast-b.html
alpha.css
beta.css
turtle.jpg (a temporary placeholder image)
You are encouraged to customize the HTML pages to some degree; however, in the end, both versions of your HTML page (contrast-a.html and contrast-b.html) must be identical in structure and content. The CSS files will be doing all of the work to create the visual presentation of each page. You are under no obligation to add new IDs or classes. In other words, you can create two different stylings of the common HTML structure by focusing on the elements already in place for you to work with: a, img, h1, h5, blockquote, and several more (see the HTML file for their names).
With the files listed above positioned correctly in your /p2/ folder, you can begin working on the project. How? Apply different CSS attributes to elements to get them to appear how you want them to appear. In the end, the pair of CSS files will look differently, as will the HTML pages they control. This may involve a considerable amount of trial and error, and you should keep your Codecademy notes and the CSS guides from class close at hand as you work.
Color Schemes
You will have decisions to make about color schemes, and while you are welcome to work intuitively or with only named colors, remember that we briefly explored the Meyer Web Color Blender in class recently. You should also check out the Palettes at ColourLovers, where you will find thousands of searchable combinations that may be suited for your adoption. You can also explore Color Picker plugins for Chrome and Firefox, but please do not use any automatically generated gradients in your CSS.
Media
As you customize the content of the HTML page, you are welcome to add text, hyperlinks, and classes or IDs that help you control specific areas of the page. Please do not embed video or use animated GIFs for this project. You are to include one image--a replacement for turtle.jpg that is sized exactly 300x300. Include an alt description with the image source tag for improved accessibility.
You should begin working on Project Two right away. A draft should be available for peer review on Wednesday, October 31, and the completed project is due one week later, Wednesday, November 7.
The most important component of this project is the reflective essay of approximately 1000 words that accounts for the decisions you made and documents anything you think constitutes learning throughout the unit. In your reflective essay, be careful to compare qualities of the two pages and to discuss the page both in terms of aesthetic appeal but also in terms of usability and your rationale for going with the positions and schemes you chose. The reflective essay is due to the appropriate EMU Online Dropbox by the start of class on November 7.
Project Two will be evaluated for completeness, timeliness (including timely development, pacing), technical precision, and aesthetic impression. Files must be in the correct location, and all of the pre-existing elements must have corresponding references in both style sheets. Include a properly sized image from Flickr Creative Commons, and add a (credit) link in the caption below the image that refers to the location of the image in Flickr.
Contact Information
Derek N. Mueller, PhDProfessor
Department of English
Virginia Tech
Office: 315 Shanks Hall
Phone: +1-734-985-0485 (Google voice)
dmueller@vt.edu
http://derekmueller.net/rc/
