Comp 212 - Web Development (Fall 2025)

Introductory Information

• Syllabus.
• Canvas site.
• zyBooks Online Textbook.
  1. Sign in or create an account at link above
  2. Enter zyBook code: WHEATONCOLLEGECOMP212GousieFall2025
  3. Subscribe ($64 for the semester)
• Web Style Guide, 4th Edition. This is also a clear example of why physical books are superior for reader comprehension than online texts (explained in class). The 3rd Edition, although older, might actually be better.

• Phoenix Code - one of the free IDE options. This can be used online (can be slow) or downloaded to your computer. Did I mention FREE?
• Komodo IDE - free IDE for web development.
• FileZilla - free FTP (file transfer protocol) application. Download the client, not the server.
• XAMPP - free software to set up a development server on your computer (Apache, MySQL, PHP, and Perl).

• HTML5 Validator.
• CSS Validator.
• Got CSS??

Coding & Design Resources

• HTML tutorials from W3Schools, my recommended source for many web tools.
• HTML reference (W3Schools).
• CSS reference (W3Schools).
• SQL Tutorial (W3Schools).
• Bootstrap - front-end component library.
• Bootstrap tutorial (W3Schools).
• Materialize - another front-end component library. This is used in this page.

Colors

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

Fonts

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

Projects/Exams

• Web2 - second project; due September 29.
• Web1 - first project; due September 14.

In-Class Examples

HTML and CSS

• dadsAndKids
• if_dads1.jpg
• if_dads3.jpg
• if_dads4.jpg
• if_dads6.jpg
• grave.jpg
• dadsAndKids.html - solution to first in-class exercise.
• introCSS.html - first in-class CSS example.
• containersPlain.html - starting point for in-class exercise on containers.
• containers1.html - first example of using containers starting with above.
• containers2.html - second example of using containers.
• fonts.html - changing fonts.
• layoutPlain.html - starting point for in-class exercise on layout.
• layout.html - completed layout example showing inline vs. block.
• dadsAndKidsCSS.html - same as above, but now using CSS rather than a table. You can probably do better!
• layout2Plain.html - starting point for more layout work.
• navigationPlain.html - starting point for in-class exercise on navigation.
• layoutFluid.html - basic page design with fluid elements.
• ecamm - e-commerce site for a company started by two Wheaton grads (Ken & Glen Aspeslagh, Class of 2000). See the About Us page.

Web Page Design

• Dr. Martens.
• Graphic Images - a local Plainville company, not doing the town any favors with this site.
• SIGSPATIAL 2019, SIGSPATIAL 2021 - conference pages for computational geospatial researchers. Like deja vu...
• The Salty Pig - example of a decent responsive design.
• Oracle - well..?
• NY Times T Magazine - responsive design.
• boston.com.
• Boston Globe.
• npr.org - pretty good responsive design.
• craigslist.
• lillypereira - a designer.
• furlined - a production company.
• qz - Quartz Magazine. What is their purpose??
• The CIA.
• The other CIA - look familiar?
• The other, other CIA.
• Mattel - ahh, those were the days.
• Warhol Foundation. Haven't we seen this design before?? And this is for Andy Warhol!!
• Boston Museum of Science.
• Louvre - curiously, not responsive.
• Boston Red Sox - typical pro team page.
• NE Patriots - another little local sports team.
• Amazon.com.
• Ebay.com.
• aWWWWards - showcasing "good" web designs. You can find some Legwork pages here.
• MoMA - it's something.

Student Web Pages