1. What type of element begins and ends a line, without sharing the line with another element? Answer with 1 word.
That's correct. Well done!
The correct answer:
block
Press Tab or click button to advance to next exercise.
2. What type of element can share a line with other elements? Answer with 1 word.
That's correct. Well done!
The correct answer:
inline
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. In terms of getting their own line or not, divs are, by default, _____ elements.
That's correct. Well done!
The correct answer:
block
Press Tab or click button to advance to next exercise.
4. In terms of getting their own line or not, images are, by default, _____ elements.
That's correct. Well done!
The correct answer:
inline
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 class that displays elements inline.
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.
Write the CSS (just one line of code) that specifies that an image is to occupy its own line exclusively.
display: block;
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 a class of paragraphs that, strangely, run together rather than starting on separate lines. The class name is "strange".
p.strange {
display: inline;
}
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. Code an image tag that displays the image on the left. Make up the image file name and type. Assume the file is in the same directory as the HTML file.
That's correct. Well done!
Example:
<img src="clown.png">
An image is placed on the left by default, so this is all it takes.
Press Tab or click button to advance to next exercise.
9. Code a class of images that run one to a line and have .2 ems of extra space that separates the bottom of one image from the one below it. Make up the class name.
That's correct. Well done!
Example:
img.stacked {
display: block;
margin-bottom: .2em;
}
Press Tab or click button to advance to next exercise.
10. Code a class of images that don't run one to a line and have .2 ems of extra space that separates the right edge of one image from the left edge of the next. Make up the class name.
That's correct. Well done!
Example:
img.regular {
margin-right: .2em;
}
Press Tab or click button to advance to next exercise.
11. Code two sentences that force the browser to put them on separate lines and add some extra vertical space between them.
That's correct. Well done!
Example:
<p>Let me start by saying this.</p>
<p>This.</p>
Press Tab or click button to advance to next exercise.
12. Group a heading id (your choice of size) and a paragraph id that make the heading and the paragraph that follows it run together. Make up a name for the ids.
That's correct. Well done!
Example:
h2#strange, p#weird {
display: inline;
}
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: 35 seconds. Code a class of paragraphs that, strangely, run together rather than starting on separate lines. The class name is "strange".
Press Tab or click button to check answer.
The correct code:
p.strange {
display: inline;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 25 seconds. Code an image tag that displays the image on the left. Make up the image file name and type. Assume the file is in the same directory as the HTML file.
Press Tab or click button to check answer.
Example:
<img src="clown.png">
An image is placed on the left by default, so this is all it takes.
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
15. Time goal: 60 seconds. Code a class of images that run one to a line and have .2 ems of extra space that separates the bottom of one image from the one below it. Make up the class name.
Press Tab or click button to check answer.
Example:
img.stacked {
display: block;
margin-bottom: .2em;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 40 seconds. Code a class of images that don't run one to a line and have .2 ems of extra space that separates the right edge of one image from the left edge of the next. Make up the class name.
Press Tab or click button to check answer.
Example:
img.regular {
margin-right: .2em;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 50 seconds. Code two sentences that force the browser to put them on separate lines and add some extra vertical space between them.
Press Tab or click button to check answer.
Example:
<p>Let me start by saying this.</p>
<p>This.</p>
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 45 seconds. Group a heading id (your choice of size) and a paragraph id that make the heading and the paragraph that follows it run together. Make up a name for the ids.
Press Tab or click button to check answer.
Example:
h2#strange, p#weird {
display: inline;
}
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.
