1. By default browsers add __ ems of space between list items. Answer with a number.
That's correct. Well done!
The correct answer:
0
Press Tab or click button to advance to next exercise.
2. Code the first line of the CSS styling that this HTML code refers to.
<ul class="special">
That's correct. Well done!
The correct code:
ul.special {
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. Code the second line only that adds an em of space between line items.
That's correct. Well done!
The correct code:
margin-bottom: 1em;
Press Tab or click button to advance to next exercise.
4. Code the first line of CSS that styles all numbered lists.
That's correct. Well done!
The correct code:
ol {
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 inset unordered lists left and right.
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.
To indent a list item text as a block, with the beginning of each line flush with the beginning of the first line, fill in the blank.
list-style-position: outside;
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.
Fill in the blank to run all the lines after the first one flush with the bullet or number.
list-style-position: ______
inside;
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. Style numbered lists 3/4 of normal font size.
That's correct. Well done!
The correct code:
ol {
font-size: .75em;
}
Press Tab or click button to advance to next exercise.
9. Style ordered lists with the same margin all-around. Make up the size of the margin.
That's correct. Well done!
Example:
ol {
margin: 1.5em;
}
Press Tab or click button to advance to next exercise.
10. Style a class of bullet list brown. Make up the class name. Use the color name, not a hex number.
That's correct. Well done!
Example:
ul.special {
color: brown;
}
Press Tab or click button to advance to next exercise.
11. Style list items so they're separated by .25 em.
That's correct. Well done!
The correct code:
li {
margin-bottom: .25em;
}
Press Tab or click button to advance to next exercise.
12. Style both bullet and numbered lists so they're inset 2 ems on the left. Do it in 3 lines of code. Specify the inset without specifying the 0 margins.
That's correct. Well done!
The correct code:
ul, ol {
margin-left: 2em;
}
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: 15 seconds. Fill in the blank to run all the lines after the first one flush with the bullet or number.
list-style-position: ______
Press Tab or click button to check answer.
The correct code:
inside;
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 30 seconds. Style numbered lists 3/4 of normal font size.
Press Tab or click button to check answer.
The correct code:
ol {
font-size: .75em;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
15. Time goal: 25 seconds. Style ordered lists with the same margin all-around. Make up the size of the margin.
Press Tab or click button to check answer.
Example:
ol {
margin: 1.5em;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 30 seconds. Style a class of bullet list brown. Make up the class name. Use the color name, not a hex number.
Press Tab or click button to check answer.
Example:
ul.special {
color: brown;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 25 seconds. Style list items so they're separated by .25 em.
Press Tab or click button to check answer.
The correct code:
li {
margin-bottom: .25em;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 30 seconds. Style both bullet and numbered lists so they're inset 2 ems on the left. Do it in 3 lines of code. Specify the inset without specifying the 0 margins.
Press Tab or click button to check answer.
The correct code:
ul, ol {
margin-left: 2em;
}
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.
