Syllabus, Textbooks, and Useful Links

• Syllabus.
• Canvas Site.
• Web Style Guide (3rd Edition) - online version of course textbook. NOTE: There is a newer 4th edition, but that one concentrates more on enterprise process (that is, how to design a site in a large corporate structure) rather than focusing on page design. Thus, we will use the 3rd edition, even though some of the examples may be a bit dated; the design principles are still valid.
• Course textbook HTML & CSS: Design and Build Websites by Duckett - free e-book available from Wheaton library.
• Code Samples from the above textbook HTML & CSS: Design and Build Websites.
• W3Schools.com - my recommended site for HTML, CSS, and JavaScript reference as well as tutorials for all of the above.
• Decimal to Binary Converter and vice-versa; also includes Hexadecimal.
• HTML5 Validator
• CSS Validator

Projects/Homework

• Homework 1
  hw1.zip - file to download.

Student Pages

Aaronson Adams Alfano Alves Andrade Boudreau-Faria Brown Clark Collina Cushing Foster

Grullon Hillier Ko Lama Leber Lindsey Marciano Mennel Michaud Mullen Neves

Nicholson Pond Quinn Rhodes Roy Rutledge Savino Smith Student Towle Verrochi

Software

We will use several software packages to create web pages and content, and for uploading files to the department (CS) server. These are all free and platform independent (meaning they'll work on MacOS and Windows). The software includes:

• Firefox browser. Although not strictly required, you may wish to download this browser so that your experience is consistent with what we do in class. We will be using many developer tools that are not the same across all browsers.
• Komodo IDE - an integrated development environment (IDE) which we will use for most of our basic design work. You can download Komodo for free.
• Sublime Text is an alternative to Komodo. This is a fine HTML editor, but it's not a fully integrated IDE. You can not see the resulting web page without loading the file onto a browser. This means developing is a two-step process. However, it is much easier to install, the editor is easy to use, and it will work on all platforms.
• FileZilla - a free FTP client. FTP refers to file transfer protocol, and is a method for transferring your files from your computer to the CS server. Be sure to download the FileZilla Client.
• VPN instructions for FortiClient - if you are accessing the cs server from off-campus, for security purposes, you first have to set up a virtual private network (VPN) with your computer. Follow the installation guidelines for your type of computer/operating system. Start the VPN (FortiClient) before running FileZilla, and everything should then work normally.
• GIMP - the Gnu Image Manipulation Program is a free version of a Photoshop-like paint program. Download using the link above.

Web Page Design

• The Repetition Principle of Graphic Design
• Effective design principles: Alignment
• Web Design Tips: Contrast
• The Proxority Principle in Web Design - both proximity and priority.
• Lazy Eyes: How We Read Online - article in Slate.

---

Color

• Some Color Theory.
• ColorPicker - applet to show colors and their numerical equivalents (in hexadecimal).
• 4096 Color Wheel - choose safe (and unsafe) web colors from 4096 choices.

---

Day One Examples.

• Zinc Bistro & Bar
• Firefly Gastropub
• Cafe Triskele
• And this one:
  Alta Restaurant and Wine Bar

---

Jason's List

• The Salty Pig - another typical restaurant site.
• Oracle's Site - where's Java?
• Java - Oh, there it is.
• NY Times T Magazine
• Boston Globe
• boston.com
• npr.org

---

Claudia Fieo's List

• TuexDuex
• aWWWards
• Always Creative
• Mystic Aquarium - why would I want to login? Howzabout that white space..?
• Square Circle - maybe not what you think.
• National Geographic
• MoMA

Mike's List

(in no particular order)

• alice.org - elements large enough??
• Art=Work - more complex responsive design.
• craigslist
• Dr Pepper - nectar of the gods.
• MA RMV - oh, oh. A government website. Let's renew our vehicle registration using a search...
• Turkey Ministry of Health - oh, oh. Another government website.
• Dell's diagnostic tool - let's identify my product!
• lillypereira - a designer.
• Furlined - a production company. Note how long it takes to load.
• qz - Quartz Magazine.
• The CIA
• The other CIA
• The other other CIA
• Poptropica
• Warhol Foundation
• Louvre, Paris.
• MFA, Boston.
• MET, New York.
• ecamm - e-commerce site for a company started by two Wheaton grads (Ken & Glen Aspeslagh, Class of 2000 ).
• Boston Red Sox.
• Or how about the NY Yankees?
• Amazon.com
• ebay.com