Website Design & Development Syllabus

U48 318—Website Design and Development

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

Fall 2015
Saturdays 9:00 a.m.–noon
August 29—December 12, 2015
Eads 14

On this page…

    Instructor: Scott Granneman

    Adjunct Professor
    Washington University in St. Louis
    Webster University
    Instructor
    Professional Education Technology & Leadership Center
    Author
    Don’t Click on the Blue E!: Switching to Firefox (O’Reilly: 2005)
    Hacking Knoppix (Wiley & Sons: 2005)
    Linux Phrasebook (Pearson: 2006)
    Podcasting with Audacity: Creating a Podcast with Free Audio Software (Prentice Hall: 2007)
    Google Apps Deciphered: Compute in the Cloud to Streamline Your Desktop (Prentice Hall: 2008)
    Mac OS X Snow Leopard for Power Users: Advanced Capabilities and Techniques (Apress: 2010)
    Linux Phrasebook (Second Edition) in development (Pearson: 2015)
    Contributor, Ubuntu Hacks (O’Reilly: 2006) & Microsoft Vista for IT Security Professionals (Syngress: 2007)
    Former columnist for SecurityFocus & Linux Magazine
    Former professional blogger for The Open Source Weblog
    Full list of publications
    Business Owner
    Principal, WebSanity
    Contact Info
    scott@granneman.com
    Mobile: 314-780-0489 (feel free to text, but please identify yourself)
    Blog: Chainsaw on a Tire Swing
    Twitter: @scottgranneman
    Facebook: http://www.facebook.com/scottgranneman

    A full CV is available.

    Course Description

    This course covers Web site development using the three methods that have been used since Web design first began: hand-coding HTML using a text editor; building Web pages using a WYSIWYG editor like Dreamweaver; and using the most modern method, a Content Management System that separates design from content while making it easy for non-technical users to update a site. We will cover design principles, Cascading Style Sheets, server-side vs. client-side technologies, Web browsers, and Web servers. We will conclude the course with a brief overview of the future of Web development: XHTML & XML.

    What You're Going to Learn

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

    Mini-Topics

    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

    Requirements

    Texts

    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.

    Jon Duckett’s JavaScript and JQuery: Interactive Front-End Web Development is also very good if you want to learn JavaScript.

    Wash U's library has many web development books available online, at http://proquest.safaribooksonline.com.libproxy.wustl.edu. If you are on-campus, you should be able to simply access the books; if you are off-campus, you will need to log in with your WUSTL Key.

    Tasks

    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 Webster 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, I will preface the subject with either "WASH U" or "WEBSTER" to indicate to whom it is directed.

    Grading

    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

    Policies

    Accommodation of disabilities

    This 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!

    Distractions

    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.

    Netiquette

    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

    Introductions / HTML

    Saturday, 2015-08-29

    Scott: An Introduction

    Topics: Scott. Jans. Lovecraft. An outline. Mobility.

    Web Development: The Absolute Basics

    Topics: History. Browsers. Rendering engines. Simple webpages. Elements, attributes, & values. DTDs. Character encoding. Simple webpages, corrected. Comments. Editing tools. Templates.

    Tools

    NO CLASS: Labor Day

    Saturday, 2015-09-05

    Have a great weekend!

    HTML Overview

    Saturday, 2015-09-12

    Videos

    HTML Overview: Elements, Attributes, Entities

    Topics: Categorizing HTML elements. Basic document structure. Metadata. Global attributes. Lines & paragraphs. Outlines & sections. Grouping. CSS hooks.

    Assignment

    • Coming soon

    Tools

    • Brackets
      An open source, free, innovative HTML, CSS, & JavaScript editor

    HTML

    Saturday, 2015-09-19

    Videos

    HTML Overview: Elements, Attributes, Entities

    Lists. Quotations. Text semantics. Text formatting. Links.

    Assignments

    HTML

    Saturday, 2015-09-26

    Videos

    HTML Overview: Elements, Attributes, Entities

    Multimedia. Tables. Forms. Frames. Scripting. Foreign characters. Obnoxious & obsolete. Character entities. IE, bringing up the rear. Tools.

    Assignments

    HTML

    Saturday, 2015-10-03

    Assignments

    CSS Overview

    Saturday, 2015-10-10

    Videos

    CSS Overview

    History. Why CSS? The DOM.

    Assignments

    NO CLASS: Fall Break

    Saturday, 2015-10-17

    Enjoy your weekend!

    CSS

    Saturday, 2015-10-24

    Slides

    • CSS Overview
      Basic Selectors. Universal. Type. Class. ID. Grouping. Descendant Combinator. Formatting. <span> & <div>. Integrating CSS. Inheritance. Importance. Specificity. Order. The Cascade. Tools.

    Videos

    Assignments

    CSS Typography

    Saturday, 2015-10-31

    Slides

    • CSS Data Types
      Defined. Text.
    • CSS Typography
      Types. Measure. Leading. Scale. Operating system defaults. Web browser defaults. Core Fonts for the Web. ClearType Font Collection. Font properties.

    Videos

    Assignment

    • Colostomo Home Page
      Create a Brackets project named colostomo-home & reproduce this page without looking at the source code.

    CSS Typography

    Saturday, 2015-11-07

    Slides

    • CSS Typography
      Generated content. Font formats. @font-face. Licensing.
    • Markdown
      Background. Basic syntax. Process. MultiMarkdown. PHP Markdown Extra. Sundown. Pandoc. Testing. Software. Integrating.

    Videos

    Assignments

    Tables & Lists

    Saturday, 2015-11-14

    Slides

    Videos

    Assignment

    Media-Specific Styles

    Saturday, 2015-11-21

    Slides

    Videos

    Assignment

    NO CLASS: Thanksgiving

    Saturday, 2015-12-02

    Give thanks! Eat! Sleep!

    Responsive Web Design with Bootstrap

    Saturday, 2015-12-05

    Slides

    Assignment

    Files

    Goodbyes, Finals, & Evaluations

    Saturday, 2015-12-12

    Final due!

    Follow the instructions at Colostomo Website & hand it in.

    Evaluation

    WebSanity Top Secret