<a target='_blank'&rt;.",
+ "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <a target='_blank'>.",
"Remember to use Read-Search-Ask if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.
Click here then add your link to your tweet's text"
diff --git a/seed/challenges/bootstrap.json b/seed/challenges/bootstrap.json
index a58be9f38b..5f5d0ff63e 100644
--- a/seed/challenges/bootstrap.json
+++ b/seed/challenges/bootstrap.json
@@ -133,7 +133,7 @@
"",
" Click here for cat photos.
",
"",
- " ![](\"https://bit.ly/fcc-relaxing-cat\")
",
+ " ![](\"http://bit.ly/fcc-relaxing-cat\")
",
"",
" Things cats love:
",
" ",
@@ -176,8 +176,8 @@
"title": "Center Text with Bootstrap",
"difficulty": 2.03,
"description": [
- "Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class text-center to our h1 and h2 elements.",
- "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>."
+ "Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class text-center to our h2 element.",
+ "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"red-text text-center\">your text</h2>."
],
"tests": [
"assert($(\"h2\").hasClass(\"text-center\"), 'Your h2 element should be centered by applying the class text-center')"
@@ -347,7 +347,7 @@
"description": [
"Normally, your button 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:",
- "![\"An](\"https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png\")
",
+ "![\"An](\"http://i.imgur.com/O32cDWE.png\")
",
"Note that these buttons still need the btn class.",
"Add Bootstrap's btn-block class to your Bootstrap button."
],
@@ -614,7 +614,7 @@
"Note that these buttons still need the btn and btn-block classes."
],
"tests": [
- "assert(new RegExp(\"delete\",\"gi\").test($(\"button\").text()), 'Create a new button element with the text \"delete\".')",
+ "assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'Create a new button 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(editor.match(/<\\/button>/g) && editor.match(/
elements have a closing tag.')"
@@ -700,7 +700,7 @@
"description": [
"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 div element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
- "![](\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\")
",
+ "![\"an](\"http://i.imgur.com/FaYuui8.png\")
",
"Note that in this illustration, the col-md-* 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 col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.",
"Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.",
@@ -795,7 +795,7 @@
"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 style element so that the only declarations left in your style element are h2 and thick-green-border.",
- "Then Delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.",
+ "Then delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.",
"Finally, remove the \"smaller-image\" class from your first img element and replace it with the img-responsive class."
],
"tests": [
@@ -893,9 +893,9 @@
"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?",
+ "You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?",
"This image illustrates the difference between inline elements and block-level elements:",
- "",
+ "",
"By using the span 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 within a span element. Then give that span the class text-danger to make the text red.",
"Here's how you would do this with the \"Top 3 things cats hate\" element: <p>Top 3 things cats <span class = \"text-danger\">hate</span></p>"
@@ -997,7 +997,7 @@
"We will make a simple heading for our Cat Photo App by putting them in the same row.",
"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 div element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
- "",
+ "",
"Note that in this illustration, the col-md-* 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 col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.",
"Nest your first image and your h2 element within a single <div class=\"row\"> element. Nest your h2 text within a <div class=\"col-xs-8\"> and your image in a <div class=\"col-xs-4\"> so that they are on the same line.",
@@ -1532,7 +1532,7 @@
"difficulty": 2.17,
"description": [
"Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a div element with the class row, and other div elements within it using the col-xs-* class.",
- "Nest both your form's text input and submit button within a div with the class row. Nest your form's text input within a div with the class of \"col-xs-7\". Nest your form's submit button in a div with the class col-xs-5.",
+ "Nest both your form's text input and submit button within a div with the class row. Nest your form's text input within a div with the class of col-xs-7. Nest your form's submit button in a div with the class col-xs-5.",
"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": [
@@ -1769,8 +1769,8 @@
"Nest one div element with the class well within each of your col-xs-6 div elements."
],
"tests": [
- "assert($(\"div\").length > 4, 'Add two div elements inside your div class=\"well\"> element both with the class col-xs-6')",
- "assert($(\"div.col-xs-6\").children(\"div.well\").length > 1, 'Nest both of your div class=\"col-xs-6\" elements within your div class=\"row\" element.')",
+ "assert($(\"div\").length > 4, 'Add a div element with the class well inside each of your div class=\"col-xs-6\"> elements')",
+ "assert($(\"div.col-xs-6 div.well\").length > 1, 'Nest both of your div class=\"col-xs-6\" elements within your div class=\"row\" element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(//g).length === editor.match(/
div elements have closing tags.')"
],
"challengeSeed": [
diff --git a/seed/challenges/git.json b/seed/challenges/git.json
index 7b091e8fb7..aa03fb0a18 100644
--- a/seed/challenges/git.json
+++ b/seed/challenges/git.json
@@ -16,7 +16,7 @@
"Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
- "Install ![\"a](\"https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png\")
",
+ "Here's an example CSS class declaration:",
+ "![\"a](\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\")
",
+ "![\"a](\"http://i.imgur.com/hviuZwe.png\")
",
"Here's an example:
how-to-npm with this command: npm install -g git-it",
+ "Install git-it with this command: npm install -g git-it",
"Now start the tutorial by running git-it.",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: cd ~/workspace.",
diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json
index b7a82a256c..e55619b87b 100644
--- a/seed/challenges/html5-and-css.json
+++ b/seed/challenges/html5-and-css.json
@@ -428,8 +428,12 @@
"description": [
"Create a CSS class called red-text and apply it to your h2 element.",
"Classes are reusable styles that can be added to HTML elements.",
- "Here's the anatomy of a CSS class:",
- "",
+ "Here's an example CSS class declaration:",
+ "<style>",
+ " .blue-text {",
+ " color: blue;",
+ " }",
+ "</style>",
"You can see that we've created a CSS class called blue-text within the <style> tag.",
"You can apply a class to an HTML element like this: <h2 class=\"blue-text\">CatPhotoApp</h2>.",
"Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
@@ -749,13 +753,13 @@
"title": "Add Images to your Website",
"difficulty": 1.17,
"description": [
- "You can add images to your website by using the img element, and point to an specific image's URL using the src attribute.",
- "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\">. Note that in most cases, img elements are self-closing.",
+ "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.",
+ "An example of this would be <img src=\"http://www.your-image-source.com/your-image.jpg\">. Note that in most cases, img elements are self-closing.",
"Try it with this image: https://bit.ly/fcc-relaxing-cat."
],
"tests": [
"assert($(\"img\").length > 0, 'Your page should have an image element.')",
- "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'Your image should have have a src attribute that points to the kitten image.')"
+ "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'Your image should have a src attribute that points to the kitten image.')"
],
"challengeSeed": [
"",
@@ -1056,13 +1060,13 @@
"description": [
"a elements, also known as anchor elements, are used to link to content outside of the current page.",
"Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
- "",
+ "",
"Here's an example: <p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>.",
"Create an a element that links to http://catphotoapp.com and has \"cat photos\" as its anchor text."
],
"tests": [
"assert((/cat photos/gi).test($(\"a\").text()), 'Your a element should have the anchor text of \"cat photos\"')",
- "assert(/http:\\/\\/catphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an a element that links to http://catphotoapp.com.')",
+ "assert(/http:\\/\\/catphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an a element that links to http://catphotoapp.com.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/a element has a closing tag.')"
],
"challengeSeed": [
@@ -1126,7 +1130,7 @@
"difficulty": 1.23,
"description": [
"Again, here's a diagram of an a element for your reference:",
- "",
+ "",
"Here's an example: <p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>.",
"Nesting just means putting one element inside of another element.",
"Now nest your a element within a new p 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."
@@ -3117,7 +3121,7 @@
"difficulty": 1.46,
"description": [
"Now let's start fresh and talk about CSS inheritance.",
- "Every HTML page has body element.",
+ "Every HTML page has a body element.",
"We can prove that the body element exists here by giving it a background-color of black.",
"We can do this by adding body { background-color: black; } to our style element."
],
@@ -3235,7 +3239,8 @@
"Our \"pink-text\" class overrode our body element's CSS declaration!",
"We just proved that our classes will override the body 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 h1 element in addition to your pink-text class, and let's see which one wins."
+ "Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins.",
+ "Applying multiple class attributes to a HTML element is done with a space between them like this: class=\"class1 class2\""
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1 element should have the class pink-text.')",
@@ -3280,12 +3285,14 @@
"Let's override your pink-text and blue-text classes, and make your h1 element orange, by giving the h1 element an id and then styling that id.",
"Give your h1 element the id attribute of orange-text. Remember, id styles look like this: <h1 id=\"orange-text\">",
"Leave the blue-text and pink-text classes on your h1 element.",
- "Create a CSS declaration for your orange-text id in your style element. Here's and example of what this looks like: #brown-text { color: brown; }"
+ "Create a CSS declaration for your orange-text id in your style element. Here's an example of what this looks like: #brown-text { color: brown; }"
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1 element should have the class pink-text.')",
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1 element should have the class blue-text.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your h1 element the id of orange-text.')",
+ "assert(editor.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your orange-text id')",
+ "assert(!editor.match(//gi), 'Do not give your h1 any style attributes.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your h1 element should be orange.')"
],
"challengeSeed": [
@@ -3387,7 +3394,7 @@
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1 element should have the class blue-text.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your h1 element should have the id of orange-text.')",
"assert(editor.match(/ 0, 'Your h1 element should have the inline style of color: white.')",
- "assert(editor.match(/pink.*\\!important/gi) && editor.match(/pink.*\\!important;/gi).length > 0, 'Your pink-text class should have the !important keyword to override all other declarations.')",
+ "assert(editor.match(/pink.*\\!important;/gi), 'Your pink-text class should have the !important keyword to override all other declarations.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your h1 element should be pink.')"
],
"challengeSeed": [
@@ -3431,7 +3438,7 @@
"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.",
- "With CSS, we use 6 hexidecimal number to represent colors. For example, #000000 is the lowest possible value, and it represents the color black.",
+ "With CSS, we use 6 hexadecimal numbers to represent colors. For example, #000000 is the lowest possible value, and it represents the color black.",
"Replace the word black in our body element's background-color with its hex code representation, #000000. "
],
"tests": [
@@ -3749,7 +3756,7 @@
"description": [
"Another way you can represent colors in CSS is by using rgb values.",
"RGB values look like this: rgb(0, 0, 0) for black and rgb(255, 255, 255) for white.",
- "Instead of using six hexadecimal digits like you do with hex code, with rbg you specify the brightness of each color with a number between 0 and 255.",
+ "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.",
"Let's replace the hex code in our body element's background color with the RGB value for black: rgb(0, 0, 0)"
],
diff --git a/seed/challenges/intermediate-ziplines.json b/seed/challenges/intermediate-ziplines.json
index 0a0c57f85c..6317353902 100644
--- a/seed/challenges/intermediate-ziplines.json
+++ b/seed/challenges/intermediate-ziplines.json
@@ -138,9 +138,9 @@
"id": "bd7158d8c442eddfaeb5bd1c",
"title": "Build a Simon Game",
"difficulty": 1.07,
- "challengeSeed": ["126415123"],
+ "challengeSeed": ["137213633"],
"description": [
- "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/dting/full/KpJXZV/.",
+ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/dting/full/QbRyqq/.",
"Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.",
"Rule #2: You may use whichever libraries or APIs you need.",
"Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.",
diff --git a/seed/challenges/jquery.json b/seed/challenges/jquery.json
index d6a6fa0fb0..93cc8899b2 100644
--- a/seed/challenges/jquery.json
+++ b/seed/challenges/jquery.json
@@ -17,7 +17,7 @@
"assert(editor.match(/