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).

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

Web3 - due October 26. Seems like a long way off, but fall break and MAP day take up a bunch of days.
Michael Bach's illusions page.
Web2 - second project; due September 29. Your task is to redesign the E-Z Docking Solutions website.
Web1 - first project; due September 14.

php3.php - basic PHP statements; variables and arrays (php3.txt).
calculate.html - sending a value from client (html) to server (PHP) using GET and jQuery (calculate.txt).
calculate2.html - sending a value from client (html) to server (PHP) using POST and AJAX (calculate2.txt).
functions.php - shows use of functions in PHP (functions.txt). Note the placement of functions is irrelevant.
changePage.php - example changing page content using PHP (changePage.txt).
changePage2.php - same as above, but includes a PHP file (changePage2.txt).
buttonTest.php - example changing page content using, this time using different buttons (buttonTest.txt).
skiAreas.php - PHP that queries the skiAreas database and displays a single-value result (skiAreas.txt).

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.
layout2.html - completed layout #2.
navigationPlain.html - starting point for in-class exercise on navigation.
navigation.html - completed version of above.
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.
aboutEcamm.html - my version of the "About Us" page, above.
displayImagesStart.html - start of page that formats floating text around images.
displayImages.html - completed version of above.
fontAttr.html - a smattering of special effects.
animatedMenu.html - what it says.
Two nifty images:
animationStart.html - let's make a moose move!
animation.html - completed moose animation.
Let's play soccer!
soccerRoll.html - a rolling ball.

soccerKick.html - kicking the ball!

nameGame.html - using random numbers and arrays in JavaScript.
randimage.html - using arrays to store image objects.
randimage2.html - using arrays to store image names.
mooseStart.html - start of basic animation using a JavaScript array.
mooseGame.html - basic animation using a JavaScript array with interaction using two buttons.
doGraphics.html - basic graphics using the JavaScript canvas.
mooseCanvas.html - update of game above using Canvas, event listeners, and the DOM.
doGraphics2.html - rudimentary canvas example plus interaction.

postFormPlain.html - starting code for forms.
postForm.html - completed form to interact with the server using GET. To use POST, change the function call to "postFormPost.php" and the method to "POST".
validateFormPHP.html - check that data in input form is in range before posting; uses predefined PHP file.
inputData.html - get input data via text box and a button.
inputData2.html - get input data via text box only; data is returned when key is pressed.
jsonStart.html - starting code for in-class JSON exercise.
json.html - answer for previous problem.

jquery3.html - solution for in-class exercise using superheroes above (Version 1). Note: IDs have been fixed so that they are all unique.
jquery4.html - solution using superheroes (Version 2).

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.