1. Of the three border specifications, what is the last one? Answer with one word.
That's correct. Well done!
The correct answer:
color
Press Tab or click button to advance to next exercise.
2. Fill in the blank to specify a border that looks like this:
------------------
border: 3px ______ #0000ff;
That's correct. Well done!
The correct answer:
dashed
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. Fill in the blank to specify a border that looks like this:
...................
border: 3px ______ #0000ff;
That's correct. Well done!
The correct answer:
dotted
Press Tab or click button to advance to next exercise.
4. Fill in the blank to specify a border for the left side.
____________ 1px solid #0000ff;
That's correct. Well done!
The correct code:
border-left:
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 not tied to an element named "boxed."
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.
Specify a 2-pixel double border with a hex color, for all 4 sides. (You don't need to know which hex color. Just type the first character. I'll autocomplete.)
border: 2px double #cccccc;
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.
Create a class of h3 headings named "special" that have top and bottom borders that are solid, black, and 2 pixels wide.
h3.special {
border-top: 2px solid black;
border-bottom: 2px solid black;
}
Press Tab or click button to advance to next exercise.
That's correct. Well done!
8. In one line of code specify a solid border for all four sides that's 3 pixels wide. Specify any color name you like. (No spaces in color names.)
That's correct. Well done!
Example:
border: 3px solid green;
Press Tab or click button to advance to next exercise.
9. Create a class not tied to an element that specifies a top border, dotted, that's royalblue. It's 4 pixels wide. Make up the class name.
That's correct. Well done!
Example:
.fancy_top {
border-top: 4px dotted royalblue;
}
Press Tab or click button to advance to next exercise.
10. Create a class of paragraphs that has a border of minimal width on the left and one twice as wide on the right. Make them hex efefef in color. Make them solid. Make up the class name.
That's correct. Well done!
Example:
p.fancy_sides {
border-left: 1px solid #efefef;
border-right: 2px solid #efefef;
}
Press Tab or click button to advance to next exercise.
11. Style h3 headings so they have a 2 ems margin on all four sides and a dashed, 2-pixel wide darkblue border on all four sides.
That's correct. Well done!
The correct code:
h3 {
margin: 2em;
border: 2px dashed darkblue;
}
Press Tab or click button to advance to next exercise.
12. Create a class not tied to an element that (hideously) has two borders, top and right, of two different color names (not hex), two different widths, and two different line types. Start with the top border. Make up the class name.
That's correct. Well done!
Example:
.hideous {
border-top: 10px solid red;
border-right: 1px dashed white;
}
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: 95 seconds. Create a class of h3 headings named "special" that have top and bottom borders that are solid, black, and 2 pixels wide.
Press Tab or click button to check answer.
The correct code:
h3.special {
border-top: 2px solid black;
border-bottom: 2px solid black;
}
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. In one line of code specify a solid border for all four sides that's 3 pixels wide. Specify any color name you like. (No spaces in color names.)
Press Tab or click button to check answer.
Example:
border: 3px solid green;
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 not tied to an element that specifies a top border, dotted, that's royalblue. It's 4 pixels wide. Make up the class name.
Press Tab or click button to check answer.
Example:
.fancy_top {
border-top: 4px dotted royalblue;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 100 seconds. Create a class of paragraphs that has a border of minimal width on the left and one twice as wide on the right. Make them hex efefef in color. Make them solid. Make up the class name.
Press Tab or click button to check answer.
Example:
p.fancy_sides {
border-left: 1px solid #efefef;
border-right: 2px solid #efefef;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 55 seconds. Style h3 headings so they have a 2 ems margin on all four sides and a dashed, 2-pixel wide darkblue border on all four sides.
Press Tab or click button to check answer.
The correct code:
h3 {
margin: 2em;
border: 2px dashed darkblue;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 90 seconds. Create a class not tied to an element that (hideously) has two borders, top and right, of two different color names (not hex), two different widths, and two different line types. Start with the top border. Make up the class name.
Press Tab or click button to check answer.
Example:
.hideous {
border-top: 10px solid red;
border-right: 1px dashed white;
}
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.
