Spring 2012: Advanced Web Site Design and Development Syllabus

U48 318—Web Site Design and Development
Washington University University College

Spring 2012
Saturdays 9:00 a.m.–12:00 p.m.
21 January—5 May 2012
Eads 14

On this page…

    Instructor: Scott Granneman

    You can also read my full CV.

    Course Description

    This course focuses on one of the most important advanced areas of Web development: Cascading Style Sheets (CSS), which allow developers to set the formatting and positioning of Web pages in a standards-based and robust way. Through understanding CSS, Web developers can proceed to the next level of Web development.

    Required Texts

    Readings will consist of articles, analyses, & ephemera from the Internet. While I'm not requiring any books, I recommend the following as particularly worthy of your attention:

    In addition, students will need to sign up with the following listserv:

    • GranneClass, the class listserv, hosted by Yahoo Groups. To subscribe, send a blank email togranneclass-subscribe@yahoogroups.com. To review the home page and look at archived messages, go to http://groups.yahoo.com/group/granneclass; note, though, that you must be a Yahoo member (which is free and relatively painless) to use the group on the Web. To send and receive email, you do NOT need to be a Yahoo member.


    Your grade will be based on the following factors:

    • Class attendance and participation (25%): You are expected to attend class prepared to learn and discuss the topics with your fellow classmates. We may also work on in-class exercises, and you are expected to take an active part in those exercises.
    • In-class mini-projects (50%): We will practice CSS in class. At scheduled times, you will have one week to complete an assigned mini-project involving the use of these technologies. Think of it as an open-book test, since you will be allowed to use your class notes and any other resources you can access.
    • Final project: CSS Zen Garden (25%): Go to http://www.csszengarden.com & you'll find an awesome collection: a series of designs that all use the same HTML, but use wildly different CSS to change the look of the site. Download the sample HTML & CSS from the site and then go nuts changing the CSS to match a theme you come up with … but do not change the HTML! Your CSS Zen Garden design is due the last day of class, & we will take turns showcasing them to everyone.

    Grades will be based on an average of the above as follows:

    100 A+
    94-99 A
    89-93 A-
    86-88 B+
    83-85 B
    79-82 B-
    76-78 C+
    73-75 C
    69-72 C-
    66-68 D+
    63-65 D
    59-62 D-
    0-58 F


    Academic dishonesty

    This course will follow Washington University's policies concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question and/or referral to the college's Academic Integrity Office, which has discretion to impose a stricter penalty. While academic dishonesty includes cheating on exams and quizzes, it also includes plagiarism in written assignments. Plagiarism is not only passing off someone else's work as your own, but also giving your work to someone else to pass off as their own. It also includes submitting work from another course. While I strongly encourage you to discuss your work with each other in and out of class, and while you may research issues together, your writing should be your own. The papers you submit must be your work alone, and must include citations to all references in your work. Please include the URL, or Web address, for articles and resources found on the Internet.

    Accommodation of disabilities

    If you have a disability that might affect your ability to complete the required assignments, please contact me during the first week of class to discuss an accommodation.


    It is paramount that we respect each other online in our email listserv. Follow this simple rule: disagree with the idea, but not the person. In other words, it's OK to say "That's a bad idea, because …", and it's not OK to say "You're a bad/stupid/inconsiderate person, because …". If you have an issue with a classmate's behavior online, please bring it to me privately by emailing me at scott@granneman.com. If you'd like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

    As we proceed through the course, you will find yourself constantly installing, using, and depending upon certain software, websites, and resources. In an effort to make your life easier, I have consolidated most of those items onto Web Site Design and Development Key Links.

    Tentative Schedule


    Saturday, 21 January 2012


    Readings: CSS Selectors

    Gus-mas Break!

    Saturday, 28 January 2012


    Saturday, 4 February 2012

    Continuation of 21 January 2011

    Fonts & formatting

    Saturday, 11 February 2012



    Fonts & formatting

    Saturday, 18 February 2012


    Practice with fonts & formatting

    Saturday, 25 February 2012

    In class:


    Media-specific styles & switching

    Saturday, 3 March 2012

    Switching CSS

    Lists for navigation

    Saturday, 10 March 2012

    IE Conditional Comments

    Turning unordered lists into site navigation

    Other readings: CSS & Navigation

    Spring Break!

    Saturday, 17 March 2012

    Centering & Floating

    Saturday, 24 March 2012




    Saturday, 31 March 2012

    Lightbox defined at Wikipedia


    How to Use fancyBox, a Better Lightbox

    Practice with the lightbox

    Saturday, 7 April 2011


    Saturday, 14 April 2011

    Postioning: The Box Model
    Intro to Positioning
    Uses for Positioning
    Intro to Positioning Layouts
    Positioning Layouts

    Something fun

    Saturday, 21 April 2011

    Something fun

    Something fun

    Saturday, 30 April 2011

    Readings for next class:


    Saturday, 7 May 2011

    In-class critiques of CSS Zen Garden projects

    Evaluation form

    WebSanity Top Secret