Syllabus, Textbooks, and Useful Links

• Syllabus.
• Canvas Site.
• Tutor:
  • Sayed Ibrahimi
• 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

• Project 3
  
• Project 2
  

Student Pages

Aaronson Adams Alfano Alves, Ethan Alves, Sydney Andrade Boudreau-Faria Brown Clark Collina

Cushing Foster Grullon Hillier Ko Lindsey Marciano Mennel Mullen Neves

Nicholson Pond Quinn Rhodes Roy 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.
• Phoenix Web IDE - online IDE to create web content. We will use this temporarily; see next item below. This works best on Chrome, Edge, or Opera.
• Phoenix IDE - an integrated development environment (IDE) which we will use for developing our web pages. Use the link to install the IDE on any platform (MacOS, Windows, or Linux) for free.
• 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.

---

The Grid System

• The 960 Grid System Made Easy
• Using the 960 Grid System as a Design Framework - using the 960 system with CSS. NEED TWO - between framework and webdesign

---

Fonts

• Top 10 Sans-Serif Fonts
• Top 10 Serif Fonts
• Google Fonts

HTML and CSS Examples

HTML

• mikePage.html - page we worked on Wednesday, 9/18. Some elements have been fixed so it passes the HTML Validator. To see the actual HTML code, in Firefox click on the hamburger menu in the upper right corner, choose "More tools", then "Page Source."
• Links Are for Kids! - (links.html) sample page showing links-n-things.
• Dads In Charge - (dadsAndKids.html) early in-class page.
• video.html - example showing how to display a video.

CSS

• introCSS.html - first CSS example.
• containersPlain.html - starting point for in-class examples.
• containers1.html - completed in-class example.
• containers2.html - more boxes in CSS.
• fonts.html - using fonts.
• fontAttr.html - some font attributes.
• alignmentStart.html - starting point for text and box alignment.
• alignment.html - completed alignment.
• dadsAndKidsCSSStart.html - starting point for Dads In Charge page (see above) using CSS (no tables!).
• dadsAndKidsCSS.html - completed page of above using only CSS.
• ecamm - e-commerce site for a company started by two Wheaton grads (Ken & Glen Aspeslagh, Class of 2000 ). See "About Us" link at the bottom of the page.
• My version of the "About Us" page on the ecamm site.
• listsTablesStart.html - starting point for styling lists and tables. And here's an arrow.
• listsTables.html - completed styling for lists and tables.
• animatedMenu.html - basic animated menu.
• navigation.html - a navigation bar.

More CSS Examples and JavaScript

More CSS

• layoutStart.html - starting point for basic layout.
• layout.html - completed basic layout.
• layoutFixed.html - new HTML5 layout elements in a fixed-width format.
• layoutFluid.html - new HTML5 layout elements in a liquid (fluid) format.
• layout2Start.html - starting point for positioning (relative, absolute, and fixed).
• layout2.html - finished version of above.
• Two swell images:
• overlap.html - overlapping above images using z-index.
• animationPlain.html - starting point for moose animation.
• animation.html - finished moose animation.
• animationTrans.html - a very excited moose.
• Let's play soccer!
• soccerRoll.html - rolling soccer ball.
• soccerKick.html - completed soccer animation.

Responsive Design

• MEDITECH - real-world responsive design example.
• viewportStart.html - using viewport dimensions as part of responsive design.
• viewportResp.html - completed example.

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

Image Formats

Photographic image in JPEG format

Photographic image in GIF format

Small portion of JPEG image

Small portion of GIF image

JPEG line image	GIF line image
Zoomed JPEG line image	Zoomed GIF line image
PNG with transparency	Plain ol' JPEG
webp format - 36KiB
jpg format - 69KiB