improvements to copy of text and test output
This commit is contained in:
Quincy Larson
@@ -372,11 +372,11 @@
|
||||
"difficulty": 1.09,
|
||||
"description": [
|
||||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.",
|
||||
"With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.",
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an \"inline style\".",
|
||||
"That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).",
|
||||
"With CSS, there are hundreds of CSS <code>attributes</code> that you can use to change the way an element looks on your page.",
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
|
||||
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
|
||||
"At the top of your code, create a <code>style</code> element like this: <code><style></style></code>.",
|
||||
"Inside that style element, you can create a \"CSS selector\" for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this: <code><style>h2 {color: red;}</style></code>.",
|
||||
"Inside that style element, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this: <code><style>h2 {color: red;}</style></code>.",
|
||||
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles."
|
||||
],
|
||||
"tests": [
|
||||
@@ -426,19 +426,19 @@
|
||||
"title": "Use a CSS Class to Style an Element",
|
||||
"difficulty": 1.11,
|
||||
"description": [
|
||||
"Create a CSS class called \"red-text\" and apply it to your <code>h2</code> element.",
|
||||
"Create a CSS class called <code>red-text</code> and apply it to your <code>h2</code> element.",
|
||||
"Classes are reusable styles that can be added to HTML elements.",
|
||||
"Here's the anatomy of a CSS class:",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how style tags are composed, which is also described in detail on the following lines.\" src=\"https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png\">",
|
||||
"You can see that we've created a CSS class called \"blue-text\" within the <code><style></code> tag.",
|
||||
"You can see that we've created a CSS class called <code>blue-text</code> within the <code><style></code> tag.",
|
||||
"You can apply a class to an HTML element like this: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>.",
|
||||
"Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
|
||||
"Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for \".red-text\"."
|
||||
"Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for <code>.red-text</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class \"red-text\".')",
|
||||
"assert($(\"h2\").attr(\"style\") === undefined, 'Please make sure there is no inline <code> style = </code> in you <code>h2</code> and change the color by using the css class <code> red-text </code>')"
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.')",
|
||||
"assert($(\"h2\").attr(\"style\") === undefined, 'Please make sure there is no inline <code>style = </code> in you <code>h2</code> and change the color by using the css class <code>red-text</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -489,15 +489,15 @@
|
||||
"title": "Style Multiple Elements with a CSS Class",
|
||||
"difficulty": 1.12,
|
||||
"description": [
|
||||
"Apply the \"red-text\" class to your <code>h2</code> and <code>p</code> elements.",
|
||||
"Apply the <code>red-text</code> class to your <code>h2</code> and <code>p</code> elements.",
|
||||
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||||
"Remember that CSS selectors require a period at the beginning like this: <code>.blue-text { color: blue; }</code>, but that class declarations don't use a period, like this: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class \"red-text\".')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.')",
|
||||
"assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>p</code> element should be red.')",
|
||||
"assert($(\"p\").hasClass(\"red-text\"), 'Your <code>p</code> element should have the class \"red-text\".')"
|
||||
"assert($(\"p\").hasClass(\"red-text\"), 'Your <code>p</code> element should have the class <code>red-text</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -539,15 +539,15 @@
|
||||
"difficulty": 1.13,
|
||||
"description": [
|
||||
"Create a second <code>p</code> element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"Then, inside your <code><style></code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.",
|
||||
"Font size is controlled by the \"font-size\" CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your \"red-text\" class."
|
||||
"Then, inside your <code><style></code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels.",
|
||||
"Font size is controlled by the <code>font-size</code> CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your <code>red-text</code> class."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"p\").length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')",
|
||||
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
|
||||
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided additional \"Kitty Ipsum\" text.')",
|
||||
"assert($(\"p\").css(\"font-size\") === \"16px\", 'Give your <code>p</code> elements the font-size of 16px.')"
|
||||
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided additional Kitty Ipsum text.')",
|
||||
"assert($(\"p\").css(\"font-size\") === \"16px\", 'Give your <code>p</code> elements the <code>font-size</code> of 16px.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -590,12 +590,12 @@
|
||||
"title": "Set the Font Family of an Element",
|
||||
"difficulty": 1.14,
|
||||
"description": [
|
||||
"Make all of your <code>p</code> elements use the \"Monospace\" font.",
|
||||
"You can set an element's font by using the \"font-family\" attribute.",
|
||||
"For example, if you wanted to set your <code>h2</code> element's font to \"Sans-serif\", you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
|
||||
"Make all of your <code>p</code> elements use the <code>Monospace</code> font.",
|
||||
"You can set an element's font by using the <code>font-family</code> attribute.",
|
||||
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font \"Monospace\".')"
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>Monospace</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -637,16 +637,16 @@
|
||||
"title": "Import a Google Font",
|
||||
"difficulty": 1.15,
|
||||
"description": [
|
||||
"Apply the <code>font-family</code> of \"Lobster\" to your <code>h2</code> element.",
|
||||
"First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.",
|
||||
"Apply the <code>font-family</code> of <code>Lobster</code> to your <code>h2</code> element.",
|
||||
"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 your code editor:",
|
||||
"<code><link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>.",
|
||||
"Now you can set \"Lobster\" as a font-family attribute on your <code>h2</code> element."
|
||||
"Now you can set <code>Lobster</code> as a font-family attribute on your <code>h2</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the \"Lobster\" font.')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font \"Lobster\".')",
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font \"Monospace\".')"
|
||||
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font <code>Lobster</code>.')",
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font <code>Monospace</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -691,14 +691,14 @@
|
||||
"title": "Specify How Fonts Should Degrade",
|
||||
"difficulty": 1.16,
|
||||
"description": [
|
||||
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". Leave \"Lobster\" as the font-family for your <code>h2</code> elements. Make them \"degrade\" to \"Monospace\" when \"Lobster\" isn't available.",
|
||||
"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: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
|
||||
"Now comment out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
|
||||
"There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>. Leave <code>Lobster</code> as the font-family for your <code>h2</code> elements. Make them \"degrade\" to <code>Monospace</code> when <code>Lobster</code> isn't available.",
|
||||
"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: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
|
||||
"Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font \"Lobster\".')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')",
|
||||
"assert(new RegExp(\"<!--\", \"gi\").test(editor), 'Comment out your call to Google for the \"Lobster\" font by putting <code><!-- in front of it.')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font <code>Monospace</code> when <code>Lobster</code> is not available.')",
|
||||
"assert(new RegExp(\"<!--\", \"gi\").test(editor), 'Comment out your call to Google for the <code>Lobster</code> font by putting <code><!-- in front of it.')",
|
||||
"assert(new RegExp(\"-->\", \"gi\").test(editor), 'Be sure to close your comment by deleting all trailing comment tags, i.e. <code>--></code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -804,12 +804,12 @@
|
||||
"title": "Size your Images",
|
||||
"difficulty": 1.18,
|
||||
"description": [
|
||||
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
|
||||
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>.",
|
||||
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>.",
|
||||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class \"smaller-image\".')",
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')",
|
||||
"assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -860,15 +860,15 @@
|
||||
"title": "Add Borders Around your Elements",
|
||||
"difficulty": 1.19,
|
||||
"description": [
|
||||
"CSS borders have attributes like style, color and width.",
|
||||
"CSS borders have attributes like <code>style</code>, <code>color</code> and <code>width</code>.",
|
||||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>.",
|
||||
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo."
|
||||
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class \"smaller-image\".')",
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class \"thick-green-border\".')",
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\")), 'Give your image a border width of 10px.')",
|
||||
"assert(new RegExp(\"solid\", \"gi\").test(editor), 'Give your image a border style of \"solid\".')",
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')",
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.')",
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\")), 'Give your image a border width of <code>10px</code>.')",
|
||||
"assert(new RegExp(\"solid\", \"gi\").test(editor), 'Give your image a border style of <code>solid</code>.')",
|
||||
"assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -924,12 +924,12 @@
|
||||
"difficulty": 1.20,
|
||||
"description": [
|
||||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels.",
|
||||
"Give your cat photo a <code>border-radius</code> of 10 pixels."
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
|
||||
"Give your cat photo a <code>border-radius</code> of <code>10px</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".')",
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of 10 pixels')"
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of <code>10px</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@@ -990,10 +990,10 @@
|
||||
"difficulty": 1.21,
|
||||
"description": [
|
||||
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
|
||||
"Give your cat photo a <code>border-radius</code> of 50%."
|
||||
"Give your cat photo a <code>border-radius</code> of <code>50%</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')",
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50 percent,</code> making it perfectly circular.')",
|
||||
"assert(editor.match(/50%/g), 'Be sure to use a percentage instead of a pixel value.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -1054,14 +1054,14 @@
|
||||
"title": "Link to External Pages with Anchor Elements",
|
||||
"difficulty": 1.22,
|
||||
"description": [
|
||||
"<code>a</code> elements or \"anchor\" elements, are used to link to content outside of the current page.",
|
||||
"<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
|
||||
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
|
||||
"Here's an example: <code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"Create an <code>a</code> element that links to <code>http://catphotoapp.com</code> and has \"cat photos\" as its \"anchor text\"."
|
||||
"Create an <code>a</code> element that links to <code>http://catphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
|
||||
"assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\"')",
|
||||
"assert(/http:\\/\\/catphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http://catphotoapp.com<code>.')",
|
||||
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')"
|
||||
],
|
||||
@@ -1128,7 +1128,7 @@
|
||||
"Again, here's a diagram of an <code>a</code> element for your reference:",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
|
||||
"Here's an example: <code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"\"Nesting\" just means putting one element inside of another element.",
|
||||
"<code>Nesting</code> just means putting one element inside of another element.",
|
||||
"Now nest your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text."
|
||||
],
|
||||
"tests": [
|
||||
@@ -1203,7 +1203,7 @@
|
||||
"description": [
|
||||
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
|
||||
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
|
||||
"Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol (#) to turn it into a dead link."
|
||||
"Replace your <code>a</code> element's <code>href</code> attribute with a <code>#</code>, also known as a hash symbol, to turn it into a dead link."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"a\").attr(\"href\") === \"#\", 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')"
|
||||
@@ -1272,12 +1272,12 @@
|
||||
"description": [
|
||||
"You can make elements into links by nesting them within an <code>a</code> element.",
|
||||
"Nest your image within an <code>a</code> element. Here's an example: <code><a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a></code>.",
|
||||
"Remember to use the hash symbol (#) as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
|
||||
"Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
|
||||
"Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"a\").children(\"img\").length > 0, 'Nest your <code>img</code> element within an <code>a</code> element.')",
|
||||
"assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')",
|
||||
"assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.')",
|
||||
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -1343,13 +1343,13 @@
|
||||
"title": "Add Alt Text to an Image for Accessibility",
|
||||
"difficulty": 1.26,
|
||||
"description": [
|
||||
"<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
|
||||
"<code>alt</code> attributes, also known as <code>alt text</code>, are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
|
||||
"In short, every image should have an <code>alt</code> attribute!",
|
||||
"You can add an <code>alt</code> attribute right in the img element like this: <code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/></code>.",
|
||||
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo."
|
||||
"Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')"
|
||||
"assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to <code>A cute orange cat lying on its back</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@@ -1414,14 +1414,14 @@
|
||||
"title": "Create a Bulleted Unordered List",
|
||||
"difficulty": 1.27,
|
||||
"description": [
|
||||
"HTML has a special element for creating unordered lists, or bullet point-style lists.",
|
||||
"HTML has a special element for creating <code>unordered lists</code>, or bullet point-style lists.",
|
||||
"Unordered lists start with a <code><ul></code> element. Then they contain some number of <code><li></code> elements.",
|
||||
"For example: ",
|
||||
"<code><ul></code>",
|
||||
"  <code><li>milk</li></code>",
|
||||
"  <code><li>cheese</li></code>",
|
||||
"<code></ul></code>",
|
||||
"would create a bulleted list of \"milk\" and \"cheese\".",
|
||||
"would create a bullet point-style list of \"milk\" and \"cheese\".",
|
||||
"Replace your <code>p</code> elements with an unordered list of three things that cats love."
|
||||
],
|
||||
"tests": [
|
||||
@@ -1492,7 +1492,7 @@
|
||||
"title": "Create an Ordered List",
|
||||
"difficulty": 1.28,
|
||||
"description": [
|
||||
"HTML has a special element for creating ordered lists, or numbered-style lists.",
|
||||
"HTML has a special element for creating <code>ordered lists</code>, or numbered-style lists.",
|
||||
"Ordered lists start with a <code><ol></code> element. Then they contain some number of <code><li></code> elements.",
|
||||
"For example:",
|
||||
"<code><ol></code>",
|
||||
@@ -1578,13 +1578,13 @@
|
||||
"title": "Create a Text Field",
|
||||
"difficulty": 1.29,
|
||||
"description": [
|
||||
"Now let's create a web form.",
|
||||
"Now let's create a web <code>form</code>.",
|
||||
"Text inputs are a convenient way to get input from your user.",
|
||||
"You can create one like this: <code><input type=\"text\"></code>. Note that <code>input</code> elements are self-closing.",
|
||||
"Create an <code>input</code> element of type \"text\" below your lists."
|
||||
"Create an <code>input</code> element of type <code>text</code> below your lists."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"input[type=text]\").length > 0, 'Your app should have a text field input element.')"
|
||||
"assert($(\"input[type=text]\").length > 0, 'Your app should have an <code>input</code> element of type <code>text</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@@ -1819,13 +1819,13 @@
|
||||
"title": "Add a Submit Button to a Form",
|
||||
"difficulty": 1.32,
|
||||
"description": [
|
||||
"Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
|
||||
"Let's add a <code>submit</code> button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
|
||||
"Here's an example submit button: <code><button type=\"submit\">this button submits the form</button></code>.",
|
||||
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text."
|
||||
"Add a submit button to your <code>form</code> element with type <code>submit</code> and \"Submit\" as its text."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\").children(\"button\").length > 0, 'Your form should have a button inside it.')",
|
||||
"assert($(\"button\").attr(\"type\") === \"submit\", 'Your submit button should have the attribute \"type\" set to \"submit\".')",
|
||||
"assert($(\"button\").attr(\"type\") === \"submit\", 'Your submit button should have the attribute <code>type</code> set to <code>submit</code>.')",
|
||||
"assert($(\"button\").text().match(/submit/gi), 'Your submit button should have the text \"submit\".')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
|
||||
],
|
||||
@@ -1904,11 +1904,11 @@
|
||||
"difficulty": 1.33,
|
||||
"description": [
|
||||
"You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
|
||||
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code><input type=\"text\" required></code>.",
|
||||
"Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field."
|
||||
"For example, if you wanted to make a text input field required, you can just add the word <code>required</code> within your <code>input</code> element, you would use: <code><input type=\"text\" required></code>.",
|
||||
"Make your text <code>input</code> a <code>required</code> field, so that your user can't submit the form without completing this field."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"input\").prop(\"required\"), 'Your text <code>input</code> element should have the \"required\" attribute.')"
|
||||
"assert($(\"input\").prop(\"required\"), 'Your text <code>input</code> element should have the <code>required</code> attribute.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@@ -1985,20 +1985,20 @@
|
||||
"title": "Create a Set of Radio Buttons",
|
||||
"difficulty": 1.34,
|
||||
"description": [
|
||||
"You can use \"radio buttons\" for questions where you want the user to only give you one answer.",
|
||||
"You can use <code>radio buttons</code> for questions where you want the user to only give you one answer.",
|
||||
"Radio buttons are a type of <code>input</code>.",
|
||||
"Each of your radio buttons should be nested within its own <code>label</code> element.",
|
||||
"All related radio buttons should have the same <code>name</code> attribute.",
|
||||
"Here's an example of a radio button: <code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>.",
|
||||
"Add to your form a pair of radio buttons. Each radio button should be nested within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"."
|
||||
"Add to your form a pair of radio buttons. Each radio button should be nested within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
|
||||
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of \"indoor-outdoor\".')",
|
||||
"assert($(\"label\").length > 1, 'Each of your two radio button elements should be nested in a label element.')",
|
||||
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.')",
|
||||
"assert($(\"label\").length > 1, 'Each of your two radio button elements should be nested in a <code>label</code> element.')",
|
||||
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
|
||||
"assert($(\"label\").text().match(/indoor/gi), 'One of your radio buttons should have the label \"indoor\".')",
|
||||
"assert($(\"label\").text().match(/outdoor/gi), 'One of your radio buttons should have the label \"outdoor\".')"
|
||||
"assert($(\"label\").text().match(/indoor/gi), 'One of your radio buttons should have the label <code>indoor</code>.')",
|
||||
"assert($(\"label\").text().match(/outdoor/gi), 'One of your radio buttons should have the label <code>outdoor</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@@ -2078,18 +2078,18 @@
|
||||
"title": "Create a Set of Checkboxes",
|
||||
"difficulty": 1.35,
|
||||
"description": [
|
||||
"Forms commonly use \"checkboxes\" for questions that may have more than one answer.",
|
||||
"Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.",
|
||||
"Checkboxes are a type of <code>input</code>.",
|
||||
"Each of your checkboxes should be nested within its own <code>label</code> element.",
|
||||
"All related checkbox inputs should have the same <code>name</code> attribute.",
|
||||
"Here's an example of a checkbox: <code><label><input type=\"checkbox\" name=\"personality\"> Loving</label></code>.",
|
||||
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
|
||||
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
|
||||
"assert($('label:has(input[type=\"checkbox\"])').length > 2, 'Each of your three checkbox elements should be nested in its own <code>label</code> element.')",
|
||||
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, \"Make sure each of your <code>label</code> elements has a closing tag.\")",
|
||||
"assert($('input[type=\"checkbox\"]:nth-child(1)').attr(\"name\") === \"personality\", 'Give your checkboxes buttons the <code>name</code> attribute of \"personality\".')"
|
||||
"assert($('input[type=\"checkbox\"]:nth-child(1)').attr(\"name\") === \"personality\", 'Give your checkboxes buttons the <code>name</code> attribute of <code>personality</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@@ -2170,7 +2170,7 @@
|
||||
"description": [
|
||||
"You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
|
||||
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code><input type=\"radio\" name=\"test-name\" checked></code>.",
|
||||
"Set the first of your radio buttons and the first of your checkboxes to both be checked by default."
|
||||
"Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"radio\"]').prop(\"checked\"), 'Your first radio button on your form should be checked by default.')",
|
||||
@@ -2256,7 +2256,7 @@
|
||||
"title": "Nest Many Elements within a Single Div Element",
|
||||
"difficulty": 1.38,
|
||||
"description": [
|
||||
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
|
||||
"The <code>div</code> element, also known as a division element, is a general purpose container for other elements.",
|
||||
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
|
||||
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code><div></code> and close it on another line with <code></div></code>.",
|
||||
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
|
||||
@@ -2351,12 +2351,12 @@
|
||||
"title": "Give a Background Color to a Div Element",
|
||||
"difficulty": 1.39,
|
||||
"description": [
|
||||
"You can set an element's background color with the \"background-color\" attribute.",
|
||||
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
|
||||
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element."
|
||||
"You can set an element's background color with the <code>background-color</code> attribute.",
|
||||
"For example, if you wanted an element's background color to be <code>green</code>, you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
|
||||
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div\").hasClass(\"gray-background\"), 'Give your <code>div</code> element the class \"gray-background\".')",
|
||||
"assert($(\"div\").hasClass(\"gray-background\"), 'Give your <code>div</code> element the class <code>gray-background</code>.')",
|
||||
"assert($(\".gray-background\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'Your <code>div</code> element should have a gray background.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -2441,11 +2441,11 @@
|
||||
"In addition to classes, each HTML element can also have an <code>id</code> attribute.",
|
||||
"There are several benefits to using <code>id</code> attributes, and you'll learn more about them once you start using jQuery.",
|
||||
"<code>id</code> attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same <code>id</code> attribute.",
|
||||
"Here's an example of how you give your <code>h2</code> element the id of \"cat-photo-app\": <code><ul id=\"cat-photo-app\"></code>",
|
||||
"Give your <code>form</code> element the id \"cat-photo-form\"."
|
||||
"Here's an example of how you give your <code>h2</code> element the id of <code>cat-photo-app</code>: <code><ul id=\"cat-photo-app\"></code>",
|
||||
"Give your <code>form</code> element the id <code>cat-photo-form</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of \"cat-photo-form\".')"
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@@ -2530,13 +2530,13 @@
|
||||
"difficulty": 1.392,
|
||||
"description": [
|
||||
"One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
|
||||
"Here's an example of how you can take your element with the <code>id</code> attribute of \"cat-photo-element\" and give it the background color of green. In your <code>style</code> element: <code>#cat-photo-element { background-color: green; }></code>",
|
||||
"Note that inside your <code>style</code> element, you always reference classes by putting a \".\" in front of their names. You always reference ids by putting a \"#\" in front of their names.",
|
||||
"Try giving your form, which now has the <code>id</code> attribute of \"cat-photo-form\", a green background."
|
||||
"Here's an example of how you can take your element with the <code>id</code> attribute of <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element: <code>#cat-photo-element { background-color: green; }></code>",
|
||||
"Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.",
|
||||
"Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of \"cat-photo-form\".')",
|
||||
"assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your <code>form</code> element should have the \"background-color\" of green.')",
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.')",
|
||||
"assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your <code>form</code> element should have the <code>background-color</code> of green.')",
|
||||
"assert(editor.match(/<form.*cat-photo-form.*>/gi) && editor.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has both an <code>id</code> attribute.')",
|
||||
"assert(!editor.match(/<form.*style.*>/gi) && !editor.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.')"
|
||||
],
|
||||
@@ -2626,11 +2626,11 @@
|
||||
"Three important attributes control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
|
||||
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
|
||||
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
|
||||
"When you increase the green box's <code>padding</code>, it will increase the distance between the text \"padding\" and the border around it.",
|
||||
"When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
|
||||
"Change the <code>padding</code> of your green box to match that of your red box."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'Your <code>green-box</code> class should give elements 20px of padding.')"
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'Your <code>green-box</code> class should give elements <code>20px</code> of <code>padding</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -2699,7 +2699,7 @@
|
||||
"Change the <code>margin</code> of the green box to match that of the red box."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"20px\", 'Your <code>green-box</code> class should give elements 20px of margin.')"
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"20px\", 'Your <code>green-box</code> class should give elements <code>20px</code> of <code>margin</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -2767,10 +2767,10 @@
|
||||
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
|
||||
"If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
|
||||
"Try to set the <code>margin</code> to a negative value like the one for the red box.",
|
||||
"Change the <code>margin</code> of the green box to -15 pixels, so it fills the entire horizontal width of the yellow box around it."
|
||||
"Change the <code>margin</code> of the green box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"-15px\", 'Your <code>green-box</code> class should give elements -15px of margin.')"
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"-15px\", 'Your <code>green-box</code> class should give elements <code>-15px</code> of <code>margin</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -2836,13 +2836,13 @@
|
||||
"description": [
|
||||
"Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
|
||||
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes.",
|
||||
"Give the green box a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
|
||||
"Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements 40px of padding.')",
|
||||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements 40px of padding.')",
|
||||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements 20px of padding.')",
|
||||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements 20px of padding.')"
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -2906,7 +2906,7 @@
|
||||
"title": "Add Different Margins to Each Side of an Element",
|
||||
"difficulty": 1.44,
|
||||
"description": [
|
||||
"Give the green box a <code>margin</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
|
||||
"Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.",
|
||||
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
|
||||
"CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes."
|
||||
],
|
||||
@@ -2979,13 +2979,13 @@
|
||||
"description": [
|
||||
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
|
||||
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
|
||||
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
|
||||
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements 40px of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements 20px of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements 40px of <code>padding</code>.')"
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3049,13 +3049,13 @@
|
||||
"Let's try this again, but with <code>margin</code> this time.",
|
||||
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
|
||||
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
|
||||
"Use <code>Clockwise Notation</code> to give an element a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
|
||||
"Use <code>Clockwise Notation</code> to give an element a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements 40px of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements 20px of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements 40px of <code>margin</code>.')"
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3118,11 +3118,11 @@
|
||||
"description": [
|
||||
"Now let's start fresh and talk about CSS inheritance.",
|
||||
"Every HTML page has <code>body</code> element.",
|
||||
"We can prove that the <code>body</code> element exists here by giving it a \"background-color\" of black.",
|
||||
"We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.",
|
||||
"We can do this by adding <code>body { background-color: black; }</code> to our <code>style</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of black.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3151,17 +3151,17 @@
|
||||
"description": [
|
||||
"Now we've proven that every HTML page has a <code>body</code> element, and that its <code>body</code> element can also be styled with CSS.",
|
||||
"Remember, you can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
|
||||
"First, create a <code>h1</code> element with the text \"Hello World\".",
|
||||
"Then, let's give all elements on your page the color of \"green\" by adding <code>color: green;</code> to your <code>body</code> element's style declaration.",
|
||||
"Finally, give your <code>body</code> element the font-family of \"Monospace\" by adding <code>font-family: Monospace;</code> to your <code>body</code> element's style declaration."
|
||||
"First, create a <code>h1</code> element with the text <code>Hello World</code>.",
|
||||
"Then, let's give all elements on your page the color of <code>green</code> by adding <code>color: green;</code> to your <code>body</code> element's style declaration.",
|
||||
"Finally, give your <code>body</code> element the font-family of <code>Monospace</code> by adding <code>font-family: Monospace;</code> to your <code>body</code> element's style declaration."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text \"Hello World\".')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')",
|
||||
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')",
|
||||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the \"color\" attribute of green.')",
|
||||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the \"font-family\" attribute of \"Monospace\".')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font \"Monospace\" from your <code>body</code> element.')",
|
||||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> attribute of <code>green</code>.')",
|
||||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> attribute of <code>Monospace</code>.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -3194,12 +3194,12 @@
|
||||
"description": [
|
||||
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
|
||||
"For example, your <code>h1</code> element can't be both green and pink at the same time.",
|
||||
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class \"override\" the <code>body</code> element's <code>color: green;</code> CSS attribute?",
|
||||
"Create a CSS class called \"pink-text\" that gives an element the color pink.",
|
||||
"Give your <code>h1</code> element the class of \"pink-text\"."
|
||||
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS attribute?",
|
||||
"Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
|
||||
"Give your <code>h1</code> element the class of <code>pink-text</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class \"pink-text\".')",
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -3233,13 +3233,13 @@
|
||||
"difficulty": 1.49,
|
||||
"description": [
|
||||
"Our \"pink-text\" class overrode our <code>body</code> element's CSS declaration!",
|
||||
"We just proved that our classes will override the <code>body</code> element's CSS. So the next logical question is, what can we do to override our \"pink-text\" class?",
|
||||
"Create an additional CSS class called \"blue-text\" that gives an element the color blue. Make sure it's below your \"pink-text\" class declaration.",
|
||||
"Apply the \"blue-text\" class to your <code>h1</code> element in addition to your \"pink-text\" class, and let's see which one wins."
|
||||
"We just proved that our classes will override the <code>body</code> element's CSS. So the next logical question is, what can we do to override our <code>pink-text</code> class?",
|
||||
"Create an additional CSS class called <code>blue-text</code> that gives an element the color blue. Make sure it's below your <code>pink-text</code> class declaration.",
|
||||
"Apply the <code>blue-text</code> class to your <code>h1</code> element in addition to your <code>pink-text</code> class, and let's see which one wins."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class \"pink-text\".')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class \"blue-text\".')",
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h1</code> element should be blue.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -3277,15 +3277,15 @@
|
||||
"description": [
|
||||
"We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.",
|
||||
"But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?",
|
||||
"Let's override your \"pink-text\" and \"blue-text\" classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.",
|
||||
"Give your <code>h1</code> element the id attribute of \"orange-text\". Remember, id styles look like this: <code><h1 id=\"orange-text\"></code>",
|
||||
"Leave the \"blue-text\" and \"pink-text\" classes on your <code>h1</code> element.",
|
||||
"Create a CSS declaration for your \"orange-text\" id in your <code>style</code> element. Here's and example of what this looks like: <code>#brown-text { color: brown; }</code>"
|
||||
"Let's override your <code>pink-text</code> and <code>blue-text</code> classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.",
|
||||
"Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-text</code>. Remember, id styles look like this: <code><h1 id=\"orange-text\"></code>",
|
||||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
|
||||
"Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's and example of what this looks like: <code>#brown-text { color: brown; }</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class \"pink-text\".')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class \"blue-text\".')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of \"orange-text\".')",
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -3326,14 +3326,14 @@
|
||||
"description": [
|
||||
"So we've proven that id declarations override class declarations, regardless of where they are declared in your <code>style</code> element CSS.",
|
||||
"There are other ways that you can override CSS. Do you remember inline styles?",
|
||||
"Use an in-line style to try to make our <code>h1</code> element white. Remember, in line styles look like this: <code><h1 style=\"color: green\"></code>",
|
||||
"Leave the \"blue-text\" and \"pink-text\" classes on your <code>h1</code> element."
|
||||
"Use an <code>in-line style</code> to try to make our <code>h1</code> element white. Remember, in line styles look like this: <code><h1 style=\"color: green\"></code>",
|
||||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class \"pink-text\".')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class \"blue-text\".')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of \"orange-text\".')",
|
||||
"assert(editor.match(/<h1.*style/gi) && editor.match(/<h1.*style.*color:/gi).length > 0, 'Give your <code>h1</code> element the inline style of \"color: white\".')",
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/<h1.*style/gi) && editor.match(/<h1.*style.*color:/gi).length > 0, 'Give your <code>h1</code> element the inline style of <code>color: white</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'Your <code>h1</code> element should be white.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -3378,16 +3378,16 @@
|
||||
"Yay! We just proved that in-line styles will override all the CSS declarations in your <code>style</code> element.",
|
||||
"But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.",
|
||||
"In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use <code>!important</code>.",
|
||||
"Let's go all the way back to our \"pink-text\" class declaration. Remember that our \"pink-text\" class was overridden by subsequent class declarations, id declarations, and in-line styles.",
|
||||
"Let's go all the way back to our <code>pink-text</code> class declaration. Remember that our <code>pink-text</code> class was overridden by subsequent class declarations, id declarations, and in-line styles.",
|
||||
"Let's add the keyword <code>!important</code> to your pink-text element's color declaration to make 100% sure that your <code>h1</code> element will be pink.",
|
||||
"An example of how to do this is: <code>color: red !important;</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class \"pink-text\".')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class \"blue-text\".')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of \"orange-text\".')",
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/<h1.*style/gi) && editor.match(/<h1.*style.*color:/gi).length > 0, 'Your <code>h1</code> element should have the inline style of \"color: white\".')",
|
||||
"assert(editor.match(/pink.*\\!important/gi) && editor.match(/pink.*\\!important;/gi).length > 0, 'Your \"pink-text\" class should have the <code>!important</code> keyword to override all other declarations.')",
|
||||
"assert(editor.match(/pink.*\\!important/gi) && editor.match(/pink.*\\!important;/gi).length > 0, 'Your <code>pink-text</code> class should have the <code>!important</code> keyword to override all other declarations.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@@ -3429,14 +3429,14 @@
|
||||
"title": "Use Hex Code for Specific Colors",
|
||||
"difficulty": 1.54,
|
||||
"description": [
|
||||
"Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or \"hex code\" for short.",
|
||||
"\"Decimal\" means the numbers zero through nine - the numbers that people use in everyday life. \"Hexadecimal\" includes these 10 numbers, plus the letters A, B, C, D, E and F. This means that Hexidecimal has a total of 16 possible values, instead of the 10 possible values that our normal base-10 number system gives us.",
|
||||
"Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.",
|
||||
"<code>Decimal</code> means the numbers zero through nine - the numbers that people use in everyday life. <code>Hexadecimal</code> includes these 10 numbers, plus the letters A, B, C, D, E and F. This means that Hexidecimal has a total of 16 possible values, instead of the 10 possible values that our normal base-10 number system gives us.",
|
||||
"With CSS, we use 6 hexidecimal number to represent colors. For example, <code>#000000</code> is the lowest possible value, and it represents the color black.",
|
||||
"Replace the word \"black\" in our <code>body</code> element's background-color with its \"hex code\" representation, <code>#000000</code>. "
|
||||
"Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>. "
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.')",
|
||||
"assert(editor.match(/#000000/g) && editor.match(/#000000/g).length > 0, 'Use the hex code for the color black instead of the word \"black\". For example <code>body { color: #000000; }</code>.')"
|
||||
"assert(editor.match(/#000000/g) && editor.match(/#000000/g).length > 0, 'Use the <code>hex code</code> for the color black instead of the word <code>black</code>. For example <code>body { color: #000000; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3465,13 +3465,13 @@
|
||||
"title": "Use Hex Code to Color Elements White",
|
||||
"difficulty": 1.55,
|
||||
"description": [
|
||||
"0 is the lowest number in hex code, and represents a complete absence of color.",
|
||||
"F is the highest number in hex code, and it represents the maximum possible brightness.",
|
||||
"<code>0</code> is the lowest number in hex code, and represents a complete absence of color.",
|
||||
"<code>F</code> is the highest number in hex code, and it represents the maximum possible brightness.",
|
||||
"Let's turn our <code>body</code> element's background-color white by changing its hex code to <code>#FFFFFF</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'Your <code>body</code> element should have the background-color of white.')",
|
||||
"assert(editor.match(/#FFFFFF/ig) && editor.match(/#FFFFFF/ig).length > 0, 'Use hex code the color white instead of the word \"white\". For example <code>body { color: #FFFFFF; }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'Your <code>body</code> element should have the <code>background-color</code> of white.')",
|
||||
"assert(editor.match(/#FFFFFF/ig) && editor.match(/#FFFFFF/ig).length > 0, 'Use the <code>hex code</code> for the color white instead of the word <code>white</code>. For example <code>body { color: #FFFFFF; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3501,14 +3501,14 @@
|
||||
"difficulty": 1.56,
|
||||
"description": [
|
||||
"You may be wondering why we use 6 digits to represent a color instead of just one or two. The answer is that using 6 digits gives us a huge variety.",
|
||||
"How many colors are possible? 16 colors and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors!",
|
||||
"Hex code follows the red-green-blue, or \"RGB\" format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest red, you would just use F for the first and second digits (the highest possible value) and 0 for the third, fourth, fifth and sixth digits (the lowest possible value).",
|
||||
"How many colors are possible? 16 colors and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors.",
|
||||
"Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest red, you would just use <code>F</code> for the first and second digits (the highest possible value) and <code>0</code> for the third, fourth, fifth and sixth digits (the lowest possible value).",
|
||||
"Make the <code>body</code> element's background color red by giving it the hex code value of <code>#FF0000</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the background-color of red.')",
|
||||
"assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use hex code the color red instead of the word \"red\". For example <code>body { color: #FF0000; }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of red.')",
|
||||
"assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>. For example <code>body { color: #FF0000; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3537,13 +3537,13 @@
|
||||
"title": "Use Hex Code to Color Elements Green",
|
||||
"difficulty": 1.57,
|
||||
"description": [
|
||||
"Remember that hex code follows the red-green-blue, or \"RGB\" format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest green, you would just use F for the third and fourth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).",
|
||||
"Remember that <code>hex code</code> follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest green, you would just use <code>F</code> for the third and fourth digits (the highest possible value) and <code>0</code> for all the other digits (the lowest possible value).",
|
||||
"Make the <code>body</code> element's background color green by giving it the hex code value of <code>#00FF00</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'Give your <code>body</code> element the background-color of green.')",
|
||||
"assert(editor.match(/#00[Ff]{2}00/g) && editor.match(/#00[Ff]{2}00/g).length > 0, 'Use hex code the color green instead of the word \"green\". For example <code>body { color: #00FF00; }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of <code>green</code>.')",
|
||||
"assert(editor.match(/#00[Ff]{2}00/g) && editor.match(/#00[Ff]{2}00/g).length > 0, 'Use the <code>hex code</code> for the color green instead of the word <code>green</code>. For example <code>body { color: #00FF00; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3572,13 +3572,13 @@
|
||||
"title": "Use Hex Code to Color Elements Blue",
|
||||
"difficulty": 1.58,
|
||||
"description": [
|
||||
"Hex code follows the red-green-blue, or \"RGB\" format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest blue, we use F for the fifth and sixth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).",
|
||||
"Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest blue, we use <code>F</code> for the fifth and sixth digits (the highest possible value) and <code>0</code> for all the other digits (the lowest possible value).",
|
||||
"Make the <code>body</code> element's background color blue by giving it the hex code value of <code>#0000FF</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'Give your <code>body</code> element the background-color of blue.')",
|
||||
"assert(editor.match(/#0000FF/g) && editor.match(/#0000FF/g).length > 0, 'Use hex code the color blue instead of the word \"blue\". For example <code>body { color: #0000FF; }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'Give your <code>body</code> element the <code>background-color</code> of blue.')",
|
||||
"assert(editor.match(/#0000FF/g) && editor.match(/#0000FF/g).length > 0, 'Use the <code>hex code</code> for the color blue instead of the word <code>blue</code>. For example <code>body { color: #0000FF; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3612,8 +3612,8 @@
|
||||
"Make the <code>body</code> element's background color orange by giving it the hex code value of <code>#FFA500</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'Give your <code>body</code> element the background-color of orange.')",
|
||||
"assert(editor.match(/#FFA500/g) && editor.match(/#FFA500/g).length > 0, 'Use hex code the color orange instead of the word \"orange\". For example <code>body { color: #FFA500; }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of orange.')",
|
||||
"assert(editor.match(/#FFA500/g) && editor.match(/#FFA500/g).length > 0, 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>. For example <code>body { color: #FFA500; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3647,8 +3647,8 @@
|
||||
"Make the <code>body</code> element's background color gray by giving it the hex code value of <code>#808080</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'Give your <code>body</code> element the background-color of gray.')",
|
||||
"assert(editor.match(/#808080/g) && editor.match(/#808080/g).length > 0, 'Use hex code the color gray instead of the word \"gray\". For example <code>body { color: #808080; }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'Give your <code>body</code> element the <code>background-color</code> of gray.')",
|
||||
"assert(editor.match(/#808080/g) && editor.match(/#808080/g).length > 0, 'Use the <code>hex code</code> the color gray instead of the word <code>gray</code>. For example <code>body { color: #808080; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3681,8 +3681,8 @@
|
||||
"Make the <code>body</code> element's background color a dark gray by giving it the hex code value of <code>#111111</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'Give your <code>body</code> element the background-color of a light gray.')",
|
||||
"assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use hex code to make a light gray. For example <code>body { color: #111111; }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'Give your <code>body</code> element the <code>background-color</code> of a light gray.')",
|
||||
"assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use <code>hex code</code> to make a light gray. For example <code>body { color: #111111; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3712,13 +3712,13 @@
|
||||
"difficulty": 1.62,
|
||||
"description": [
|
||||
"Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.",
|
||||
"For example, red, which is #FF0000 in hex code, can be shortened to #F00. That is, one digit for red, one digit for green, one digit for blue.",
|
||||
"This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.",
|
||||
"Go ahead, try using #F00 to turn the <code>body</code> element's background-color red."
|
||||
"For example, red, which is <code>#FF0000</code> in hex code, can be shortened to <code>#F00</code>. That is, one digit for red, one digit for green, one digit for blue.",
|
||||
"This reduces the total number of possible colors to around 4,000. But browsers will interpret <code>#FF0000</code> and <code>#F00</code> as exactly the same color.",
|
||||
"Go ahead, try using <code>#F00</code> to turn the <code>body</code> element's background-color red."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the background-color of red.')",
|
||||
"assert(editor.match(/#F00/ig) && editor.match(/#F00/ig).length > 0, 'Use abbreviated hex code instead of a named color. For example <code>body { color: #F00; }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of red.')",
|
||||
"assert(editor.match(/#F00/ig) && editor.match(/#F00/ig).length > 0, 'Use <code>abbreviated hex code</code> instead of a six-character <code>hex code</code>. For example <code>body { color: #F00; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3747,15 +3747,15 @@
|
||||
"title": "Use RGB values to Color Elements",
|
||||
"difficulty": 1.63,
|
||||
"description": [
|
||||
"Another way you can represent colors in CSS is by using RGB values.",
|
||||
"Another way you can represent colors in CSS is by using <code>rgb</code> values.",
|
||||
"RGB values look like this: <code>rgb(0, 0, 0)</code> for black and <code>rgb(255, 255, 255)</code> for white.",
|
||||
"Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.",
|
||||
"If you do the math, 16 times 16 is 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.",
|
||||
"Instead of using six hexadecimal digits like you do with hex code, with <code>rbg</code> you specify the brightness of each color with a number between 0 and 255.",
|
||||
"If you do the math, 16 times 16 is 256 total values. So <code>rgb</code>, which starts counting from zero, has the exact same number of possible values as hex code.",
|
||||
"Let's replace the hex code in our <code>body</code> element's background color with the RGB value for black: <code>rgb(0, 0, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of black. For example <code>body { color: rgb(0, 0, 0); }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of black.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of black. For example <code>body { color: rgb(0, 0, 0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3785,12 +3785,12 @@
|
||||
"difficulty": 1.64,
|
||||
"description": [
|
||||
"RGB values look like this: <code>rgb(0, 0, 0)</code> for black and <code>rgb(255, 255, 255)</code> for white.",
|
||||
"Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.",
|
||||
"Change the <code>body</code> element's background color from the RGB value for black to the RGB value for white: <code>rgb(255, 255, 255)</code>"
|
||||
"Instead of using six hexadecimal digits like you do with hex code, with <code>rgb</code> you specify the brightness of each color with a number between 0 and 255.",
|
||||
"Change the <code>body</code> element's background color from the RGB value for black to the <code>rgb</code> value for white: <code>rgb(255, 255, 255)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'Give your <code>body</code> element the background-color of white.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of white. For example <code>body { background-color: rgb(255, 255 , 255); }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'Give your <code>body</code> element the <code>background-color</code> of white.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of white. For example <code>body { background-color: rgb(255, 255 , 255); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3824,8 +3824,8 @@
|
||||
"Change the <code>body</code> element's background color to the RGB value red: <code>rgb(255, 0, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the background-color of red.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of red. For example <code>body { background-color: rgb(255, 0, 0); }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of red.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of red. For example <code>body { background-color: rgb(255, 0, 0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3854,11 +3854,11 @@
|
||||
"title": "Use RGB to Color Elements Green",
|
||||
"difficulty": 1.66,
|
||||
"description": [
|
||||
"Now change the <code>body</code> element's background color to the RGB value green: <code>rgb(0, 255, 0)</code>"
|
||||
"Now change the <code>body</code> element's background color to the <code>rgb</code> value green: <code>rgb(0, 255, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'Give your <code>body</code> element the background-color of green.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of green. For example <code>body { background-color: rgb(0, 255, 0); }</code>.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of green.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of green. For example <code>body { background-color: rgb(0, 255, 0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3891,7 +3891,7 @@
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'Give your <code>body</code> element the background-color of blue.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of blue. For example <code>body { background-color: rgb(0, 0, 255); }</code>.')"
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of blue. For example <code>body { background-color: rgb(0, 0, 255); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3925,7 +3925,7 @@
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'Give your <code>body</code> element the background-color of orange.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of orange. For example <code>body { background-color: rgb(255, 165, 0); }</code>.')"
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of orange. For example <code>body { background-color: rgb(255, 165, 0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@@ -3959,7 +3959,7 @@
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'Give your <code>body</code> element the background-color of gray.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of gray. For example <code>body { background-color: rgb(128, 128, 128); }</code>.')"
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of gray. For example <code>body { background-color: rgb(128, 128, 128); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
||||
Reference in New Issue
Block a user