jump to content

Course Description

In this course students learn advanced (X)HTML and CSS techniques to create sophisticated web page layouts that adhere to the W3C’s guidelines. Microformats will be used to create semantically meaningful, portable content.

Recommended Textbook(s)

Recommended Reading

Forms

Layout techniques

Other topics

Technologies Required

  • Students will need their own web server to post their assignments
  • Mac or PC computers with internet connection
  • Web Browsers (Firefox, Opera, Safari, Internet Explorer)
  • Text editor, or web page editor that fosters the development of valid (X)HTML and CSS code
  • Web page debugging and evaluation tools such as Firebug and the Web Developer Toolbar for Firefox, Opera Dragonfly and the Opera debug menu, and Safari Web Inspector.

Competencies

Topic Competency Evaluation Methods
Review Topics Illustrate and label the box model
  • Week 2 Quiz
Recognize the structure of CSS style rules: selector, declaration, property
  • Week 2 Quiz
Identify the appropriate use of the following CSS selector types: element selectors, ID selectors, class selectors, pseudo-class selectors, and descendant selectors
  • Week 2 Quiz
Provide examples of proper semantic names for id and class selectors
  • Week 2 Quiz
Identify the difference between id and class selectors
  • Week 2 Quiz
Provide concrete examples of how web standards development techniques benefit businesses and Web users
  • Week 2 Quiz
CSS Shorthand Recognize and write CSS shorthand techniques that can make CSS code less verbose
  • Final Exam
Use CSS shorthand techniques for the background, border, font, color, margin, and padding properties to create efficient and concise style sheets
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Positioning Schemas Identify the differences between static, relative, absolute, and fixed positioning schemas
  • Final Exam
Explain the term "document flow"
  • Final Exam
Recognize browser support for static, relative, absolute, and fixed positioning schemas
  • Final Exam
Recognize which of the positioning schemas are within the document flow and which are outside of the document flow
  • Final Exam
Use positioning schemas to layout a web page
  • Lab Exercise
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Floating Elements Recognize that floated elements are outside of the document flow
  • Final Exam
Recognize that floated elements are automatically block level elements
  • Final Exam
Recognize that floated elements descend into the content that follows
  • Final Exam
Use the CSS float property to create a multi-columned page layout
  • Lab Exercise
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Use the CSS float property to transform an unordered list of navigation links into a horizontal navigation bar
  • Lab Exercise
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Identify and use techniques to clear floated elements so that they can be contained by a parent element
  • Lab Exercise
  • Final Exam
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
(X)HTML Forms

Describe and diagram the relationship between (X)HTML forms and server-side technologies

  • Final Exam
Define form validation and describe how it is accomplished
  • Final Exam
List popular server-side technologies often used to process content sent from (X)HTML form
  • Final Exam
Create an accessible (X)HTML form using using these elements: form, fieldset, legend, label, input (radio, checkbox, submit, reset, image, password, hidden), textarea, select, option, button
  • Lab Exercise
  • Assignment: Website Redesign
Connect a (X)HTML form to a server-side script for processing
  • Lab Exercise
  • Assignment: Website Redesign
Use CSS to make a (X)HTML form attractive and usable
  • Final Exam

Advanced (X)HTML Elements

Recognize the appropriate use for the elements address, code, cite, abbr, acronym, dfn, superscript, subscript, hr, del, and ins
  • Final Exam
Recognize the appropriate use of the HTML 5 elements header, footer, nav, article, aside
  • Final Exam
Image Replacement Techniques Use image replacement techniques to present unique design elements with accessible, search engine friendly text alternatives
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
List and describe popular image replacement techniques and identify the benefits and shortcomings of each
  • Final Exam

Advanced CSS Selectors

Describe the function of attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors in CSS
  • Final Exam
Recognize browser support for attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors
  • Final Exam
Use attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors when designing a web page
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Microformats Explain what microformats are and recognize the benefits of using them to markup various types of content
  • Final Exam
Define and describe the Semantic Web.
  • Final Exam
Use microformats to markup contact (hCard), and event (hCalendar) information
  • Assignment: Website Redesign
