1. Type the opening tag for the very biggest box on the webpage, the one you can't style.
That's correct. Well done!
The correct code:
<html>
Press Tab or click button to advance to next exercise.
2. Type the opening tag for the biggest box on the webpage that you can can style.
That's correct. Well done!
The correct code:
<body>
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. Type the opening tag that creates the largest box in the following code.
<div>
<p>Hello World!</p>
</div>
That's correct. Well done!
The correct code:
<div>
Press Tab or click button to advance to next exercise.
4. In the following code, how many boxes do you see? Type a numeral.
<div>
<h3>Here comes a greeting.</h3>
<p>Hello World!</p>
</div>
That's correct. Well done!
The correct answer:
3
The div, the heading, and the paragraph.
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 2 boxes inside a larger box.
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.
Type the opening and closing tags for the largest box you can style.
<body></body>
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.
Make the default style for all text on the page Georgia, Times, serif.
body {
font-family: Georgia, Times, serif;
}
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. If these are the only styles in the CSS file, what color will headings be?
body {
color: grey;
}
p {
color: black;
}
That's correct. Well done!
The correct answer:
grey
Press Tab or click button to advance to next exercise.
9. Type the opening tag for the innermost box in this code.
<body>
<h1>Our Mission</h1>
<div>
<p>We seek to acquire candy.</p>
</div>
</body>
That's correct. Well done!
The correct code:
<p>
Press Tab or click button to advance to next exercise.
10. Make black the default color for all text on the page.
That's correct. Well done!
The correct code:
body {
color: black;
}
Press Tab or click button to advance to next exercise.
11. Type the opening tag for the smallest box you see here.
<p class="standard"><span class="pop">Whatever
</span>, Dude.</p>
That's correct. Well done!
The correct code:
<span class="pop">
Press Tab or click button to advance to next exercise.
12. Specify a default color, size, and font-style for a page, in that order. Use a color name that a child would recognize.
That's correct. Well done!
The correct code:
body {
color: black;
font-size: 1em;
font-style: normal;
}
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: 50 seconds. Make the default style for all text on the page Georgia, Times, serif.
Press Tab or click button to check answer.
The correct code:
body {
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.
14. Time goal: 10 seconds. If these are the only styles in the CSS file, what color will headings be?
body {
color: grey;
}
p {
color: black;
}
Press Tab or click button to check answer.
The correct answer:
grey
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
15. Time goal: 10 seconds. Type the opening tag for the innermost box in this code.
<body>
<h1>Our Mission</h1>
<div>
<p>We seek to acquire candy.</p>
</div>
</body>
Press Tab or click button to check answer.
The correct code:
<p>
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. Make black the default color for all text on the page.
Press Tab or click button to check answer.
The correct code:
body {
color: black;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 20 seconds. Type the opening tag for the smallest box you see here.
<p class="standard"><span class="pop">Whatever
</span>, Dude.</p>
Press Tab or click button to check answer.
The correct code:
<span class="pop">
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 65 seconds. Specify a default color, size, and font-style for a page, in that order. Use a color name that a child would recognize.
Press Tab or click button to check answer.
The correct code:
body {
color: black;
font-size: 1em;
font-style: normal;
}
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.
