teaching machines

CS 347: Lab 4 – Applying the Box Model

September 8, 2020 by . Filed under fall-2020, labs, webdev.

Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in a handful of exercises, which you will complete in small groups.

Within your breakout room, designate one of your team to be the screen sharer. Screen sharer, share your screen and claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Screen sharer, be careful not to dominate. All members should contribute ideas.

Screen sharer, when your group is done, submit your group’s solution on Crowdsource. Team, if you finish early, you are free to work on other tasks—but please don’t submit them.


Create 300-by-300 cards for a few letters from the alphabet that might appear in an ABC book for children. Each card contains an image of an object starting with the card’s letter, with a label below of the form “LETTER is for OBJECT”. For instance, an A card might have an image of an individual shoveling coal into the boiler of a steam engine and a label that reads “A is for ASHCAT.”

Make cards only for the letters designated by your task number in the following list:

  1. ABCD
  2. EFG
  3. HIJ
  4. KLM
  5. NOP
  6. QRS
  7. TUVW
  8. XYZ

Fulfill these additional requirements:

Some hardcoding, parameter twiddling, and other unpleasant hacks may be necessary to accomplish this task. The bad news is that such hacks are par for the course in web development. The good news is that we’ll soon see a better layout system that eliminates many of them.

Reference Solutions