Use a microformats translation tool (such as http://technorati.com/contacts/) to create a link that allows users to download or move the content to another location (e.g. translate hCard to vCard for download into an address book program).
  • Assignment: Contact Page
  • Assignment: Website Redesign
Use CSS to style microformat content
  • Assignment: Website Redesign
Image Tiling Techniques Use the background property to tile images horizontally and vertically
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Use image tiling techniques to create faux columns in order to resolve design problems when columns are of disparate heights
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Use image tiling techniques to create the illusion of shadow, and depth
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Trouble-shooting Layout Using Firebug Identify display issues in a web page then use Firebug - a web development add-on for the Firefox browser - to quickly manipulate CSS and identify solutions to the problem.
  • Assignment: CSS Zen Garden
  • Assignment: Website Redesign
Accessibility Define the term accessibility.
  • Final Exam
Write markup that facilitates accessibility.
  • Assignment: Lab Exercises
  • Assignment: Website Redesign
Recognize the role the W3C plays in defining accessibility standards.
  • Final Exam
Create a website that passes WCAG priority 1 validation.
  • Assignment: Website Redesign
Interantionalization Identify core techniques required to present content in an international format.
  • Final Exam

Assignments

Web Design 2 Assignment Rubrics

Assignment: 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.

Course Blog Assignment Rubric
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: CSS Zen Garden

Acquaint yourself with the history of Dave Shea's CSS Zen Garden project, and browse the archive of successful submissions.

Using the example (X)HTML provided, create a unique layout and page design for this page using only CSS. Do not modify the (X)HTML at all. All of your design modifications should come from your CSS document. Use Andy Clarke's 3D diagram of the CSS Zen Garden document markup to get your bearings before starting your CSS.

Identify your design concept before getting started. Avoid replicating concepts that have already been created. Be creative! If you find yourself creatively stumped, consult Phillip Megg's book A History of Graphic Design (Meggs, Philip. 3rd edition. John Wiley & Sons, 1998.), to gain inspiration from the masters. It is advisable to start with preliminary sketches on paper to identify the organization and positioning your design will follow.

You may use local style sheets during the design process, but they should be externalized once the design is complete. You are not allowed to begin with the example CSS file. You may consult it, but you must build your CSS from scratch. A word of advice, keep the style rules as simple as possible. Often students will create odd combinations of negative margins, absolute positioning and padding to nudge things around the page. More often than not, the same results can be had using only positioning. When things get too complex, scrap the style rule and start fresh. You will end up with the answer faster and with cleaner code.

Dave Shea's book The Zen of CSS Design: Visual Enlightenment for the Web (Shea, Dave. 3rd edition. Berkeley, CA: Peachpit Press, 2005.) unveils the techniques behind some of the most popular CSS Zen Garden designs. It may be a useful reference for this assignment.

CSS Zen Garden Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Design Design concept is unoriginal, and has poor production values. Design concept shows some innovation, but is not well produced. Design concept shows some innovation, and is well produced. Design concept is innovative, and exceptionally well produced. Design concept is very innovative, intelligently employs CSS techniques to serve the design concept, and is exceptionally well produced.  
CSS CSS fails W3C validation, is incomplete, does not render consistently in target browsers, does not employ background images or image replacement, does not employ CSS shorthand, is poorly organized, and is not well commented. CSS has some minor errors, does employ some shorthand, doesn't make use of image replacement, has moderate organization, and some commenting. CSS passes W3C validation, makes use of some image replacement techniques, employs CSS shorthand, has basic commenting, but does not render correctly in all target browsers. CSS passes validation, makes intelligent use of image replacement techniques, employs CSS shorthand, is commented, and renders consistently in all target browsers. Is elegantly organized, terse, uses advanced CSS selectors, makes extensive use of image replacement techniques, is well commented, passes W3C validation, and renders a consistent or gracefully equivalent experience in all target browsers.  

Showcase web site

Compile your lab exercises into a single website showcasing the techniques learned in the course. Create a home page with the following information:

  • Course name and number
  • Instructor's name
  • Your school's name
  • The academic term
  • Your name
  • A description of the course
  • Links to and a brief explanation of each lab exercise
  • Link to a Creative Commons license in the footer of the page (use the rel-license microformat).

The design of your lab exercise website should be consistent, attractive, and usable. All pages should use valid (X)HTML and CSS indicated by validation links in the footer.

Showcase Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
Design No consideration is given to the presentation of lab exercises. Lab exercises are not presented with a consistent aesthetic and have a poor information hierarchy. Lab exercises have a basic but consistent aesthetic that communicates information hierarchy. Lab exercises have a unique, professional, consistent aesthetic that clearly communicates information hierarchy.  
(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. Labs home page is not usable, and does not contain all required information. No global navigation system is used to facilitate easy movement through exercises. Validation and Creative Commons links are not included in the footer of each page. Lab exercises are complete but do not meet all requirements. Labs home page is moderately usable, and contain all required information. A global navigation system is used to facilitate easy movement through exercises. Validation and Creative Commons links are not included in the footer of each page All lab exercises are complete and meet respective requirements. Labs home page is usable, and contains all required information. A global navigation system is used to facilitate easy movement through exercises, and status indicators communicate the user's current location. Validation and Creative Commons links are included in the footer of each page.  

Website Redesign

Identify a website with at least 10 pages that does not follow web standards best practices then redesign and rebuild it.

Your website redesign should:

  • Have valid (X)HTML that passes the W3C's validation tests. Validation errors caused by the use of emerging standards (example: RDFa) are acceptable
  • Have valid CSS that passes the W3C's validation tests. Validation errors caused by the use of emerging standards (example: SVG CSS properties) are acceptable
  • Use semantically meaningful markup and CSS
  • Employ general element selectors, class selectors, id selectors, contextual selectors, attribute selectors, selector grouping, child selectors, adjacent sibling selectors, and general sibling selectors
  • Employ floating or positioning schemas to layout the pages (no tables for layout)
  • Use an external stylesheet to style the entire site
  • Render consistently (within reason) across the four most popular web browsers
  • Employ image replacement techniques or Web Fonts
  • Consider the business and communication objectives of the organization, and present the content in a manner that is consistent with these goals
  • Employ a design aesthetic appropriate for the organization
  • Introduce the organization on the home page
  • Direct traffic to key locations in the website from the home page
  • Contain a contact page that provides a contact form that users can email the organization through
  • Present the organizations contact information on the contact page using the hCard microformat (provide a link to download contact information)
  • Follow basic usability principles to help the user identify their location and find their way around the site (page headings titled to match global navigation, current page identifier in navigation, redundant navigation at the bottom of pages, etc.)

Websites you may consider redesigning:

  • Your school's website
  • Your church, temple, synagogue, mosque website
  • A local community organization or non-profit's website

Discuss alternatives with your instructor.

Website Redesign Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Design Design does not communicate the nature of the organization, does not appropriately achieve the business and communication objectives, makes poor use of design principles, and does not clearly communicate a hierarchy of information. Design communicates the nature of the organization but not very effectively, does an adequate job of achieving the business and communication objectives, makes some use of design principles, and has a basic hierarchy of information. Design communicates the nature of the organization, serves the business and communication objectives, makes use of design principles (layout, typography, color, etc.) to create an attractive presentation, and clearly communicates information hierarchy. Design communicates the nature of the organization very effectively, intelligently serves the business and communication objectives, makes great use of design principles (layout, typography, color, etc.) to create an elegant presentation, and very clearly communicates information hierarchy.  
(X)HTML Markup is not semantic, fails W3C validation, fails WCAG priority 1 validation, is poorly organized, mixes presentation with structure, and is more verbose than necessary. Markup makes basic use of semantics, fails W3C validation, fails WCAG priority 1 validation, is poorly organized, and is moderately more verbose than necessary. Markup semantically meaningful, passes W3C validation, passes WCAG priority 1 validation, is well organized, and uses classes and IDs only as necessary. Markup is exemplary in its semantics, passes W3C validation, passes WCAG priority 1 validation, is terse, exceptionally well organized, and uses classes and IDs only as necessary.  
CSS CSS fails W3C validation, contains errata, does not employ the required selector types, is overly verbose, is poorly organized, is uncommented, does not use required float and positioning schemas, renders inconsistently between target browsers, is not kept eternally in a global style sheet, and does not make use of image replacement techniques. CSS fails W3C validation, is poorly organized, uses the required selector types, uses some CSS shorthand to keep code brief, uses floating and positioning for layout, renders inconsistently in target browsers, is kept external and separate from markup, and uses some image replacement techniques. CSS passes W3C validation, uses the required selector types, uses CSS shorthand to keep code brief, uses floating and positioning for layout, renders relatively consistently in all target browsers, is kept external and separate from markup, and uses image replacement techniques. CSS passes W3C validation, is exceptionally well organized, uses the required selector types, uses CSS shorthand to keep code brief, uses floating and positioning for layout, renders consistently or gracefully degrades in all target browsers, is kept external and separate from markup, uses image replacement techniques, and CSS is used creatively to solve design problems.  
Project Goals and Requirements Home page does a poor job of introducing the organization to the user and does not effectively direct traffic to key places in the site. Microformats are not used to markup contact and event information. The contact page is missing or does not contain a working contact form. Site does not make use of basic usability principles. Home page introduces the organization to the user but not efficiently and makes moderate attempts to direct traffic to key places in the site. Microformats are used to markup contact and event information. The contact page contains a working contact form but is poorly presented. Site makes moderate use of basic usability principles. Home page introduces the organization to the user and directs traffic to key places in the site. Microformats are used to markup contact and event information. The contact page contains a working contact form. Site makes use of basic usability principles. Home page efficiently introduces the organization and intelligently directs traffic to key areas. Microformats are used to markup contact and event information, and links to downloadable versions of the content. The contact page has a working contact form that is presented in an attractive and usable manner. The site follows basic usability principles.  

Examination Questions

Review

  • Diagram and label the box model.
  • Define and give examples of a relative path and an absolute path.
  • Define and provide examples of deprecated tags. How do tags become deprecated?
  • Describe the difference between block level and inline elements. Provide examples of each.
  • Why is it important to use semantic markup when building web pages? Provide an example of the use of semantic markup.
  • Label the selector, declaration, and property in the following style rule: div { background-color:#ccc; }
  • Provide 2 compelling arguments that you could present to an employer that would convince them to adopt web standards.

Positioning Schemas

  • List and describe the four positioning schemas.
  • When positioning elements absolutely, from what point is the position calculated?
  • When positioning elements relatively, from what point is the position calculated?
  • What is the document flow? How would you place an element in or remove it from the document flow?
  • Describe fixed positioning. Which browsers support fixed positioning?
  • How might you define the stacking order of positioning elements?

Floating Elements

  • Regardless of element type, when an element is floated is it converted to a block or an inline element?
  • When an element is floated, what additional property should accompany it to ensure proper display in various browsers?
  • From what point is the position of a floated element determined?
  • Identify two methods to force a static parent element to enclose a nested floated element.
  • Describe how the clear property is used.

(X)HTML Forms

  • Diagram and describe the process of how content is submitted and processed through an (X)HTML form.
  • Identify the attributes of a form tag that define the where and how content will be sent.
  • Write the (X)HTML code to create a simple contact form that would receive a user's name, email address, and a multiline message.
  • Describe how use of the <fieldset>, <legend>, and <label> can improve the accessibility of a form.
  • Define the difference between the GET and POST methods.
  • What is form validation, and how does it impact usability?
  • What technologies might be used to validate a form?

Advanced (X)HTML Elements

  • Provide an example of the proper use of the <address> element.
  • Describe the proper use of the <code> element.
  • Write the (X)HTML to cite a content source.
  • Write the (X)HTML to properly present an abbreviate and an acronym.

Image Replacement Techniques

  • List the benefits of using image replacement techniques.
  • Write the CSS to replace the text in the following element with a background image named about-us-title.png.
    <h2>About Us<h2>
  • Describe how image replacement can impact search engine optimization.

Advanced CSS Selectors

  • Write an example of an attribute selector.
  • Write an example of a descendant selector.
  • Write an example of a child selector.
  • Write an example of an adjacent sibling selector.
  • Write an example of a general sibling selector.

Microformats

  • Define the term microformat.
  • Describe a use case in which microformats would help improve the user experience.
  • How might a user identify microformat content on a web page?
  • What major websites publish content in microformats?
  • Describe how you might make hCard or hCalendar microformat content downloadable to an address book or calendar application respectively.
  • Write the (X)HTML to markup a link to a Creative Commons license with the rel-tag microformat.

Image Tiling Techniques

  • Write a CSS style rule to tile a background image on the X axis of an HTML element.
  • Draw a diagram illustrating the sliding doors technique to create tabs. Indicate the tiled element.
  • Draw a diagram illustrating how a tiling image might be used to create a shadow behind a column in a web page layout.

CSS Shorthand

  • Write a style declaration that sets the width, color, and style of an element's border with just one style property.
  • Write a style declaration that sets the size, family, line-height, and weight of a a piece of type with just one style property.
  • Write a style declaration that sets a background image, background color, background repeat, and background position with just one style property.
  • Write a style declaration that sets the margin on all four sides of an element with just one style property.
  • Write a style declaration that sets the padding on all four sides of an element with just one style property.

Accessibility

  • Describe the W3C's role in defining accessibility standards.
  • List and describe 3 (X)HTML tags that can be used to make a web page more accessible.
  • Describe teh process you might use to ensure your website meets accessibility standards.

Learning Modules

Help us develop our living curriculum. Contribute a learning module.

Contributors

Primary course developer: Aarron Walter