gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improvements to copy of text and test output

Browse Source
This commit is contained in:
Quincy Larson
2015-08-14 17:26:24 -07:00
parent e6297de282
commit aed4b6bfe1
3 changed files with 329 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
seed/challenges/basic-javascript.json
View File

@ -30,7 +30,7 @@
"title": "Understand Boolean Values",
"difficulty": "9.98001",
"description": [
"In computer science, \"data structures\" are variables that hold data. JavaScript has seven of these. For example, the <code>Number</code> data structure holds numbers.",
"In computer science, <code>data structures</code> are things that hold data. JavaScript has seven of these. For example, the <code>Number</code> data structure holds numbers.",
"Let's learn about the most basic data structure of all: the <code>Boolean</code>. Booleans can only hold the value of either true or false. They are basically little on-off switches.",
"Let's modify our <code>welcomeToBooleans</code>function so that it will return <code>true</code>instead of <code>false</code>when the run button is clicked."
],
@ -43,7 +43,7 @@
"",
"// don't change code above here",
"",
"return false;",
" return false;",
"",
"// don't change code below here",
"}",
@ -58,7 +58,7 @@
"title": "Declare JavaScript Variables",
"difficulty": "9.9801",
"description": [
"When we store data in a <code>data structure</code>, we call it a <code>variables</code>. These variables are no different from the x and y variables you use in basic math.",
"When we store data in a <code>data structure</code>, we call it a <code>variable</code>. These variables are no different from the x and y variables you use in math.",
"Let's create our first variable and call it \"myName\".",
"You'll notice that in <code>myName</code>, we didn't use a space, and that the \"N\" is capitalized. JavaScript variables are written in <code>camel case</code>. An example of camel case is: camelCase.",
"Now, use the <code>var</code> keyword to create a variable called <code>myName</code>. Set its value to your name, in double quotes.",
@ -93,15 +93,15 @@
"assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return(true);}else{return(false);}})(), 'myLastName should be a string with a least one character in it');"
],
"challengeSeed": [
"// ourName = \"Free Code Camp\";",
"// var ourFirstName = \"Free\";",
"// var ourLastName = \"Code Camp\";",
"// name = \"Alan Turing\";",
"// var firstName = \"Alan\";",
"// var lastName = \"Turing\";",
"",
"",
"// You can ignore everything below this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(y,z){return(y + ', ' + z);})(myFirstName, myLastName);}"
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return(myFirstName + ', ' + myLastName);})();}"
],
"type": "waypoint",
"challengeType": 1
@ -111,8 +111,9 @@
"title": "Check the Length Property of a String Variable",
"difficulty": "9.9809",
"description": [
"Use the <code>.length</code> property to count the number of characters in the <code>lastNameLength</code> variable.",
"For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string \"Charles\" is by using the <code>firstName.length</code> property."
"<code>data structures</code> have <code>properties</code>. For example, <code>strings</code> have a property called <code>.length</code> that will tell you how many characters are in the string.",
"For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string \"Charles\" is by using the <code>firstName.length</code> property.",
"Use the <code>.length</code> property to count the number of characters in the <code>lastNameLength</code> variable."
],
"tests": [
"assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return(true);}else{return(false);}})(), 'lastNameLength should be equal to eight.');",
@ -134,7 +135,7 @@
"// You can ignore everything below this line.",
"// We use this function to show you the value of your variable in your output box.",
"// You'll learn about functions soon.",
"if(typeof(lastNameLength) !== \"undefined\"){(function(v){return(v);})(lastNameLength);}"
"if(typeof(lastNameLength) !== \"undefined\"){(function(){return(lastNameLength);})();}"
],
"type": "waypoint",
"challengeType": 1

238
seed/challenges/bootstrap.json
View File

