U48 318—Advanced Website Design and Development
Washington University in St. Louis
Dept. of Communications & Journalism
Saturdays 9:00 a.m.–12:00 p.m.
25 January—3 May 2014
On this page…
Instructor: Scott Granneman
- Adjunct Professor
- Washington University in St. Louis
- Webster University
- Southern Illinois University Edwardsville
- Professional Education Technology & Leadership Center
- Oasis Digital
- 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) (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
- Mobile: 314-780-0489 (feel free to text, but please identify yourself)
- Blog: Chainsaw on a Tire Swing
- Twitter: @scottgranneman
You can also read my full CV.
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.
What You're Going to Learn
Basically, HTML & CSS & how to put them together correctly to create a website.
During each class I will take a few minutes & discuss a mini-topic for 15 minutes or so. Some of these mini-topics include:
- Regular Expressions (RegEx)
- Backing up
- Password safes
- The best help sites
- Wolfram Alpha
- LAMP (& WAMP & MAMP)
- Git & GitHub
- Portable Apps
- Encoding email addresses
- Finding multimedia
- 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:
- Jon Duckett: HTML & CSS: Design and Build Websites
- Eric Meyer: Eric Meyer on CSS: Mastering the Language of Web Design
- Eric Meyer: More Eric Meyer on CSS
- Christopher Schmitt: CSS Cookbook
- Jeffrey Zeldman: Designing with Web Standards
- John Allsopp: Developing with Web Standards
- The Zen of CSS: Visual Enlightenment for the Web*
Written by the designers of CSS Zen Garden. Wash U's library has the book available online (& many other web development books as well!). If you are off-campus you will need to log in to the Wash U library.
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.
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 email@example.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.
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 HTML & CSS in & out of class with a series of assigned projects involving the use of these technologies. Think of them as open-book tests, since you will be allowed (heck, encouraged!) to use your class notes, websites, & 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. Information about exactly how to proceed is at CSS Zen Garden Project.
Grades will be based on an average of the above as follows:
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.
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.
Need my help diagnosing a problem you’re having remotely? Something won’t install, or won’t work?
- Download & install the free Jing, which works on both Mac OS X & Windows.
- Record what you’re seeing on your computer screen, up to a maximum of 5 minutes.
- Upload the resulting video to screencast.com (also free).
- Send me a link to the video.
In the email you send me, include the following information:
- What you did.
- What you thought should happen.
- What actually happened.
- Why that’s a problem.
If you’re talking about a public webpage, don’t forget to include the URL!
Saturday, 25 January 2014
Saturday, 1 February 2014
Continuation of 25 January 2013
Fonts & formatting
Saturday, 8 February 2014
Slides: Fonts & formatting
- CSS Reset (to test, use the code at HTML & CSS Test Page)
- CSS Tools: Diagnostic CSS (to test, use the code at HTML & CSS Test Page & make errors)
Practice with fonts & formatting
Saturday, 15 February 2014
Assignment: Drop Caps, Formats, Definitions
Media-specific styles & switching
Saturday, 22 February 2014
Slides: Media-specific CSS
Assignment: CSS for printing
Download media-specific-easy.zip, unzip it, & create a print style sheet that only shows important content when printed, keeping the screen style sheet.
No class: sick
Saturday, 1 March 2014
Saturday, 8 March 2014
Slides: Animation & Transformation
- CSS Animation & Transformation (handouts) (250 KB PDF)
- CSS Animation & Transformation (slides) (250 KB PDF)
Saturday, 15 March 2014
Lists for navigation
Saturday, 22 March 2014
Slides: Navigation Design Patterns
- Web Design 05 Design Structure: Design Patterns in Action [Handouts]
- Web Design 05 Design Structure: Design Patterns in Action [Slides]
CSS: Lists into Navigation
- What not to do
Assignment: From lists to navigation
Layout & Lightbox
Saturday, 29 March 2014
Slides: CSS Layout
- CSS Layout: Boxes, Displays, & Positioning Handouts (5 MB PDF)
- CSS Layout: Boxes, Displays, & Positioning Slides (5 MB PDF)
- Block-Level Elements
- Vertical Centering a Single Line
- Vertical Centering Using
- jQuery at Wikipedia
- Lightbox at Wikipedia
- fancyBox: Zooming for images, HTML content, & multi-media, built on top of jQuery
No class: Gus-mas Break!
Saturday, 5 April 2014
Saturday, 12 April 2014
Responsive Web Design with Twitter Bootstrap
Saturday, 19 April 2014
What is Responsive Web Design?
- “What is Responsive Web Design?”
An excellent non-technical explanation.
- “Responsive Web Design” by Ethan Marcotte
The article that started it all.
- Responsive Design Patterns
Building a site with Bootstrap
Assignment: Portfolio page
Saturday, 26 April 2014
Goodbyes, Finals, & Evaluations
Saturday, 3 May 2014
Final Assignment: CSS Zen Garden
- 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.
- The Zen of CSS Design: Visual Enlightenment for the Web
Written by the designers of CSS Zen Garden. Some students find this helpful, & some do not.
- The CSS Zen Garden Assignment
Details about your final project.