Spring 2014: Web Development Syllabus

COAP 2000.01 Introduction to Web Programming

Webster University
George Herbert Walker School of Business & Technology
Dept. of Mathematics & Computer Science

Spring 2014
Tu–Th Noon–1:20 p.m.
14 January–8 May 2014
East Academic Building 212, Webster

On this page…

    Instructor: Scott Granneman

    You can also read my full CV.

    Course Description

    Introduction to Web Programming (formerly titled XHTML Programming). HTML is the programming language used to develop home pages on the Internet. This course covers the most current tools available for developing HTML documents and posting pages on the World Wide Web. This course covers the basics of HTML5.

    What You're Going to Learn

    Basically, HTML5 & CSS & how to put them together correctly to create a website.

    Learning Outcomes


    During most classes I will take a few minutes & discuss a mini-topic for 10 minutes or so. Some of these mini-topics include:

    • Snippets
    • Offline documentation
    • 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
    • Formatting & beautifying code
    • Minimizing code
    • WYSIWYG Web tools
    • Automating my Mac
    • Programming fonts
    • Using Word to make webpages
    • Pattern libraries
    • The WebSanity Toolkit
    • jQuery



    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; however, when it's appropriate I will recommend books useful for further study & reference.

    OK, if you just have to kill a tree, I highly recommend Jon Duckett's HTML & CSS: Design and Build Websites. But it's not required.


    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.

    Please note that my Web development course at Washington University also uses GranneClass. Cross-pollination is a good thing in nature; I think it will be a good thing in this case as well. If a message is meant for students at a particular university, however, I will preface the subject with either "WASH U" or "WEBSTER" to indicate to whom it is directed.


    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.

    Drops and Withdrawals

    The Drop/Add & Withdrawal dates are listed each semester on the University website, in the University catalog, & in the Course Description book. If the course is dropped within the Drop/Add period, no notation of the course will appear on the student’s transcript. Withdrawals that take place after the published Drop date will result in the dreaded “W” appearing on the student’s transcript.


    Some random student assignments or projects may be retained by the School of Communications for the purpose of academic assessment as it relates to student learning outcomes. In those cases, the student’s name and all identifying information about the student will be removed from the assignment or project.

    Academic Integrity

    This course will follow Webster 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.

    Tech Support

    Need my help diagnosing a problem you’re having remotely? Something won’t install, or won’t work?

    1. Download & install the free Jing, which works on both Mac OS X & Windows.
    2. Record what you’re seeing on your computer screen, up to a maximum of 5 minutes.
    3. Upload the resulting video to screencast.com (also free).
    4. Send me a link to the video.

    In the email you send me, include the following information:

    1. What you did.
    2. What you thought should happen.
    3. What actually happened.
    4. Why that’s a problem.

    If you’re talking about a public webpage, don’t forget to include the URL!

    Tentative Schedule



    • Design theory
    • Middleware & databases
    • Hosting static sites on Amazon S3
    • CMS


    • XHTML & XML
    • HTML5
    • Images & links
    • URLs & paths
    • Forms
    • Tables


    • Selectors
    • @font-face
    • Media-specific CSS
    • Centering
    • Floating


    • Lightbox
    • Responsive Web Design
    • Lists into navigation
    • Sorting tables

    2014-01-14 Introductions



    2014-01-16 HTML 4.01


    Code & coding

    2014-01-21 HTML 4.01

    Code & coding

    Assignment: Basic formatting (due 2014-01-23)

    To help you…

    2014-01-23 HTML 4.01


    Offline documentation browsers

    Things you should know

    2014-01-28 Images & Links

    URLs: Images & Links

    Assignment: Pictures & colors

    2014-01-30 URLs

    Slides: URLs


    Assignment: Stooges

    2014-02-04 Multimedia

    Slides: Multimedia

    2014-02-06 OpenDNS & Markdown


    Slides: Markdown

    2014-02-11 Design Theory

    Design Theory

    2014-02-13 Formatting Code

    Assignment: Empty Nest

    2014-02-18 XHTML → HTML5

    Backing up

    Slides: XHTML & XML

    Slides: HTML5

    2014-02-20 Thinking About HTML5

    Assignment: Thinking About HTML5

    2014-02-25 Intro to CSS

    Slides: CSS Overview

    Assignment: Basic formatting (due 2014-03-04)

    To help you…




    2014-03-11 Spring Break!

    2014-03-13 Spring Break!

    2014-03-18 No class: speaking engagement

    Link will be posted when it’s available.

    2014-03-20 Fonts & Formatting

    Slides: Fonts & Formatting

    2014-03-25 Fonts & Formatting

    Assignment: Boor-ing Email

    2014-03-27 Fonts & Formatting walk-through

    2014-04-01 Pattern libraries / The box model

    Pattern Libraries

    Slides: Design Patterns

    Slides: CSS Box Model

    Assignment: Newspaper

    2014-04-03 Toolkits

    Slides: The WebSanity Toolkit

    2014-04-08 Media-Specific Styles

    HTML (& some CSS) formatters & beautifiers

    Slides: Media-specific CSS

    Assignment: CSS for printing

    2014-04-10 Media-Specific Styles/Heartbleed

    Work on media-specific styles.


    2014-04-15 Lists into Navigation & CMS

    Turn lists into navigation

    Assignment: From lists to navigation

    2014-04-17 Lists into Navigation / Color

    Slides: Color

    2014-04-22 Lightbox



    Assignment: fancyBox

    2014-04-24 Work day

    Work in class.

    2014-04-29 Responsive Web Design

    What is Responsive Web Design?


    Building a site with Bootstrap

    Assignment: Portfolio page



    2014-05-08 Conclusions

    Final due!

    Follow the instructions at Colostomo Website & hand it in.


    WebSanity Top Secret