1. If you want to make a div narrower than the window it's in, what keyword do you employ?
That's correct. Well done!
The correct code:
width
Press Tab or click button to advance to next exercise.
2. If you want to center a div, what keyword do you employ?
That's correct. Well done!
The correct code:
margin
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. To explicitly specify the browser default of 100% width and 1em font-size, what element do you style? (4-letter word)
That's correct. Well done!
The correct answer:
body
Press Tab or click button to advance to next exercise.
4. When you're specifying a margin for a div, what is the keyword that centers the div?
That's correct. Well done!
The correct code:
auto
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 center a 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 centers a div.
margin: 0 auto 0 auto;
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.
The main div has 5% left and right margins. A div within the main div has 6% left and right margins. Code the line that styles its width specification.
width: 88%;
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. If the outermost div has 15% margins and the div within it has 10% margins, the inner div is __% as wide as the window.
That's correct. Well done!
The correct answer:
56
The width of the outer div is 70% of the window. The width of the inner div is 80% of that. Multiplying .70 by .80, you get .56.
Press Tab or click button to advance to next exercise.
9. Code a line that centers a div and gives it a 1em bottom margin.
That's correct. Well done!
The correct code:
margin: 0 auto 1em auto;
Press Tab or click button to advance to next exercise.
10. Let other coders know that you're accepting the browser's default that runs the content from edge to edge in the window (until you override the default.)
That's correct. Well done!
The correct code:
body {
width: 100%;
}
Press Tab or click button to advance to next exercise.
11. Code a div that will have 8% margins when it's centered. Don't code the line that centers it. Make up its ID.
That's correct. Well done!
Example:
div#sidebar {
width: 84%;
}
Press Tab or click button to advance to next exercise.
12. Code a div, specifying a width. Center it. Make up the ID and width.
That's correct. Well done!
Example:
div#secondary {
width: 84%;
margin: 0 auto 0 auto;
}
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. The main div has 5% left and right margins. A div within the main div has 6% left and right margins. Code the line that styles its width specification.
Press Tab or click button to check answer.
The correct code:
width: 88%;
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 10 seconds. If the outermost div has 15% margins and the div within it has 10% margins, the inner div is __% as wide as the window.
Press Tab or click button to check answer.
The correct answer:
56
The width of the outer div is 70% of the window. The width of the inner div is 80% of that. Multiplying .70 by .80, you get .56.
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. Code a line that centers a div and gives it a 1em bottom margin.
Press Tab or click button to check answer.
The correct code:
margin: 0 auto 1em auto;
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 25 seconds. Let other coders know that you're accepting the browser's default that runs the content from edge to edge in the window (until you override the default.)
Press Tab or click button to check answer.
The correct code:
body {
width: 100%;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 30 seconds. Code a div that will have 8% margins when it's centered. Don't code the line that centers it. Make up its ID.
Press Tab or click button to check answer.
Example:
div#sidebar {
width: 84%;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 60 seconds. Code a div, specifying a width. Center it. Make up the ID and width.
Press Tab or click button to check answer.
Example:
div#secondary {
width: 84%;
margin: 0 auto 0 auto;
}
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.
