1. Code the line that gives cells black 1-pixel solid borders on all four sides. Don't indent the line.
That's correct. Well done!
The correct code:
border: 1px solid black;
Press Tab or click button to advance to next exercise.
2. Code two lines that give cells solid 1-pixel red borders on top and bottom. Use the color name, not a hex value. Don't indent the line.
That's correct. Well done!
The correct code:
border-top: 1px solid red;
border-bottom: 1px solid red;
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. Code the first line that specifies borders for both headings and cells. Don't indent.
That's correct. Well done!
The correct code:
th, td {
Press Tab or click button to advance to next exercise.
4. This code elimininates _______ between cells. (6-character plural word)
border-collapse: collapse;
That's correct. Well done!
The correct answer:
spaces
Press Tab or click button to advance to next exercise.
5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to create a border all around all data cells.
6. Click in the box and type the next character. I'll autocomplete. Don't type spaces or carriage returns. When the exercise is complete, I'll turn the exercise number green.
Code a bottom border for all headings, 2 pixels wide, DarkGray, solid.
th {
border-bottom: 2px solid DarkGray;
}
That's correct. Well done!
Press Tab or click button to advance to next exercise.
7. Fail-safe coding. If you type the wrong character, I'll cancel the keystroke. Type spaces. When the exercise is complete, I'll turn the exercise number green.
Specify a solid black top border of 3 pixels width for a table.
table {
border-top: 3px solid black;
}
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. For headings, specify left and right solid black borders. Your choice of border width.
That's correct. Well done!
Example:
th {
border-left: 1px solid black;
border-right: 1px solid black;
}
Press Tab or click button to advance to next exercise.
9. Code a dotted black, 1-pixel border all around all data cells of the class "novelty".
That's correct. Well done!
The correct code:
td.novelty {
border: 1px dotted black;
}
Press Tab or click button to advance to next exercise.
10. Specify for headings of a particular class plus all data cells a bottom border that's minimum width, black, and solid. Make up the class name.
That's correct. Well done!
Example:
th.special, td {
border-bottom: 1px solid black;
}
Press Tab or click button to advance to next exercise.
11. Specify for tables of a certain class left and right borders. Specify either type of border we've covered. Choose the width. Use any color name familiar to young children. Make up the class name.
That's correct. Well done!
Example:
table.standout {
border-left: 3px solid green;
border-right: 3px solid green;
}
Press Tab or click button to advance to next exercise.
12. Eliminate the space between cells.
That's correct. Well done!
Correct code:
table {
border-collapse: collapse;
}
Press Tab or click button to advance to next exercise.
The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.
13. Time goal: 40 seconds. Specify a solid black top border of 3 pixels width for a table.
Press Tab or click button to check answer.
The correct code:
table {
border-top: 3px solid black;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 75 seconds. For headings, specify left and right solid black borders. Your choice of border width.
Press Tab or click button to check answer.
Example:
th {
border-left: 1px solid black;
border-right: 1px solid black;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
15. Time goal: 45 seconds. Code a dotted black, 1-pixel border all around all data cells of the class "novelty".
Press Tab or click button to check answer.
The correct code:
td.novelty {
border: 1px dotted black;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 55 seconds. Specify for headings of a particular class plus all data cells a bottom border that's minimum width, black, and solid. Make up the class name.
Press Tab or click button to check answer.
Example:
th.special, td {
border-bottom: 1px solid black;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 85 seconds. Specify for tables of a certain class left and right borders. Specify either type of border we've covered. Choose the width. Use any color name familiar to young children. Make up the class name.
Press Tab or click button to check answer.
Example:
table.standout {
border-left: 3px solid green;
border-right: 3px solid green;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 40 seconds. Style all tables to eliminate space between cells.
Press Tab or click button to check answer.
Correct code:
table {
border-collapse: collapse;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
19. Access this live coding exercise at JS Fiddle. When you've completed the exercise, close the JS Fiddle window, and you'll be returned to this page. (If JS Fiddle displays a warning message saying that your changes will be reset, click Leave this Page.)
Click button to advance.
20. Access this live coding exercise at JS Fiddle. When you've completed the exercise, close the JS Fiddle window, and you'll be returned to this page. (If JS Fiddle displays a warning message saying that your changes will be reset, click Leave this Page.)
Click button to advance.
Congratulations. You've aced all the exercises for this chapter.
Post a review on Amazon for the paperback or the Kindle edition.
Email me to give me a compliment, complaint, or correction. I'll respond.
All of my books include free interactive online exercises that make the knowledge stick.
