From 4d0d1b5ff08a4717a2eb37793fffbcbe04f146e1 Mon Sep 17 00:00:00 2001 From: Heather Kusmierz Date: Thu, 16 Mar 2017 18:48:51 -0400 Subject: [PATCH] Combine Google Font challenges into one --- .../applied-visual-design.json | 80 ------------------- .../01-responsive-web-design/basic-css.json | 12 +-- 2 files changed, 7 insertions(+), 85 deletions(-) diff --git a/seed/challenges/01-responsive-web-design/applied-visual-design.json b/seed/challenges/01-responsive-web-design/applied-visual-design.json index 1746aa4c70..6449d7e04a 100644 --- a/seed/challenges/01-responsive-web-design/applied-visual-design.json +++ b/seed/challenges/01-responsive-web-design/applied-visual-design.json @@ -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": [ - "Google Fonts 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 head 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:", - "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\">", - "Once the link is in place, the font is available to include in your CSS by using the pattern:
font-family: \"FAMILY_NAME\", GENERIC_NAME;.", - "In this example, \"FAMILY_NAME\" would be \"Open Sans\" and GENERIC_NAME would be sans-serif. 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.", - "
", - "Set the font-family of the body to use a family name of \"Open Sans\" and generic name of sans-serif." - ], - "challengeSeed": [ - "", - "
", - "
", - "
", - "

Alphabet

", - "
", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", - "
", - "
", - " Larry Page

", - " Sergey Brin", - "
", - "
", - "
" - ], - "tests": [ - "assert($('body').css('font-family') == '\"Open Sans\", sans-serif', 'message: The body tag should have the family name of \"Open Sans\" and the generic name of sans-serif.');" - ], - "solutions": [], - "type": "waypoint", - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "translations": {} - }, { "id": "587d781c367417b2b2512ac2", "title": "Set the font-size for Multiple Heading Elements", diff --git a/seed/challenges/01-responsive-web-design/basic-css.json b/seed/challenges/01-responsive-web-design/basic-css.json index 7b860ce57f..605c11a9df 100644 --- a/seed/challenges/01-responsive-web-design/basic-css.json +++ b/seed/challenges/01-responsive-web-design/basic-css.json @@ -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 call to Google to grab the Lobster font and load it into your HTML.", - "Copy the following code snippet and paste it into the top of your code editor:", + "Google Fonts 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 Lobster font. To do this, copy the following code snippet and paste it into the top of your code editor:", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Remember, before you can apply styles, like a new font, to an element, you'll need to create a CSS rule.", - "
h2 {
font-family: Sans-Serif;
}
", + "Now you can use the Lobster font in your CSS by using Lobster as the FAMILY_NAME as in the following example:
font-family: FAMILY_NAME, GENERIC_NAME;.", + "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 \"Open Sans\" font, but not to use the Lobster font.", "
", "Create a CSS rule for the font-family of Lobster and apply this new font to your h2 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 Monospace, Serif and Sans-Serif", + "There are several default fonts that are available in all browsers. These generic font families include Monospace, Serif and Sans-Serif", "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 Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style:", "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.", "
", "To begin with, apply the Monospace font to the h2 element, so that it now has two fonts - Lobster and Monospace.", "In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the Monospace font.",