1. By default the browser positions an image where? Answer with one word.
That's correct. Well done!
The correct answer:
left
Press Tab or click button to advance to next exercise.
2. What can you specify to move an image right? Answer with one 6-letter word.
That's correct. Well done!
The correct answer:
margin
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. By default, images share the same line if there's room. What is the word for this?
That's correct. Well done!
The correct answer:
inline
Press Tab or click button to advance to next exercise.
4. To style all images so each one occupies its own line, fill in the blank.
display: _____;
That's correct. Well done!
The correct code:
block
Press Tab or click button to advance to next exercise.
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 an image id that moves the image 5 ems to 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.
Code a class of images named "isolated" that displays each image on its own line.
img.isolated {
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.
Style all images so there's 1 em of extra space between them and 1 em of extra space above and below them. Allow the browser to start a row of them at the default position (i.e. no left margin). Specify all 4 margins in a single line of code.
img {
margin: 1em 1em 1em 0;
}
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. Code an HTML image tag that uses the CSS styling below to move the image to the right.
- Start with the id.
- Code the image source (make it up) including an image type of your choice.
- Include text that can display if the image doesn't. Make up the text. Don't bother with dimensions for this one.
img#right {
margin-left: 4em;
}
That's correct. Well done!
The correct code:
<img id="right" src="pony.gif" alt="Honda">
Press Tab or click button to advance to next exercise.
9. Create a class of image that doesn't share a line with others and has a solid red 2-pixel border. Use a word to specify the color. Make up the class name.
That's correct. Well done!
Example:
img.standout {
display: block;
border: 2px solid red;
}
Press Tab or click button to advance to next exercise.
10. Code an image tag, including dimensions (make them up). The image is the first of a series that will share the same line. It is positioned all the way over on the left. Make up the image source and type.
That's correct. Well done!
Example:
<img src="skier.png" width="300" height="550">
Press Tab or click button to advance to next exercise.
11. Code an image tag, including dimensions (make them up). The image is the first of a series that will share the same line. It is positioned all the way over on the left. Make up the image source. Give it the preferred file type that allows transparency.
That's correct. Well done!
Example:
<img src="skier.png" width="300" height="550">
Press Tab or click button to advance to next exercise.
12. Code an image, followed by a paragraph that displays on a separate line. Make up the image source. Use any of the three image types. Don't code alt text or dimensions. Include a little text in the paragraph.
That's correct. Well done!
Example:
<img src="skier.png">
<p>Taos has the best skiing in the world.</p>
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. Style all images so there's 1 em of extra space between them and 1 em of extra space above and below them. Allow the browser to start a row of them at the default position (i.e. no left margin). Specify all 4 margins in a single line of code.
Press Tab or click button to check answer.
The correct code:
img {
margin: 1em 1em 1em 0;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 45 seconds. Code an HTML image tag that uses the CSS styling below to move the image to the right.
- Start with the id.
- Code the image source (make it up) including an image type of your choice.
- Include text that can display if the image doesn't. Make up the text. Don't bother with dimensions for this one.
img#right {
margin-left: 4em;
}
Press Tab or click button to check answer.
The correct code:
<img id="right" src="pony.gif" alt="Honda">
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. Create a class of image that doesn't share a line with others and has a solid red 2-pixel border. Use a word to specify the color. Make up the class name.
Press Tab or click button to check answer.
Example:
img.standout {
display: block;
border: 2px solid red;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 50 seconds. Code an image tag, including dimensions (make them up). The image is the first of a series that will share the same line. It is positioned all the way over on the left. Make up the image source and type.
Press Tab or click button to check answer.
Example:
<img src="skier.png" width="300" height="550">
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 an image tag, including dimensions (make them up). The image is the first of a series that will share the same line. It is positioned all the way over on the left. Make up the image source. Give it the preferred file type that allows transparency.
Press Tab or click button to check answer.
Example:
<img src="skier.png" width="300" height="550">
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 130 seconds. Code an image, followed by a paragraph that displays on a separate line. Make up the image source. Use any of the three image types. Don't code alt text or dimensions. Include a little text in the paragraph.
Press Tab or click button to check answer.
Example:
<img src="skier.png">
<p>Taos has the best skiing in the world.</p>
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.
