Combine Google Font challenges into one
Heather Kusmierz
parent
d278c4be21
commit
462c3a6753
|
|
@ -882,86 +882,6 @@
|
|||
"challengeType": 0,
|
||||
"translations": {}
|
||||
},
|
||||
{
|
||||
"id": "587d781c367417b2b2512ac1",
|
||||
"title": "Use a Google Font",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://fonts.googleapis.com/css?family=Open+Sans",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"<a href='https://fonts.google.com/' target='_blank'>Google Fonts</a> is a great way to find free fonts to use in a project.",
|
||||
"Once you have selected the preferred font, copy the link tag that is provided and insert it into the <code>head</code> of your page.",
|
||||
"The Open Sans font is already added for you behind the scenes, but the code to include it in your own project is the following:",
|
||||
"<code><link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\"></code>",
|
||||
"Once the link is in place, the font is available to include in your CSS by using the pattern:<br><code>font-family: \"FAMILY_NAME\", GENERIC_NAME;</code>.",
|
||||
"In this example, \"FAMILY_NAME\" would be <code>\"Open Sans\"</code> and GENERIC_NAME would be <code>sans-serif</code>. The generic name is a fallback font in case the other specified font is not available.",
|
||||
"Family names are case-sensitive, but generic names are not. The quotes around \"Open Sans\" are required because it has a space in its name, but generic names do not require quotes because they are keywords in CSS.",
|
||||
"<hr>",
|
||||
"Set the <code>font-family</code> of the body to use a family name of <code>\"Open Sans\"</code> and generic name of <code>sans-serif</code>."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" ",
|
||||
" }",
|
||||
" h4 {",
|
||||
" text-align: center;",
|
||||
" background-color: rgba(45, 45, 45, 0.1);",
|
||||
" padding: 10px;",
|
||||
" font-size: 27px;",
|
||||
" text-transform: uppercase;",
|
||||
" }",
|
||||
" p {",
|
||||
" text-align: justify;",
|
||||
" }",
|
||||
" .links {",
|
||||
" text-align: left;",
|
||||
" color: black;",
|
||||
" opacity: 0.7;",
|
||||
" }",
|
||||
" #thumbnail {",
|
||||
" box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);",
|
||||
" }",
|
||||
" .fullCard {",
|
||||
" width: 245px;",
|
||||
" border: 1px solid #ccc;",
|
||||
" border-radius: 5px;",
|
||||
" margin: 10px 5px;",
|
||||
" padding: 4px;",
|
||||
" }",
|
||||
" .cardContent {",
|
||||
" padding: 10px;",
|
||||
" }",
|
||||
" .cardText {",
|
||||
" margin-bottom: 30px;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<div class=\"fullCard\" id=\"thumbnail\">",
|
||||
" <div class=\"cardContent\">",
|
||||
" <div class=\"cardText\">",
|
||||
" <h4>Alphabet</h4>",
|
||||
" <hr>",
|
||||
" <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>",
|
||||
" </div>",
|
||||
" <div class=\"cardLinks\">",
|
||||
" <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">Larry Page</a><br><br>",
|
||||
" <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">Sergey Brin</a>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('font-family') == '\"Open Sans\", sans-serif', 'message: The <code>body</code> tag should have the family name of <code>\"Open Sans\"</code> and the generic name of <code>sans-serif</code>.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"type": "waypoint",
|
||||
"releasedOn": "Feb 17, 2017",
|
||||
"challengeType": 0,
|
||||
"translations": {}
|
||||
},
|
||||
{
|
||||
"id": "587d781c367417b2b2512ac2",
|
||||
"title": "Set the font-size for Multiple Heading Elements",
|
||||
|
|
|
|||
|
|
@ -695,11 +695,12 @@
|
|||
"title": "Import a Google Font",
|
||||
"description": [
|
||||
"Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
|
||||
"First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
|
||||
"Copy the following code snippet and paste it into the top of your code editor:",
|
||||
"<a href='https://fonts.google.com/' target='_blank'>Google Fonts</a> is a free library of web fonts that you can use in your CSS by referencing the font's URL.",
|
||||
"To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the <code>Lobster</code> font. To do this, copy the following code snippet and paste it into the top of your code editor:",
|
||||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||||
"Remember, before you can apply styles, like a new font, to an element, you'll need to create a CSS rule.",
|
||||
"<blockquote>h2 {<br> font-family: Sans-Serif;<br>}</blockquote>",
|
||||
"Now you can use the <code>Lobster</code> font in your CSS by using <code>Lobster</code> as the FAMILY_NAME as in the following example:<br><code>font-family: FAMILY_NAME, GENERIC_NAME;</code>.",
|
||||
"The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.",
|
||||
"Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the <code>\"Open Sans\"</code> font, but not to use the <code>Lobster</code> font.",
|
||||
"<hr>",
|
||||
"Create a CSS rule for the <code>font-family</code> of <code>Lobster</code> and apply this new font to your <code>h2</code> element."
|
||||
],
|
||||
|
|
@ -807,10 +808,11 @@
|
|||
"id": "bad87fee1348bd9aedf08808",
|
||||
"title": "Specify How Fonts Should Degrade",
|
||||
"description": [
|
||||
"There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
|
||||
"There are several default fonts that are available in all browsers. These generic font families include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
|
||||
"When one font isn't available, you can tell the browser to \"degrade\" to another font.",
|
||||
"For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style:",
|
||||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||||
"Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.",
|
||||
"<hr>",
|
||||
"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>.",
|
||||
"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 from Google Fonts so that it isn't available anymore. Notice how your <code>h2</code> element degrades to the <code>Monospace</code> font.",
|
||||
|
|
|
|||
Loading…
Reference in New Issue