@ -11,10 +11,10 @@
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.",
"With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
"You can add Bootstrap to any app just by including it with <code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/&#62;</code> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
"To get started, we should nest all of our HTML in a <code>div</code> element with the class \"container-fluid\"."
"To get started, we should nest all of our HTML in a <code>div</code> element with the class <code>container-fluid</code>."
],
"tests": [
"assert($(\"div\").hasClass(\"container-fluid\"), 'Your <code>div</code> element should have the class \"container-fluid\"')",
"assert($(\"div\").hasClass(\"container-fluid\"), 'Your <code>div</code> element should have the class <code>container-fluid</code>')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -91,13 +91,13 @@
"title": "Make Images Mobile Responsive",
"difficulty": 2.02,
"description": [
"First, Add a new image below the existing one. Set it's <code>src</code> attribute to \"http://bit.ly/fcc-running-cats\".",
"First, Add a new image below the existing one. Set it's <code>src</code> attribute to <code>http://bit.ly/fcc-running-cats</code>.",
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the \"img-responsive\" class to your image. Do this, and the image should perfectly fit the width of your page."
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page."
],
"tests": [
"assert($(\"img\").length > 1, 'You should have a total of two images.')",
"assert($(\"img\").hasClass(\"img-responsive\"), 'Your new image should have the class \"img-responsive\".')",
"assert($(\"img\").hasClass(\"img-responsive\"), 'Your new image should have the class <code>img-responsive</code>.')",
"assert(new RegExp(\"http://bit.ly/fcc-running-cats\", \"gi\").test($(\"img.img-responsive\").attr(\"src\")), 'Add a second image with the <code>src</code> of <code>http&#58;//bit.ly/fcc-running-cats</code>.')"
],
"challengeSeed": [
@ -180,7 +180,7 @@
"Remember that you can add several classes to the same element by separating each of them with a space, like this: <code>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>."
],
"tests": [
"assert($(\"h2\").hasClass(\"text-center\"), 'Your <code>h2</code> element should be centered by applying the class \"text-center\"')"
"assert($(\"h2\").hasClass(\"text-center\"), 'Your <code>h2</code> element should be centered by applying the class <code>text-center</code>')"
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@ -260,11 +260,11 @@
"difficulty": 2.04,
"description": [
"Bootstrap has its own styles for <code>button</code> elements, which look much better than the plain HTML ones.",
"Create a new <code>button</code> element below your large kitten photo. Give it the class \"btn\" and the text of \"like\"."
"Create a new <code>button</code> element below your large kitten photo. Give it the class <code>btn</code> and the text of \"Like\"."
],
"tests": [
"assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Like\".')",
"assert($(\"button\").hasClass(\"btn\"), 'Your new button should have the class \"btn\".')",
"assert($(\"button\").hasClass(\"btn\"), 'Your new button should have the class <code>btn</code>.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
],
"challengeSeed": [
@ -346,14 +346,14 @@
"difficulty": 2.05,
"description": [
"Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
"This image illustrates the difference between \"inline\" elements and \"block-level\" elements:",
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
"<img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
"Note that these buttons still need the \"btn\" class.",
"Add Bootstrap's \"btn-block\" class to your Bootstrap button."
"Note that these buttons still need the <code>btn</code> class.",
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
],
"tests": [
"assert($(\"button\").hasClass(\"btn\"), 'Your button should still have the class \"btn\".')",
"assert($(\"button\").hasClass(\"btn-block\"), 'Your button should have the class \"btn-block\".')",
"assert($(\"button\").hasClass(\"btn\"), 'Your button should still have the class <code>btn</code>.')",
"assert($(\"button\").hasClass(\"btn-block\"), 'Your button should have the class <code>btn-block</code>.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
],
"challengeSeed": [
@ -434,13 +434,13 @@
"title": "Taste the Bootstrap Button Color Rainbow",
"difficulty": 2.06,
"description": [
"The \"btn-primary\" class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
"Add Bootstrap's \"btn-primary\" class to your button.",
"Note that this button will still need the \"btn\" and \"btn-block\" classes."
"The <code>btn-primary</code> class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
"Add Bootstrap's <code>btn-primary</code> class to your button.",
"Note that this button will still need the <code>btn</code> and <code>btn-block</code> classes."
],
"tests": [
"assert($(\"button\").hasClass(\"btn-primary\"), 'Your button should have the class \"btn-primary\".')",
"assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'Your button should still have the \"btn\" and \"btn-block\" classes.')",
"assert($(\"button\").hasClass(\"btn-primary\"), 'Your button should have the class <code>btn-primary</code>.')",
"assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'Your button should still have the <code>btn</code> and <code>btn-block</code> classes.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
],
"challengeSeed": [
@ -521,14 +521,14 @@
"title": "Call out Optional Actions with Button Info",
"difficulty": 2.07,
"description": [
"Bootstrap comes with several pre-defined colors for buttons. The \"btn-info\" class is used to call attention to optional actions that the user can take.",
"Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's \"btn-info\" and \"btn-block\" classes to it.",
"Note that these buttons still need the \"btn\" and \"btn-block\" classes."
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-info</code> class is used to call attention to optional actions that the user can take.",
"Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's <code>btn-info</code> and <code>btn-block</code> classes to it.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
],
"tests": [
"assert(new RegExp(\"info\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Info\".')",
"assert($(\"button.btn-block.btn\").length > 1, 'Both of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')",
"assert($(\"button\").hasClass(\"btn-info\"), 'Your new button should have the class \"btn-info\".')",
"assert($(\"button.btn-block.btn\").length > 1, 'Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
"assert($(\"button\").hasClass(\"btn-info\"), 'Your new button should have the class <code>btn-info</code>.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
],
"challengeSeed": [
@ -609,14 +609,14 @@
"title": "Warn your Users of a Dangerous Action",
"difficulty": 2.08,
"description": [
"Bootstrap comes with several pre-defined colors for buttons. The \"btn-danger\" class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
"Create a button with the text \"Delete\" and give it the class \"btn-danger\".",
"Note that these buttons still need the \"btn\" and \"btn-block\" classes."
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-danger</code> class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
"Create a button with the text \"Delete\" and give it the class <code>btn-danger</code>.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
],
"tests": [
"assert(new RegExp(\"delete\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"delete\".')",
"assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')",
"assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class \"btn-danger\".')",
"assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
"assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class <code>btn-danger</code>.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
],
"challengeSeed": [
@ -701,14 +701,14 @@
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\"></a>",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
"Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by nesting all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
"The \"row\" class is applied to a <code>div</code>, and the buttons themselves can be nested within it."
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
"The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be nested within it."
],
"tests": [
"assert($(\"div.row:has(button)\").length > 0, 'Your buttons should all be nested within the same <code>div</code> element with the class \"row\".')",
"assert($(\"div.col-xs-4:has(button)\").length > 2, 'Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class \"col-xs-4\".')",
"assert($(\"div.row:has(button)\").length > 0, 'Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.')",
"assert($(\"div.col-xs-4:has(button)\").length > 2, 'Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure each of your <code>button</code> elements has a closing tag.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
@ -794,14 +794,16 @@
"description": [
"We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.",
"Don't worry - there will be plenty of time to customize our CSS later.",
"Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your <code>style</code> element so that the only declarations left in your <code>style</code> element are \"h2\" and \"thick-green-border\". Then Delete the <code>p</code> element that contains a dead link. Then remove the \"red-text\" class from your <code>h2</code> element and replace it with the \"text-primary\" Bootstrap class. Finally, remove the \"smaller-image\" class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class."
"Delete the <code>.red-text</code>, <code>p</code>, and <code>.smaller-image</code> CSS declarations from your <code>style</code> element so that the only declarations left in your <code>style</code> element are <code>h2</code> and <code>thick-green-border</code>.",
"Then Delete the <code>p</code> element that contains a dead link. Then remove the <code>red-text</code> class from your <code>h2</code> element and replace it with the <code>text-primary</code> Bootstrap class.",
"Finally, remove the \"smaller-image\" class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class."
],
"tests": [
"assert(!$(\"h2\").hasClass(\"red-text\"), 'Your h2 element should no longer have the class \"red-text\".')",
"assert($(\"h2\").hasClass(\"text-primary\"), 'Your h2 element should now have the class \"text-primary\".')",
"assert(!$(\"p\").css(\"font-family\").match(/monospace/i), 'Your paragraph elements should no longer use the font \"Monospace\".')",
"assert(!$(\"img\").hasClass(\"smaller-image\"), 'Remove the \"smaller-image\" class from your top image.')",
"assert($(\".img-responsive\").length > 1, 'Add the \"img-responsive\" class to your top image.')"
"assert(!$(\"h2\").hasClass(\"red-text\"), 'Your h2 element should no longer have the class <code>red-text</code>.')",
"assert($(\"h2\").hasClass(\"text-primary\"), 'Your h2 element should now have the class <code>text-primary</code>.')",
"assert(!$(\"p\").css(\"font-family\").match(/monospace/i), 'Your paragraph elements should no longer use the font <code>Monospace</code>.')",
"assert(!$(\"img\").hasClass(\"smaller-image\"), 'Remove the <code>smaller-image</code> class from your top image.')",
"assert($(\".img-responsive\").length > 1, 'Add the <code>img-responsive</code> class to your top image.')"
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@ -891,17 +893,17 @@
"title": "Use Spans for Inline Elements",
"difficulty": 2.105,
"description": [
"You can use use spans to create inline elements. Remember when we used the \"btn-block\" class to make the button grow fill the entire row?",
"This image illustrates the difference between \"inline\" elements and \"block-level\" elements:",
"You can use use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button grow fill the entire row?",
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
"<img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
"By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.",
"Nest the word \"love\" in your \"Things cats love\" element below withing a <code>span</code> element. Then give that <code>span</code> the class \"text-danger\" to make the text red.",
"Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
"Here's how you would do this with the \"Top 3 things cats hate\" element: <code>&#60;p&#62;Top 3 things cats &#60;span class\"text-danger\"&#62;hate&#60;/span&#62;&#60;/p&#62;</code>"
],
"tests": [
"assert($(\"p span\") && $(\"p span\").length > 0, 'Your <code>span</code> element should be inside your <code>p</code> element.')",
"assert($(\"p span\") && $(\"p span\").text().match(/love/i), 'Your <code>span</code> element should have the text \"love\".')",
"assert($(\"span\").hasClass(\"text-danger\"), 'Your <code>span</code> element should have class \"text-danger\".')",
"assert($(\"p span\") && $(\"p span\").text().match(/love/i), 'Your <code>span</code> element should have the text <code>love</code>.')",
"assert($(\"span\").hasClass(\"text-danger\"), 'Your <code>span</code> element should have class <code>text-danger</code>.')",
"assert(editor.match(/<\\/span>/g) && editor.match(/<span/g) && editor.match(/<\\/span>/g).length === editor.match(/<span/g).length, 'Make sure your <code>span</code> element has a closing tag.')"
],
"challengeSeed": [
@ -996,15 +998,15 @@
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\"></a>",
"Note that in this illustration, we use the \"col-md-*\" class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.",
"In the Cat Photo App that we're building, we'll use \"col-xs-*\", where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Nest your first image and your <code>h2</code> element within a single <code>&#60;div class=\"row\"&#62;</code> element. Nest your <code>h2</code> text within a <code>&#60;div class=\"col-xs-8\"&#62;</code> and your image in a <code>&#60;div class=\"col-xs-4\"&#62;</code> so that they are on the same line.",
"Notice how the image is now just the right size to fit along the text?"
],
"tests": [
"assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, 'Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class \"row\".')",
"assert($(\"div.col-xs-4:has(img)\").length > 0, 'Nest your topmost <code>img</code> element within a <code>div</code> with the class \"col-xs-4\".')",
"assert($(\"div.col-xs-8:has(h2)\").length > 0, 'Nest your <code>h2</code> element within a <code>div</code> with the class \"col-xs-8\".')",
"assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, 'Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.')",
"assert($(\"div.col-xs-4:has(img)\").length > 0, 'Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.')",
"assert($(\"div.col-xs-8:has(h2)\").length > 0, 'Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1081,11 +1083,11 @@
"title": "Add Font Awesome Icons to our Buttons",
"difficulty": 2.12,
"description": [
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the \".svg\" file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"Use Font Awesome to add a \"thumbs-up\" icon to your like button by giving it a <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\"."
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giving it a <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>."
],
"tests": [
"assert($(\"i\").hasClass(\"fa fa-thumbs-up\"), 'Add an <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".')",
"assert($(\"i\").hasClass(\"fa fa-thumbs-up\"), 'Add an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>.')",
"assert($(\"button\").children(\"i\").length > 0, 'Nest your <code>i</code> element within your <code>button</code> element.')",
"assert(editor.match(/<\\/i>/g), 'Make sure your <code>i</code> element has a closing tag.')"
],
@ -1166,8 +1168,8 @@
"title": "Add Font Awesome Icons to all of our Buttons",
"difficulty": 2.13,
"description": [
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the \".svg\" file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button."
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"Use Font Awesome to add a <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button."
],
"tests": [
"assert($(\"i\").hasClass(\"fa fa-trash\"), 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button element.')",
@ -1251,12 +1253,12 @@
"title": "Responsively Style Radio Buttons",
"difficulty": 2.14,
"description": [
"You can use Bootstrap's \"col-xs-*\" classes on <code>form</code> elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"You can use Bootstrap's <code>col-xs-*</code> classes on <code>form</code> elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Nest all of your radio buttons within a <code>&#60;div class=\"row\"&#62;</code> element. Then nest each of them within a <code>&#60;div class=\"col-xs-6\"&#62;</code> element."
],
"tests": [
"assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'Nest all of your radio buttons inside one <code>div</code> with the class \"row\".')",
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'Nest each of your radio buttons inside its own <code>div</code> with the class \"col-xs-6\".')",
"assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.')",
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1336,12 +1338,12 @@
"title": "Responsively Style Checkboxes",
"difficulty": 2.15,
"description": [
"You can use Bootstrap's \"col-xs-*\" classes on <code>form</code> elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"You can use Bootstrap's <code>col-xs-*</code> classes on <code>form</code> elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Nest all your checkboxes in a <code>&#60;div class=\"row\"&#62;</code> element. Then nest each of them in a <code>&#60;div class=\"col-xs-4\"&#62;</code> element."
],
"tests": [
"assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'Nest all of your checkboxes inside one <code>div</code> with the class \"row\".')",
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'Nest each of your checkboxes inside its own <code>div</code> with the class \"col-xs-4\".')",
"assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.')",
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1428,13 +1430,13 @@
"title": "Style Text Inputs as Form Controls",
"difficulty": 2.16,
"description": [
"You can add the \"fa-paper-plane\" Font Awesome icon by adding <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.",
"Give your form's text input field a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\". Also give this button the Font Awesome icon of \"fa-paper-plane\"."
"You can add the <code>fa-paper-plane</code> Font Awesome icon by adding <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.",
"Give your form's text input field a class of <code>form-control</code>. Give your form's submit button the classes <code>btn btn-primary</code>. Also give this button the Font Awesome icon of <code>fa-paper-plane</code>."
],
"tests": [
"assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'Give the submit button in your form the classes \"btn btn-primary\".')",
"assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'Give the submit button in your form the classes <code>btn btn-primary</code>.')",
"assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'Add a <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.')",
"assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'Give the text <code>input</code> in your form the class \"form-control\".')",
"assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'Give the text <code>input</code> in your form the class <code>form-control</code>.')",
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length > 3, 'Make sure each of your <code>i</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1529,14 +1531,14 @@
"title": "Line up Form Elements Responsively with Bootstrap",
"difficulty": 2.17,
"description": [
"Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class \"row\", and other <code>div</code> elements within it using the \"col-xs-*\" class.",
"Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class \"row\". Nest your form's text <code>input</code> within a div with the class of \"col-xs-7\". Nest your form's submit <code>button</code> in a <code>div</code> with the class \"col-xs-5\".",
"Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class <code>row</code>, and other <code>div</code> elements within it using the <code>col-xs-*</code> class.",
"Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class <code>row</code>. Nest your form's text <code>input</code> within a div with the class of \"col-xs-7\". Nest your form's submit <code>button</code> in a <code>div</code> with the class <code>col-xs-5</code>.",
"This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
],
"tests": [
"assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button and text input in a div with class \"row\".')",
"assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'Nest your form text input in a div with the class \"col-xs-7\".')",
"assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button in a div with the class \"col-xs-5\".')",
"assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button and text input in a div with class <code>row</code>.')",
"assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'Nest your form text input in a div with the class <code>col-xs-7</code>.')",
"assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button in a div with the class <code>col-xs-5</code>.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1631,17 +1633,17 @@
"title": "Create a Bootstrap Headline",
"difficulty": 2.18,
"description": [
"Now let\"s build something from scratch to practice our HTML, CSS and Bootstrap skills.",
"Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills.",
"We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges.",
"To start with, create an <code>h3</code> element, with the text \"jQuery Playground\".",
"Color your <code>h3</code> element with the \"text-primary\" Bootstrap class, and center it with the \"text-center\" Bootstrap class."
"To start with, create an <code>h3</code> element, with the text <code>jQuery Playground</code>.",
"Color your <code>h3</code> element with the <code>text-primary</code> Bootstrap class, and center it with the <code>text-center</code> Bootstrap class."
],
"tests": [
"assert($(\"h3\") && $(\"h3\").length > 0, 'Add a <code>h3</code> element to your page.')",
"assert(editor.match(/<\\/h3>/g) && editor.match(/<h3/g) && editor.match(/<\\/h3>/g).length === editor.match(/<h3/g).length, 'Make sure your <code>h3</code> element has a closing tag.')",
"assert($(\"h3\").hasClass(\"text-primary\"), 'Your <code>h3</code> element should be colored by applying the class \"text-primary\"')",
"assert($(\"h3\").hasClass(\"text-center\"), 'Your <code>h3</code> element should be centered by applying the class \"text-center\"')",
"assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'Your <code>h3</code> element should have the text \"jQuery Playground\".')"
"assert($(\"h3\").hasClass(\"text-primary\"), 'Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>')",
"assert($(\"h3\").hasClass(\"text-center\"), 'Your <code>h3</code> element should be centered by applying the class <code>text-center</code>')",
"assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'Your <code>h3</code> element should have the text <code>jQuery Playground</code>.')"
],
"challengeSeed": [
"",
@ -1667,10 +1669,10 @@
"difficulty": 2.18,
"description": [
"Now let's make sure all the content on your page is mobile-responsive.",
"Let's nest your <code>h3</code> element within a <code>div</code> element with the class \"container-fluid\"."
"Let's nest your <code>h3</code> element within a <code>div</code> element with the class <code>container-fluid</code>."
],
"tests": [
"assert($(\"div\").hasClass(\"container-fluid\"), 'Your <code>div</code> element should have the class \"container-fluid\"')",
"assert($(\"div\").hasClass(\"container-fluid\"), 'Your <code>div</code> element should have the class <code>container-fluid</code>.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
],
"challengeSeed": [
@ -1697,11 +1699,11 @@
"difficulty": 2.19,
"description": [
"Now we'll create a Bootstrap row for our inline elements.",
"Create a <code>div</code> element with the class \"row\"."
"Create a <code>div</code> element with the class <code>row</code>."
],
"tests": [
"assert($(\"div\").length > 1, 'Add a <code>div</code> element below your <code>h3</code>element.')",
"assert($(\"div\").hasClass(\"row\"), 'Your <code>div</code> element should have the class \"row\"')",
"assert($(\"div\").length > 1, 'Add a <code>div</code> element below your <code>h3</code> element.')",
"assert($(\"div\").hasClass(\"row\"), 'Your <code>div</code> element should have the class <code>row</code>')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
],
"challengeSeed": [
@ -1730,7 +1732,7 @@
"difficulty": 2.20,
"description": [
"Now that we have a Bootstrap Row, let's split it into two columns to house our elements.",
"Create two <code>div</code> elements within your row, both with the class \"col-xs-6\"."
"Create two <code>div</code> elements within your row, both with the class <code>col-xs-6</code>."
],
"tests": [
"assert($(\"div.row\").children(\"div.col-xs-6\").length > 1, 'Nest two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
@ -1763,11 +1765,11 @@
"title": "Create Bootstrap Wells",
"difficulty": 2.21,
"description": [
"Bootstrap has a class called \"well\" that can create a visual sense of depth for your columns.",
"Nest one <code>div</code> element with the class \"well\" within each of your \"col-xs-6\" <code>div</code> elements."
"Bootstrap has a class called <code>well</code> that can create a visual sense of depth for your columns.",
"Nest one <code>div</code> element with the class <code>well</code> within each of your <code>col-xs-6</code> <code>div</code> elements."
],
"tests": [
"assert($(\"div\").length > 4, 'Add two <code>div</code> elements inside your <code>div class=\"well\"></code> element both with the class \"col-xs-6\"')",
"assert($(\"div\").length > 4, 'Add two <code>div</code> elements inside your <code>div class=\"well\"></code> element both with the class <code>col-xs-6</code>')",
"assert($(\"div.col-xs-6\").children(\"div.well\").length > 1, 'Nest both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
],
@ -1803,10 +1805,10 @@
"difficulty": 2.22,
"description": [
"Now we're several <code>div</code> elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our <code>button</code> elements.",
"Nest three <code>button</code> elements within each of your \"well\" <code>div</code> elements."
"Nest three <code>button</code> elements within each of your <code>well</code> <code>div</code> elements."
],
"tests": [
"assert($(\"div.well\").children(\"button\").length > 5, 'Nest three <code>button</code> elements within each of your <code>div</code> elements with class \"well\".')",
"assert($(\"div.well\").children(\"button\").length > 5, 'Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.')",
"assert($(\"button\") && $(\"button\").length > 5, 'You should have a total of 6 <code>button</code> elements.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have closing tags.')"
],
@ -1849,12 +1851,12 @@
"title": "Apply the Default Bootstrap Button Style",
"difficulty": 2.23,
"description": [
"Bootstrap has another button class called \"btn-default\".",
"Apply both the \"btn\" and \"btn-default\" classes to each of your <code>button</code> elements."
"Bootstrap has another button class called <code>btn-default</code>.",
"Apply both the <code>btn</code> and <code>btn-default</code> classes to each of your <code>button</code> elements."
],
"tests": [
"assert($(\".btn\").length > 5, 'Apply the \"btn\" class to each of your <code>button</code> elements.')",
"assert($(\".btn-default\").length > 5, 'Apply the \"btn-default\" class to each of your <code>button</code> elements.')"
"assert($(\".btn\").length > 5, 'Apply the <code>btn</code> class to each of your <code>button</code> elements.')",
"assert($(\".btn-default\").length > 5, 'Apply the <code>btn-default</code> class to each of your <code>button</code> elements.')"
],
"challengeSeed": [
"<div class=\"container-fluid\">",
@ -1896,10 +1898,10 @@
"difficulty": 2.24,
"description": [
"Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.",
"Give each of your <code>button</code> elements the class \"target\"."
"Give each of your <code>button</code> elements the class <code>target</code>."
],
"tests": [
"assert($(\".target\").length > 5, 'Apply the \"target\" class to each of your <code>button</code> elements.')"
"assert($(\".target\").length > 5, 'Apply the <code>target</code> class to each of your <code>button</code> elements.')"
],
"challengeSeed": [
"<div class=\"container-fluid\">",
@ -1940,15 +1942,15 @@
"title": "Add ID Attributes to Bootstrap Elements",
"difficulty": 2.25,
"description": [
"Recall that in addition to class attributes, you can give each of your elements an id attribute.",
"Recall that in addition to class attributes, you can give each of your elements an <code>id</code> attribute.",
"Each id should be unique to a specific element.",
"Let's give a unique id to each of our <code>div</code> elements of class \"well\".",
"Let's give a unique id to each of our <code>div</code> elements of class <code>well</code>.",
"Remember that you can give an element an id like this: <code>&#60;div class=\"well\" id=\"center-well\"&#62;</code>",
"Give the well on the left the id of \"left-well\". Give the well on the right the id of \"right-well\"."
"Give the well on the left the id of <code>left-well</code>. Give the well on the right the <code>id</code> of <code>right-well</code>."
],
"tests": [
"assert($(\"#left-well\") && $(\"#left-well\").length > 0, 'Give your left \"well\" the id of \"left-well\".')",
"assert($(\"#right-well\") && $(\"#right-well\").length > 0, 'Give your right \"well\" the id of \"right-well\".')"
"assert($(\"#left-well\") && $(\"#left-well\").length > 0, 'Give your left <code>well</code> the id of <code>left-well</code>.')",
"assert($(\"#right-well\") && $(\"#right-well\").length > 0, 'Give your right <code>well</code> the id of <code>right-well</code>.')"
],
"challengeSeed": [
"<div class=\"container-fluid\">",
@ -1990,13 +1992,13 @@
"difficulty": 2.26,
"description": [
"For the sake of clarity, let's label both of our wells with their ids.",
"Above your left-well, inside its \"col-xs-6\" <code>div</code> element, add a <code>h4</code> element with the text \"#left-well\".",
"Above your right-well, inside its \"col-xs-6\" <code>div</code> element, add a <code>h4</code> element with the text \"#right-well\"."
"Above your left-well, inside its <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#left-well</code>.",
"Above your right-well, inside its <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#right-well</code>."
],
"tests": [
"assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'Add an <code>h4</code> element to each of your <code>&#60;div class=\\\"col-xs-6\\\"&#62;</code> elements.');",
"assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text \"#left-well\".');",
"assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text \"#right-well\".');",
"assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#left-well</code>.');",
"assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#right-well</code>.');",
"assert(editor.match(/<\\/h4>/g) && editor.match(/<h4/g) && editor.match(/<\\/h4>/g).length === editor.match(/<h4/g).length, 'Make sure all your <code>h4</code> elements have closing tags.')"
],
"challengeSeed": [
@ -2041,15 +2043,15 @@
"difficulty": 2.27,
"description": [
"We will also want to be able to use jQuery to target each button by its unique id.",
"Give each of your buttons a unique id like, starting with \"target1\" and ending with \"target6\"."
"Give each of your buttons a unique id like, starting with <code>target1</code> and ending with <code>target6</code>."
],
"tests": [
"assert($(\"#target1\") && $(\"#target1\").length > 0, 'One <code>button</code> element should have the id \"target1\".')",
"assert($(\"#target2\") && $(\"#target2\").length > 0, 'One <code>button</code> element should have the id \"target2\".')",
"assert($(\"#target3\") && $(\"#target3\").length > 0, 'One <code>button</code> element should have the id \"target3\".')",
"assert($(\"#target4\") && $(\"#target4\").length > 0, 'One <code>button</code> element should have the id \"target4\".')",
"assert($(\"#target5\") && $(\"#target5\").length > 0, 'One <code>button</code> element should have the id \"target5\".')",
"assert($(\"#target6\") && $(\"#target6\").length > 0, 'One <code>button</code> element should have the id \"target6\".')"
"assert($(\"#target1\") && $(\"#target1\").length > 0, 'One <code>button</code> element should have the id <code>target1</code>.')",
"assert($(\"#target2\") && $(\"#target2\").length > 0, 'One <code>button</code> element should have the id <code>target2</code>.')",
"assert($(\"#target3\") && $(\"#target3\").length > 0, 'One <code>button</code> element should have the id <code>target3</code>.')",
"assert($(\"#target4\") && $(\"#target4\").length > 0, 'One <code>button</code> element should have the id <code>target4</code>.')",
"assert($(\"#target5\") && $(\"#target5\").length > 0, 'One <code>button</code> element should have the id <code>target5</code>.')",
"assert($(\"#target6\") && $(\"#target6\").length > 0, 'One <code>button</code> element should have the id <code>target6</code>.')"
],
"challengeSeed": [
"<div class=\"container-fluid\">",
@ -2092,16 +2094,16 @@
"title": "Label Bootstrap Buttons",
"difficulty": 2.28,
"description": [
"Just like we labled our wells, we want to label our buttons.",
"Give each of your buttons text that corresponds to their id."
"Just like we labeled our wells, we want to label our buttons.",
"Give each of your <code>button<code> elements text that corresponds to their <code>id</code>."
],
"tests": [
"assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'Give your <code>button</code> element with the id \"target1\" the text \"#target1\".')",
"assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'Give your <code>button</code> element with the id \"target2\" the text \"#target2\".')",
"assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'Give your <code>button</code> element with the id \"target3\" the text \"#target3\".')",
"assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'Give your <code>button</code> element with the id \"target4\" the text \"#target4\".')",
"assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'Give your <code>button</code> element with the id \"target5\" the text \"#target5\".')",
"assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'Give your <code>button</code> element with the id \"target6\" the text \"#target6\".')"
"assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.')",
"assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.')",
"assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.')",
"assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.')",
"assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.')",
"assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.')"
],
"challengeSeed": [
"<div class=\"container-fluid\">",
@ -2151,7 +2153,7 @@
],
"tests": [
"assert(editor.match(/<!--/g) && editor.match(/<!--/g).length > 0, 'Start a comment with <code>&#60;!--</code>.')",
"assert(editor.match(/this line/g) && editor.match(/this line/g).length > 0, \"Your comment should have the text <code>You shouldn't need to modify code below this line</code>\")",
"assert(editor.match(/this line/g) && editor.match(/this line/g).length > 0, 'Your comment should have the text <code>You shouldn't need to modify code below this line</code>.')",
"assert(editor.match(/-->/g) && editor.match(/-->/g).length > 0, 'Be sure to close your comment with <code>--&#62;</code>.')"
],
"challengeSeed": [

396
seed/challenges/html5-and-css.json
View File

@ -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>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</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>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</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>&#60;style&#62;&#60;/style&#62;</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>&#60;style&#62;h2 {color: red;}&#60;/style&#62;</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>&#60;style&#62;h2 {color: red;}&#60;/style&#62;</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>&#60;style&#62;</code> tag.",
"You can see that we've created a CSS class called <code>blue-text</code> within the <code>&#60;style&#62;</code> tag.",
"You can apply a class to an HTML element like this: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</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>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</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>&#60;style&#62;</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>&#60;style&#62;</code> tag that we created for your \"red-text\" class."
"Then, inside your <code>&#60;style&#62;</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>&#60;style&#62;</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>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</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>&#60!-- 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>&#60!-- in front of it.')",
"assert(new RegExp(\"-->\", \"gi\").test(editor), 'Be sure to close your comment by deleting all trailing comment tags&#44; i.e. <code>--&#62;</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>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</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>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</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>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</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&#44; making it perfectly circular.')",
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50 percent&#44;</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>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</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&#58;//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>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</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>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</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>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</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>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: ",
"<code>&#60;ul&#62;</code>",
"&thinsp;&thinsp;<code>&#60;li&#62;milk&#60;/li&#62;</code>",
"&thinsp;&thinsp;<code>&#60;li&#62;cheese&#60;/li&#62;</code>",
"<code>&#60;/ul&#62;</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>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example:",
"<code>&#60;ol&#62;</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>&#60;input type=\"text\"&#62;</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>&#60;button type=\"submit\"&#62;this button submits the form&#60;/button&#62;</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>&#60;input type=\"text\" required&#62;</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>&#60;input type=\"text\" required&#62;</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>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</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>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Loving&#60;/label&#62;</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>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</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>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</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>&#60;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>&#60;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>&#60;h1 id=\"orange-text\"&#62;</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>&#60;h1 id=\"orange-text\"&#62;</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>&#60;h1 style=\"color: green\"&#62;</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>&#60;h1 style=\"color: green\"&#62;</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&#58; 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&#58; 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&#58; 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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; #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&#58; rgb&#40;0&#44; 0&#44; 0&#41;; }</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&#58; rgb&#40;0&#44; 0&#44; 0&#41;; }</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&#58; rgb&#40;255&#44; 255 &#44; 255&#41;; }</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&#58; rgb&#40;255&#44; 255 &#44; 255&#41;; }</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&#58; rgb&#40;255&#44; 0&#44; 0&#41;; }</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&#58; rgb&#40;255&#44; 0&#44; 0&#41;; }</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&#58; rgb&#40;0&#44; 255&#44; 0&#41;; }</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&#58; rgb&#40;0&#44; 255&#44; 0&#41;; }</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&#58; rgb&#40;0&#44; 0&#44; 255&#41;; }</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&#58; rgb&#40;0&#44; 0&#44; 255&#41;; }</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&#58; rgb&#40;255&#44; 165&#44; 0&#41;; }</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&#58; rgb&#40;255&#44; 165&#44; 0&#41;; }</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&#58; rgb&#40;128&#44; 128&#44; 128&#41;; }</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&#58; rgb&#40;128&#44; 128&#44; 128&#41;; }</code>.')"
],
"challengeSeed": [
"<style>",