CS 347: Lab 5 – Box Model
Dear students:
Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as many of the tasks below as you can. At the end of our time together, paste your HTML files into Crowdsource in order to receive credit.
Task 1
Create 300-by-300 cards for five sequential letters of 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”—because, as you know, an ashcat shovels coal.
Fulfill these additional requirements:
- Ensure the entire card, border and all, is 300×300.
- Have the cards sit right next to each other.
- Surround each card with some kind of border.
- Give the cards a background color.
- Use external image URLs.
- Center the images in the card.
- Use id-based selectors to apply unique styles, and class-based selectors for shared styles.
Task 2
Spell out a word containing at least three different letters using only the background colors of div elements whose box properties have been modified. For example, here’s the letter I made of a black box in the background and two white boxes on the left and right:
TODO
The next step of your learning is to complete the following tasks:
- Read the chapter Flexbox in All Over the Web.
- Continue working on the first project: a static website made of HTML and CSS.
- Research some aspect of web development on your own. Find articles and videos beyond what’s assigned. Summarize what you learn in a couple paragraphs of your own words and with a code sample in your next blog entry before Friday morning. Clearly put the date of the blog entry on your index page.
We don’t work on the same schedule, so encounter issues earlier rather than later.
See you next time.
