» CS 347: Lab 4 – Applying the Box Model

CS 347: Lab 4 – Applying the Box Model

September 8, 2020 by Chris Johnson. 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.

Task

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:

ABCD
EFG
HIJ
KLM
NOP
QRS
TUVW
XYZ

Fulfill these additional requirements:

Ensure the entire card, border and all, is 300×300.
Have the cards sit right next to each other, with absolutely no gap between them.
Have the first card sit at the top-left corner of the browser’s viewport, with no gap between the card and the browser’s “chrome.”
Surround each card with some kind of border.
Give the cards a background color.
Use external image URLs.
Use id-based selectors to apply unique styles, and class-based selectors for shared styles.

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

…