1. To convert a navbar from vertical to horizontal, you replace the following code with a ____ specification.
display: inline-block;
That's correct. Well done!
The correct answer:
width
Press Tab or click button to advance to next exercise.
2. You apply the width specification to the ____ element.
That's correct. Well done!
The correct answer:
div
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. The a (anchor) specification doesn't change. Neither does the __ specification.
That's correct. Well done!
The correct answer:
ul
Press Tab or click button to advance to next exercise.
4. Code the first line of CSS for the element that changes the most. Make up the ID.
That's correct. Well done!
Example:
div#hNav ul li {
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 code a horizontal navigation bar div.
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 the line that overrides the browser's default, which is to display a list vertically.
display: inline;
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.
Code the line that starts the menu on the left edge. Don't indent.
float: left;
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. Code three lines that style unordered list items contained in a div. The styling overrides the browser's default, which is to display the items vertically. Make up the div's id.
That's correct. Well done!
Example:
div#navigation ul li {
display: inline;
}
Press Tab or click button to advance to next exercise.
9. Code three lines that separate menu items with half an em of whitespace, using the most concise code. Make up what you need to.
That's correct. Well done!
Example:
div#navbar ul li {
margin-right: .5em;
}
Press Tab or click button to advance to next exercise.
10. Code three lines that make all menu items the same width. Make up what you need to.
That's correct. Well done!
Example:
div#menu ul li {
width: 15%;
}
Press Tab or click button to advance to next exercise.
11. Code five lines that color menu color blocks blue, center the anchors in them, and override the vertical arrangement of menu items. Make up the ID.
That's correct. Well done!
Example:
div#navigation ul li {
background-color: blue;
text-align: center;
display: inline;
}
Press Tab or click button to advance to next exercise.
12. Code five lines that specify the same 19% width for all color blocks, start the menu on the left, and place half an em of whitespace between them. Make up the ID.
That's correct. Well done!
Example:
div#navigation ul li {
width: 19%;
float: left;
margin-right: .5em;
}
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. Code the line that starts the menu on the left edge. Don't indent.
Press Tab or click button to check answer.
The correct code:
float: left;
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 40 seconds. Code three lines that style unordered list items contained in a div. The styling overrides the browser's default, which is to display the items vertically. Make up the div's id.
Press Tab or click button to check answer.
Example:
div#navigation ul li {
display: inline;
}
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 three lines that separate menu items with half an em of whitespace, using the most concise code. Make up what you need to.
Press Tab or click button to check answer.
Example:
div#navbar ul li {
margin-right: .5em;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 35 seconds. Code three lines that make all menu items the same width. Make up what you need to.
Press Tab or click button to check answer.
Example:
div#menu ul li {
width: 15%;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 95 seconds. Code five lines that color menu color blocks blue, center the anchors in them, and override the vertical arrangement of menu items. Make up the ID.
Press Tab or click button to check answer.
Example:
div#navigation ul li {
background-color: blue;
text-align: center;
display: inline;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 75 seconds. Code five lines that specify the same 19% width for all color blocks, start the menu on the left, and place half an em of whitespace between them. Make up the ID.
Press Tab or click button to check answer.
Example:
div#navigation ul li {
width: 19%;
float: left;
margin-right: .5em;
}
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.
