Fixed a typo in Specify How Fonts Degrade lesson. (#37567)
* Fixed a typo in Specify How Fonts Degrade. '-->!' inside the code is misleading and prompts a learner to put the exclamation mark when it is not needed as '-->!' is also followed by a period. Instead of "'-->!'.", it should be "'-->'." * Made text wording consistent for the test instructions. * Changed "To begin with," to "To begin," and fixed a minor typo. If we are going to use "To begin with," the sentence should be "To begin with the lesson/challenge", otherwise, "To begin" will be more than enough. Also added a space between "font(using HTML..." and changed it to "font (using HTML...".
This commit is contained in:
committed by
Manish Giri
parent
b59f72961f
commit
9db88a0d7c
@ -23,7 +23,7 @@ Generic font family names are not case-sensitive. Also, they do not need quotes
|
|||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id='instructions'>
|
<section id='instructions'>
|
||||||
To begin with, apply the <code>monospace</code> font to the <code>h2</code> element, so that it now has two fonts - <code>Lobster</code> and <code>monospace</code>.
|
To begin, apply the <code>monospace</code> font to the <code>h2</code> element, so that it now has two fonts - <code>Lobster</code> and <code>monospace</code>.
|
||||||
In the last challenge, you imported the <code>Lobster</code> font using the <code>link</code> tag. Now comment out that import of the <code>Lobster</code> font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your <code>h2</code> element degrades to the <code>monospace</code> font.
|
In the last challenge, you imported the <code>Lobster</code> font using the <code>link</code> tag. Now comment out that import of the <code>Lobster</code> font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your <code>h2</code> element degrades to the <code>monospace</code> font.
|
||||||
<strong>Note:</strong> If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font.
|
<strong>Note:</strong> If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font.
|
||||||
</section>
|
</section>
|
||||||
@ -37,9 +37,9 @@ tests:
|
|||||||
testString: assert($("h2").css("font-family").match(/^"?lobster/i));
|
testString: assert($("h2").css("font-family").match(/^"?lobster/i));
|
||||||
- text: Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.
|
- text: Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.
|
||||||
testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(code));
|
testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(code));
|
||||||
- text: Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.
|
- text: You should comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.
|
||||||
testString: assert(new RegExp("<!--[^fc]", "gi").test(code));
|
testString: assert(new RegExp("<!--[^fc]", "gi").test(code));
|
||||||
- text: Be sure to close your comment by adding <code>-->!</code>.
|
- text: You should close your comment by adding <code>--></code>.
|
||||||
testString: assert(new RegExp("[^fc]-->", "gi").test(code));
|
testString: assert(new RegExp("[^fc]-->", "gi").test(code));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
Reference in New Issue
Block a user