What This Assignment Is About
In this assignment you will improve your ability to build pages that use additional HTML techniques and apply
CSS to the page’s HTML to provide some styling experience and comparison among different styling parameters.
Information relevant to this assignment appears in CSS: The Missing Manual by David Sawyer MacFarland in
Chapters 1-3, 6 and 7. By reading these chapters (or equivalent sources) and looking at examples on W3Schools,
specifically the tutorials at www.w3schools.com/css and www.w3schools.com/css3 you should be able to fulfill
the requirements.
What You Are To Do
A publisher has hired you to create a demo for their designers to shows them how different color-, font-,
formatting-, and spacing choices impact the final readability and usability of a document. To accomplish that,
they requested that you create at least three variations of the same content, but with modified style choices,
as follows:
- The demo content will be the content of this assignment’s document (yes, the document you are reading now).
The only difference is that you should add at least one image (small or larger, simple or sophisticated, it
doesn’t matter), and you should show some styling differences about that image.
- You are to create at least three versions of this document; the content will be identical but the styling of
the pages will be different.
- Your CSS code must be in a separate file from your HTML file, in a subdirectory name css. This is the
industry-standard way to organize websites. You might use inline CSS and/or an internal style sheet during
development, but you must move all your CSS to a separate, external file before you submit your assignment.
That external file should have an extension of .css.
- Your CSS code must be documented to the same standard we have used for HTML. That is, major sections must be
documented to identify what they are styling. You should *not* document each individual CSS rule. Assume
that the reader of your documentation knows CSS, but that s/he is not familiar with the way you’re using it.
- You must structure your assignment so that the three (or more) demo pages can be reached from a “landing”
page, which will have clearly-identified hyperlinks to the demo pages.
- Your demo pages must have a variety of examples of different colors (including foreground – i.e., text or
content, and background), spacing, padding, borders (color, style, thickness), and any other styling
differences you might want to show.
- Test both your web page and your CSS code using the W3C Validators:
Your code must pass both validators. When it does, add the W3C validation icons to your page.
Code Review
- You can learn an awful lot by just having someone else look at your page and try it out. If you do this
assignment before the due date, there is no reason why you can’t ask someone (even a classmate) to review
your work for you. I strongly suggest that you do this, and that you do so early enough to allow time to
make the changes that s/he recommends (if you also agree with them).
Submitting Your Assignment for Grading
Please follow these directions carefully. Incorrectly submitted assignments will not be given appropriate
credit.
To submit this assignment you must go to our course blackboard and submit prior to the deadline. Please
submit all related files and also a link to your styled site.
How You Will Be Graded
This assignment will be graded on a 20-point system with points awarded as follows. Please note that the lists
of features provided below are not meant to be exhaustive. They are merely representative of the types of things
we are looking for in each grading category. Also note that 4 of the 20 points, or 20% of your grade, is awarded
for documentation.
Again, I stress that your page need not be the most beautiful page on the Web, although it’s of course fine to
strive for that! This is not an art class, and again I am very aware that some students enter this class with
significantly more experience with Web programming techniques than others. I strongly encourage experienced
students to do the basic assignment first and then push themselves to learn and try out new techniques. I
encourage inexperienced students to look at others’ work and emulate it where appropriate, of course being sure
to cite your references and give credit where credit is due. As always, all students should be able to score all
20 points on this assignment, regardless of what you knew before you took this course.
|
Criteria
|
Possible Points
|
Program Integrity / Design
- pages display properly as intended from weblab.cs.uml.edu (1 point)
- source code for all files is visible on the web and/or accessible via links on the assignment or
index page (1 point)
- all CSS resides in a separate file with an extension of .css in a subdirectory named css (2
points)
- pages exhibit creativity and effort, not just trivial implementations (8 points)
- pages validate using the W3C Markup Validation Service (2 points – submit a screenshot)
- pages validate using the W3C CSS Validation Service (2 points – submit a screenshot)
|
16 |
Source Code Documentation and Formatting
- user name and pertinent contact information appear in all source files
- code is logically organized
- all files contain adequate explanatory documentation
- all files have adequate white space for readability
- all files are properly indented and formatted
- all documentation is meaningful and does not merely echo code
- any sources used are cited in comments embedded within code, including the extent they
have been used (e.g., as-is, without modifications; modified – explain how modified)
|
4 |
* This assignment has some elements from a 91.461 assignment by Prof. Heines.
