Spring 2013: Advanced Website Design & Development Syllabus

U48 318—Advanced Web Site Design and Development

Washington University in St. Louis
University College
Dept. of Communications & Journalism

Spring 2013
Saturdays 9:00 a.m.–12:00 p.m.
19 January—4 May 2013
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.


    During each class I will take a few minutes & discuss a mini-topic for 15 minutes or so. Some of these mini-topics include:

    • Snippets
    • Regular Expressions (RegEx)
    • Simplenote
    • OpenDNS
    • Backing up
    • Password safes
    • RSS
    • The best help sites
    • Ebooks
    • Markdown
    • Wolfram Alpha
    • Cookies
    • LAMP (& WAMP & MAMP)
    • Git & GitHub
    • Portable Apps
    • Encoding email addresses
    • SEO
    • Finding multimedia
    • AJAX
    • Minimizing code
    • WYSIWYG Web tools
    • Automating my Mac



    There are no required books. Readings will consist of articles, analyses, & ephemera from the Internet. Virtually everything you need can be accessed via my website. While I’m not requiring any books, I recommend the following as particularly worthy of your attention:


    In order to participate fully in this class, you need to sign up with GranneClass, an email discussion group hosted by Yahoo Groups.

    To subscribe, send an email with a short sentence explaining who you are to granneclass-subscribe@yahoogroups.com. To send and receive email, you do NOT need to be a Yahoo member.

    To view 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.


    Your grade will be based on the following factors:

    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


    Accommodation of disabilities

    Webster University is committed to providing accommodations and/or services to students with documented disabilities. If you have registered as a student with a documented disability and are entitled to classroom or testing accommodations, please inform me at the beginning of the course.

    Academic Integrity

    This course will follow Washington University’s policies concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question & referral to the appropriate individuals, who have 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 work should be your own.

    Any 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.

    If you have any questions about academic integrity, please bring them to me before you do anything that may jeopardize your grades, your education, & your future!


    I have no problem with students using a laptop, tablet, or smartphone during class for academic purposes; in fact, I would do the same thing. However, please do not use your personal device (or the computer on your desk) during class to conduct personal business such as Facebook, email, or IMing. This reduces your concentration & participation and distracts others around you. Repeated distractions will reduce your grade for the course. Please do what you need to do to keep cell phone distractions at a minimum.


    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 at granneman dot com. If you’d like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

    Key Links

    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, 19 January 2013


    Readings: CSS Selectors


    Saturday, 26 January 2013

    Continuation of 19 January 2013

    Fonts & formatting

    Saturday, 2 February 2013



    Gus-mas Break!

    Saturday, 9 February 2013

    Merrrry Gusmas!

    Fonts & formatting

    Saturday, 16 February 2013


    Practice with fonts & formatting

    Saturday, 23 February 2013

    In class:


    Media-specific styles & switching

    Saturday, 2 March 2013

    Switching CSS

    Lists for navigation

    Saturday, 9 March 2013

    IE Conditional Comments

    Turning unordered lists into site navigation

    Other readings: CSS & Navigation

    Spring Break!

    Saturday, 16 March 2013

    Centering & Floating

    Saturday, 23 March 2013




    Saturday, 30 March 2013

    Lightbox defined at Wikipedia


    How to Use fancyBox, a Better Lightbox

    Practice with the lightbox

    Saturday, 6 April 2013


    Saturday, 13 April 2013

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

    Sorting tables

    Saturday, 20 April 2013

    Sorting tables

    Something fun

    Saturday, 27 April 2013

    Readings for next class:


    Saturday, 4 May 2013

    In-class critiques of CSS Zen Garden projects

    Evaluation form

    WebSanity Top Secret