1. What is a section of a webpage that's a child of the body and the parent of a paragraph, that you can style? Answer with one word.
That's correct. Well done!
The correct answer:
div
Press Tab or click button to advance to next exercise.
2. The body has been styled black. If you code the following id, what color will headings and paragraph text inside the div be?
div#bright {
color: red;
}
That's correct. Well done!
The correct answer:
red
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. The body has been styled with 1 em font-size. The div has been styled with 2 em font-size. Paragraphs are styled with .5 em font-size. Paragraphs inside the div will be what percentage of the browser default size? Answer with a numeral and percentage sign.
That's correct. Well done!
The correct answer:
100%
Press Tab or click button to advance to next exercise.
4. You've created an id for a section called "main". Fill in the blank to assign this id in the following opening tag.
<______"main">
That's correct. Well done!
The correct answer:
div id=
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 class of div named "inset" that styles margins, with the largest margin on the 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.
Create a div ID named "boxed" that has a solid black 2-pixel border and all-around padding of .2 em. Specify the color with a word. Specify the padding concisely.
div#boxed {
border: 2px solid black;
padding: .2em;
}
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 opening HTML tag for a div and assign it a one-time-only styling named "main"
<div id="main">
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. Create a class of div with a .2 em margin on all four sides. Use the concise way to specify it. Make up the class name.
That's correct. Well done!
Example:
div.spacious {
margin: .2em;
}
Press Tab or click button to advance to next exercise.
9. Create a div id that centers all the text inside it. Make up the name.
That's correct. Well done!
Example:
div#mid {
text-align: center;
}
Press Tab or click button to advance to next exercise.
10. Code the opening and closing tags for a div of the class "pretty".
That's correct. Well done!
The correct code:
<div class="pretty"></div>
Press Tab or click button to advance to next exercise.
11. Code the HTML for a div not assigned a class or id, within which there's a paragraph not assigned a class or id. Code opening and closing tags and create a bit of paragraph text.
That's correct. Well done!
Example:
<div>
<p>Hello, world!</p>
</div>
Press Tab or click button to advance to next exercise.
12. Create a class of div that styles all text in it as Georgia, Times, or serif. Make up the class name.
That's correct. Well done!
Example:
div.formal {
font-family: Georgia, Times, serif;
}
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 opening HTML tag for a div and assign it a one-time-only styling named "main"
Press Tab or click button to check answer.
The correct code:
<div id="main">
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 35 seconds. Create a class of div with a .2 em margin on all four sides. Use the concise way to specify it. Make up the class name.
Press Tab or click button to check answer.
Example:
div.spacious {
margin: .2em;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
15. Time goal: 35 seconds. Create a div id that centers all the text inside it. Make up the name.
Press Tab or click button to check answer.
Example:
div#mid {
text-align: center;
}
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. Code the opening and closing tags for a div of the class "pretty".
Press Tab or click button to check answer.
The correct code:
<div class="pretty"></div>
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 35 seconds. Code the HTML for a div not assigned a class or id, within which there's a paragraph not assigned a class or id. Code opening and closing tags and create a bit of paragraph text.
Press Tab or click button to check answer.
Example:
<div>
<p>Hello, world!</p>
</div>
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. Create a class of div that styles all text in it as Georgia, Times, or serif. Make up the class name.
Press Tab or click button to check answer.
Example:
div.formal {
font-family: Georgia, Times, serif;
}
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.
