Assignments
Web Design 1 Assignment Rubrics
Course Blog
Setup a blog using WordPress, Blogger, or another comparable system. Each week of the course, write one blog post that expands upon the topics discussed in class or readings. Each post should be at least 200 words in length, and should contain images and links where appropriate.
Recommended: Subscribe to your classmates' blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.
| Criteria | Performance Quality | Score | |||
|---|---|---|---|---|---|
| 0 points | 1 point | 2 points | 3 points | ||
| Blog Posts (evaluated weekly) | Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. | Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. | Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. | Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources. | |
Assignment 1: Class Homepage
Students will create a single web page. The purpose of the page is to serve as the student's home page for the class. The student can create a personal profile with information about him or herself. As the class proceeds, links to the student's future assignments will be added to this home page. The document must demonstrate proper semantic structure in the use of elements. The page must demonstrate the correct use of some or all of the following items: DOCTYPE, html, head, title, body, p, blockquote, br, div, span, strong, em, acronym, abbr, ul, li, ol, dl, dt, dd, img, table, caption, summary, thead, tfoot, tbody, tr, td, comment. Students must demonstrate that the page validates according to the DOCTYPE chosen.
| Criteria | Performance Quality | Score | ||
|---|---|---|---|---|
| 0 points | 1 point | 2 points | ||
| XHTML | Markup is not semantic, fails W3C validation, is poorly organized,and is more verbose than necessary. | Markup makes basic use of semantics, passes W3C validation, is poorly organized, and is moderately more verbose than necessary. | Markup is exemplary in its semantics, passes W3C validation, is terse, and exceptionally well organized. There is an appropriate DOCTYPE and properly constructed head and body elements. Most or all of the following elements are incorporated in the page in a semantic manner: p, blockquote, br, div, span, strong, em, acronym, abbr, ul, li, ol, dl, dt, dd, img, table, caption, summary, thead, tfoot, tbody, tr, td, comment | |
| FTP | Page is not put on server. | Page is on server, but not in the appropriate location. | Page is on the server in the designated location. | |
| Content and Purpose | Page contains little or no content. Purpose of the page is unclear. | Page contains content adequate to identify the student with minimal text demonstrating a limited number of the required elements. Purpose of the page as the student's home page can be determined. | Page contains exemplary content to identify the student and demonstrate use of the complete list of required elements. Purpose of the page as the student's home page is immediately apparent. | |
| Usability | Page has no provision for links to future projects. | Page could be amended to add future projects. | Clearly designated within the page organization is a space for links to future projects | |
Assignment 2: CSS Design
Students will create an external stylesheet and attach it to a mini-site of two to three pages. The CSS rules will include some or all of the following selectors, as appropriate to the design: background, body, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, width.
| Criteria | Performance Quality | Score | ||||
|---|---|---|---|---|---|---|
| 0 points | 1 point | 2 points | 3 points | 4 points | ||
| (X)HTML | Markup is not semantic, fails W3C validation, is poorly organized,and is more verbose than necessary. | Markup makes basic use of semantics, fails W3C validation, is poorly organized, and is moderately more verbose than necessary. | Markup makes use of semantics and passes W3C validation. It is slightly more verbose than necessary. | Markup semantically meaningful, passes W3C validation, is well organized, and uses classes and IDs only as necessary. |
Markup is exemplary in its semantics, passes W3C validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary. |
|
| CSS | No stylesheet is attached | A stylesheet is present but the link does not work. The required selectors are not used. | A minimal stylesheet is present and the link to it works. (Minimal styles, for example, would include rules in the body selector for color and font.) | An adequate stylesheet is attached and linked properly. A number of CSS selectors and properties are demonstrated effectively. The stylesheet is well organized and CSS is cleanly and efficiently written. | The CSS for the page is exemplary, demonstrating use of most of the following selectors and properties, as appropriate to the design: background, body, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, width. The stylesheet is well organized and CSS is cleanly and efficiently written. There are no redundant rules. | |
| Navigation and Pages | All 3 required pages are not present. There is no navigation | One or two pages are present. Navigation from one page to another does not work. | Three pages are present. Navigation from one page to another does not work. | Three pages are present. Navigation is semantically meaningful and works properly on every page. | Three pages are present. Navigation is semantically meaningful and works properly on every page. The navigation is presented with CSS in an enhanced display that clarifies it purpose and appearance. | |
| Images | There are no images. | Images are in the (X)HTML, but the image does not appear in the browser. | Images are used to add content, design emphasis, or enhance appearance. All images are in the XHTML. | Images are used to add content, design emphasis, or enhance appearance. Images that provide no meaningful content are in the CSS. | Images are used in exemplary or creative ways to add to the appearance or function of the pages. | |
| Link from home page | There is no link from the student's home page (assignment 1). | There is a link on the student's home page, but it does not work. | A working link to Assignment 2 can be found on the student's home page. | A working link to Assignment 2 can be found on the student's home page. The link is marked up with semantic (X)HTML. | A working link to Assignment 2 can be found on the student's home page. The link is marked up with semantic (X)HTML and is styled in a well-designed manner by CSS. | |
| Design | The pages show no design plan. | Pages are minimally organized but design elements are used inconsistently. Design does not communicate the nature of the site, does not appropriately achieve the communication objectives, makes poor use of design principles, and does not clearly communicate a hierarchy of information. | Pages show a consistent site-wide design scheme. Design communicates the nature of the organization but not very effectively, does an adequate job of achieving the communication objectives, makes some use of design principles, and has a basic hierarchy of information. | Pages demonstrate thoughtful attention to design details. Design communicates the nature of the organization, serves the communication objectives, makes use of design principles (layout, typography, color, etc.) to create an attractive presentation, and clearly communicates information hierarchy. | Pages demonstrate exemplary and creative attention to design details and create an exceptionally attractive and usable whole. Design communicates the nature of the organization very effectively, intelligently serves the communication objectives, makes great use of design principles (layout, typography, color, etc.) to create an elegant presentation, and very clearly communicates information hierarchy. | |
Assignment 3: Web site
Create a complete Web site of several pages. The topic chosen for the site should be rich enough to allow the student to demonstrate the use of various HTML elements studied: headings, paragraphs, blockquote, br, div, strong, em, acronym, abbr, ul, ol, dl, img, table, and form. The layout must be CSS based using an external stylesheet. The styled content must demonstrate mastery of CSS properties including background, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, and width. The site should demonstrate mastery of concepts regarding DOCTYPE and semantic HTML markup. The CSS must demonstrate an understanding of the Cascade and inheritance and make use of descendant selectors to minimize the number of classes. The content should include an accessible form with a functioning script to test submission. (See the resources list for a script for the form work.)
| Criteria | Performance Quality | Score | ||||
|---|---|---|---|---|---|---|
| 0 points | 1 point | 2 points | 3 points | 4 points | ||
| (X)HTML | Markup is not semantic, fails W3C validation, is poorly organized,and is more verbose than necessary. | Markup makes basic use of semantics, fails W3C validation, is poorly organized, and is moderately more verbose than necessary. | Markup makes use of semantics and passes W3C validation. It is slightly more verbose than necessary. | Markup semantically meaningful, passes W3C validation, is well organized, and uses classes and IDs only as necessary. | Markup is exemplary in its semantics, passes W3C validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary. | |
| CSS | No stylesheet is attached | A stylesheet is present but the link does not work. The required selectors are not used. | A minimal stylesheet is present and the link to it works. (Minimal styles, for example, would include rules in the body selector for color and font.) | An adequate stylesheet is attached and linked properly. A number of CSS selectors and properties are demonstrated effectively. The stylesheet demonstrates an understanding of the Cacade. The stylesheet is well organized and CSS is cleanly and efficiently written. | The CSS for the page is exemplary, demonstrating use of most of the following selectors and properties, as appropriate to the design: background, border, clear, color, float, font, height, line-height, list-style, margin, overflow, padding, position, text-align, text-indent, and width. The stylesheet makes effective use of the Cascade. The stylesheet is well organized and CSS is cleanly and efficiently written. There are no redundant rules. | |
| Navigation and Pages | Required pages are not present. There is no navigation. | One or two pages are present. Navigation from one page to another does not work. | The required pages are present. Navigation from one page to another does not work. | The required pages are present. Navigation is semantically meaningful and works properly on every page. | The required pages are present. Navigation is semantically meaningful and works properly on every page. The navigation is presented with CSS in an enhanced display that clarifies it purpose and appearance. | |
| Images | There are no images. | Images are in the (X)HTML, but the image does not appear in the browser. | Images are used to add content, design emphasis, or enhance appearance. All images are in the XHTML. | Images are used to add content, design emphasis, or enhance appearance. Images that provide no meaningful content are in the CSS. | Images are used in exemplary or creative ways to add to the appearance or function of the pages. | |
| Design | The pages show no design plan. | Pages are minimally organized but design elements are used inconsistently. Design does not communicate the nature of the site, does not appropriately achieve the communication objectives, makes poor use of design principles, and does not clearly communicate a hierarchy of information. Clumsy or ineffective CSS is used for the layout. |
Pages show a consistent site-wide design scheme. Design communicates the nature of the organization but not very effectively, does an adequate job of achieving the communication objectives, makes some use of design principles, and has a basic hierarchy of information. CSS is used for the layout in a minimally acceptable manner. |
Pages demonstrate thoughtful attention to design details. Design communicates the nature of the organization, serves the communication objectives, makes use of design principles (layout, typography, color, etc.) to create an attractive presentation, and clearly communicates information hierarchy. CSS is used effectively for the layout. |
Pages demonstrate exemplary and creative attention to design details and create an exceptionally attractive and usable whole. Design communicates the nature of the organization very effectively, intelligently serves the communication objectives, makes great use of design principles (layout, typography, color, etc.) to create an elegant presentation, and very clearly communicates information hierarchy. CSS is used in an exemplary manner for the layout. |
|
| Link from home page | There is no link from the student's home page (assignment 1). | There is a link on the student's home page, but it does not work. | A working link to Assignment 3 can be found on the student's home page. | A working link to Assignment 3 can be found on the student's home page. The link is marked up with semantic XHTML. | A working link to Assignment 3 can be found on the student's home page. The link is marked up with semantic XHTML and is styled in a well-designed manner by CSS. | |
Lab Assignments
A number of hands-on lab assignments are suggested throughout the course. They include:
- Create a basic web page with brief text, save to student folder, and display it in a browser
- Use FTP software to transfer web page to server. Discuss site structure on the server, put and get, setting up accounts for remote servers
- Create a transparent image, and optimized images in multiple formats
- Create a practice page with numerous links
- Add at least one list to a web page
- Define and give examples of a relative path and an absolute path
- Diagram and label the box model
- Build an accessible practice table
Evaluate hands-on lab activities using the following rubric. It can be adapted for individual assignments as needed.
| Criteria | Performance Quality | Score | ||
|---|---|---|---|---|
| 0 points | 1 point | 2 points | ||
| (X)HTML | Markup is not semantic, fails W3C validation, is poorly organized, mixes presentation with structure, and is more verbose than necessary. | Markup makes basic use of semantics, passes W3C validation, is poorly organized, and is moderately more verbose than necessary. | Markup is exemplary in its semantics, passes W3C validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary. | |
| CSS | CSS fails W3C validation, contains errata, is overly verbose, is poorly organized, is uncommented, renders inconsistently between target browsers, and is not kept eternally in a global style sheet. | CSS passes W3C validation, uses some CSS shorthand to keep code brief, is some what organized, renders relatively consistently in all target browsers, and is kept external in a global style sheet separate from markup. | CSS passes W3C validation, is exceptionally well organized, uses CSS shorthand to keep code brief, renders consistently or gracefully degrades in all target browsers, is kept external and separate from markup, and CSS is used creatively to solve design problems. | |
| Project Requirements | Lab exercises are incomplete and/or do not meet respective requirements. | Lab exercises are complete but do not meet all requirements. | All lab exercises are complete and meet respective requirements. | |