course documents

course calendar

technical support

assessments

communication

student portfolio

main index

COURSE CALENDAR | WEEK 02 CLASS OUTLINE | Homework | Quiz

1. Take the quiz during the first 15 minutes of class.
2. Review Entrance Exam | Results
3. Download this Template HTML and Prototype Stylesheet
4. Web Standards Workshop
5. STRUCTURE REVIEW:
   1. XHTML Beginner Tutorial, XHTHL Intermediate Tutorial
   2. Understanding STRUCTURE vs. PRESENTATION
   3. Using Meaningful (Semantic) Markup
   4. Logical Structure using Meaningful Elements (examples)
   5. Additional Structure using divs and spans with meaningful, structural IDs and class names.
   6. Validation
   7. Document types, DOCTYPE switching, browser modes
6. PRESENTATION REVIEW:
   1. CSS Beginner Tutorial, CSS Intermediate Tutorial
   2. The Document Tree
   3. Selectors
   • Type Selectors (also called element or simple selectors)
   • Descendant Selectors
   • Class and ID Selectors
   • Pseudo-classes
   • Universal Selector
   • Child and Adjacent Sibling Selectors (Advanced)
   • Attribute Selectors (Advanced)
   4. Cascade, Specificity and Inheritance
   5. Planning, organizing, and maintaining stylesheets
      • Multiple stylesheets, imported and linked (example)
      • Commenting your CSS
      • Methods:
        • Architecting css
        • Tips for organizing your CSS
        • Organizing your stylesheet by grouping styles in sections
        • Organizing your stylesheet by grouping styles by meaning
7. CSS Style Guides:
   1. http://www.kevo.com/styleGuide.html
   2. http://sandbox.didcoe.id.au/styleguide/
   3. http://www.thenoodleincident.com/tutorials/typography/
8. Creating a complete Style Guide for your client site
   1. CSS Mastery: Sample Style Guide
   2. NY Public Library Style Guide
   3. University of Guelph Style Guide
   4. University of Pennsylvania Style Guide

Homework | Week 2

For next class:

CLIENT WORK

• Contact your client and ask them to fill out a Client Survey form.
• Create your own form by using this as a guide:
  • Sample Client Survey
• Only offer services you are able to provide and make sure the client understands that this is a class project and you have a schedule to keep.
• Please ask them to return the form by next class meeting.

TECHNICAL PREPARATION

• Post to the AD650 Learning Forum.
• Read Chapters 1 and 2 from the book CSS Mastery
• Prepare a Prototype Stylesheet with structural comments.
  • Include top comment block with date or version number, author, email, etc.
  • Breakdown the stylesheet into "chunks". Choose your own organization style, but make sure it's structural rather than presentational.
    • General, Typography, Headings, Links, Branding, Main Nav, Sub Nav, Main Content, Secondary Content, Footer, Forms, Tables, and Misc.
    • Global Styles, Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras
• Create the index.html for your Client Site Style Guide. Use the CSS Mastery Style Guide as a reference. Create the skeleton for the guide, not the actual content.