Syllabus and Textbook

• Syllabus.
• Tutors:
  • Kobe Collison
  • Anthony Gatti
  • Nikola Szymanska
• Web Style Guide - online version of course textbook, 4th Edition.
• Code Samples from the course textbook HTML & CSS:Design and Build Websites by Duckett.
• w3schools.com - my recommended site for HTML, CSS, and JavaScript reference as well as tutorials for all of the above.
• HTML5 Validator
• CSS Validator

Projects/Homework

• Final Exam Sample
  • sample final, part 1
  • sample final, part 2
  • moonClouds.jpg
  • santaSleigh.png
• Project 5 - due Friday, 12/9. If you want to use a different theme, please ask me regarding your idea before you implement your site.
  
  

  Note: I will test the two sizes of the project only in portrait mode.

Student Pages

Balderrama Brickman Deng Dumont El-Taha Fitzpatrick Flores Garneau Hartmann Horling

Ibrahimi Lopez McCretton Mongillo Pinette Rader Rego Shaw Sheerin

Shockley Sileo Sinistore Stevens Vafiadis Yohou Carlos Yu Florence Yu Zapata

Web Page Design

• HTML Reference; includes hands-on examples.
• Effective design principles: Repetition
• Effective design principles: Alignment
• Effective design principles: Contrast
• Effective design principles: Proximity
• 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.

Fonts

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

HTML and CSS Examples

HTML

• Links Are for Kids! - sample page showing links-n-things.
• Dads In Charge - early in-class page.
• Links Are for Kids 2! - same as above but with new banner.

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.
• dadsAndKidsCSS.html - Dads In Charge page (see above) using CSS.
• layoutStart.html - starting point for basic layout.
• layout.html - completed basic layout.
• layout2Start.html - starting point for positioning.
• layout2.html - finished version of above.
• 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.

More CSS Examples and JavaScript

• listsTablesStart.html - starting point for styling lists and tables.
• listsTables.html - completed styling for lists and tables.
• covidHome.html - sample site modeled after CoVerified app.
• formsIntro.html - first example using forms.
• formsWorks.html - same as above with a small portion of working JavaScript.
• Two swell images:
• overlap.html - overlapping above images using z-index.
• animatedMenu.html - basic animated menu.
• 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.
• MEDITECH - real-world responsive design example.
• viewportStart.html - using viewport dimensions as part of responsive design.
• viewportResp.html - completed example.
• restaurant.html - small example of responsive design.
• fluidStart.html - using percentages to achieve a fluid design.
• fluidDone.html - completed example.
• dadsAndKidsRespStart.html - starting point for responsive design with media queries.
• dadsAndKidsRespDone.html - solution using media queries.
• Sly as a
• A familiar scene:
• respImages.html - using srcset to choose best image size for a given device.
• Boyer Candies - a responsive design disaster.

JavaScript

• formsJS.html - using a form with JavaScript.
• formsJS2.html - using a form and using numbers in JavaScript.
• domJS.html - changing the DOM with JavaScript.
• addingJS.html - adding two input numbers.
• cartJS.html - updating a shopping cart.
• multipleJS.html - page needing multiple functions in JavaScript.

Day One Examples

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

---

Jason's List

• The Salty Pig - restaurant web page that changes according to device size.
• Oracle's Site - where's Java?
• Java - Oh, there it is.
• NY Times T Magazine.
• Boston Globe.
• boston.com.
• npr.org.
• JW Graham - a local jewelry store. Some interesting design choices on this web site.
• Yes! gallery - when things go slightly awry...

---

Claudia Fieo's List

• TuexDuex
• aWWWards
• Always Creative
• Mystic Aquarium
• Square Circle
• National Geographic
• MoMA

Mike's List

(in no particular order)

• Kingston Village - well, not exactly a great design, but...
• alice.org
• Art=Work - responsive design.
• El Guapo's - responsive design..?
• craigslist.
• Dr Pepper - nectar of the gods.
• MA RMV - oh, oh. A government website.
• Turkey Ministry of Health - oh, oh. Another government website.
• Dell's diagnostic tool - ahh, no wonder...
• lillypereira - a designer.
• Furlined - a production company.
• qz - Quartz Magazine.
• The CIA.
• The other CIA.
• Poptropica.
• Warhol Foundation.
• Louvre.
• 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.
• UNH student pages.