freeCodeCamp/seed_data/coursewares.json

[
  {
    "_id": "bd7124d8c441eddfaeb5bdef",
    "name": "Learn how Free Code Camp Works",
    "difficulty": 0.001,
    "challengeSeed": "125407438",
    "description": [
      "Watch this 1-minute video, or simply read this summary:",
      "Welcome to Free Code Camp. We're a community of busy people learning to code by building projects for nonprofits.",
      "We built this community because learning to code is hard. But anyone who can stay motivated can learn to code. And to stay motivated, you just need to: <ol><li>make friends with people who code</li><li>code a little every day</li><ol>",
      "All our challenges are <ol><li>free</li><li>self-paced</li><li>browser-based</li></ol>",
      "We'll spend <ol><li>200 hours learning tools like HTML, CSS, JavaScript, Node.js and databases</li><li>600 hours building practice projects</li><li>800 hours building full stack solutions for nonprofits</li></ol>",
      "By the end, we'll <ol><li>be good at coding</li><li>have the portfolio of apps with happy users to prove it</li></ol>",
      "Once you make it through Free Code Camp, you will be able to get a coding job. There are far more job openings out there than there are qualified coders to fill them.",
      "Now it's time to join our chat room. Click the \"I've completed this challenge\" button to move on to your next challenge."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7125d8c441eddfaeb5bd0f",
    "name": "Join Our Chat Room",
    "difficulty": 0.002,
    "challengeSeed": "124555254",
    "description": [
      "Now we're going to join the Free Code Camp chat room. You can come here any time of day to hang out, ask questions, or find another camper to pair program with.",
      "Make sure your Free Code Camp account includes your email address. Please note that the email address you use will be invisible to the public, but Slack will make it visible to other campers in our slack chat rooms. You can do this here: <a href='/account' target='_blank'>http://freecodecamp.com/account</a>.",
      "Click this link, which will email you an invite to Free Code Camp's Slack chat rooms: <a href='/api/slack' target='_blank'>http://freecodecamp.com/api/slack</a>.",
      "Now check your email and click the link in the email from Slack.",
      "Complete the sign up process, then update your biographical information and upload an image. A picture of your face works best. This is how people will see you in our chat rooms, so put your best foot forward.",
      "Now enter the General chat room and introduce yourself to our chat room by typing: \"Hello world!\".",
      "Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code.",
      "Keep the chat room open while you work through the other challenges. That way you ask for help if you get stuck on a challenge. You can also socialize when you feel like taking a break.",
      "You can also access this chat room by clicking the \"Chat\" button in the upper right hand corner.",
      "In order to keep our community a friendly and positive place to learn to code, please read and follow our Code of Conduct: <a href='/field-guide/what-is-the-free-code-camp-code-of-conduct?' target='_blank'>http://freecodecamp.com/field-guide/what-is-the-free-code-camp-code-of-conduct?</a>"
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7125d8c441eddfaeb5bdff",
    "name": "Preview our Challenge Map",
    "difficulty": 0.003,
    "challengeSeed": "125407437",
    "description": [
      "Before you start learning how to code, we'd like to introduce you to a few things.",
      "Let's look at our Challenge Map. Click on the \"Map\" button in the upper right hand corner. This map shows all the challenges that will teach you how to code.",
      "You should complete all these challenges in order.",
      "Once you finish these Waypoint challenges, you'll move on to Bonfires (algorithm practice), then Ziplines (front end development practice) and finally Basejumps (full stack development practice). After that, you'll start building projects for nonprofits.",
      "This challenge map is just for your reference. When you return to FreeCodeCamp.com, we'll automatically redirect you to the next challenge that you should be doing."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7125d8c441eddfaeb5bd1f",
    "name": "Browse our Field Guide",
    "difficulty": 0.004,
    "challengeSeed": "125407435",
    "description": [
      "Free Code Camp has an up-to-date field guide that will answer your many questions.",
      "Click the \"Field Guide\" button in the upper right hand corner.",
      "You can browse the field guide at your convenience. Most of its articles take less than 1 minute to read.",
      "When you click the Field Guide button, it will always take you back to whichever article you were last reading.",
      "Read a few field guide articles, then move on to your next challenge."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7125d8c441eddfaeb5bd2f",
    "name": "Customize your Portfolio Page",
    "difficulty": 0.005,
    "challengeSeed": "125407433",
    "description": [
      "You and all your fellow campers have portfolio pages.",
      "To see your portfolio page, click your picture in the upper right hand corner.",
      "Your portfolio page will automatically show off your progress through Free Code Camp.",
      "Click the \"Update my portfolio page or manage my account\" button",
      "You can link to your Github, Twitter and LinkedIn accounts. If you've already built some websites, you can link to them here as well.",
      "Be sure to click the \"Update my Bio\" or \"Update my Social Links\" button to save this new information to your portfolio page.",
      "Once you're happy with your portfolio page, you can move on to your next challenge."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7126d8c441eddfaeb5bd3f",
    "name": "Try Camper News",
    "difficulty": 0.006,
    "challengeSeed": "124553410",
    "description": [
      "Camper News is the best place for our campers to share and discuss helpful links.",
      "Click \"News\" in the upper right hand corner.",
      "You'll see a variety of links that have been submitted. Click on the \"Discuss\" button under one of them.",
      "You can upvote links. This will push the link up the rankings of hot links.",
      "You an also comment on a link. If someone responds to your comment, you'll get an email notification so you can come back and respond to them.",
      "You can also submit links. You can modify the link's headline and also leave an initial comment about the link.",
      "You can view the portfolio pages of any camper who has posted links or comments on Camper News. Just click on their photo.",
      "When you submit a link, you'll get a point. You will also get a point each time someone upvotes your link.",
      "Now that you've learned how to use Camper News, let's move on to your next challenge."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7126d8c441eddfaeb5bd3e",
    "name": "Meet Other Campers in your City",
    "difficulty": 0.007,
    "challengeSeed": "127358841",
    "description": [
      "One of the best ways to stay motivated when learning to code is to hang out with other campers.",
      "Slack and Camper News are great ways to communicate with other campers, but there's no substitute for meeting people in-person.",
      "The easiest way to meet other campers in your city is to join your city's Facebook Group. Click <a href='/field-guide/how-can-i-find-other-free-code-camp-campers-in-my-city' target='_blank'>here</a> to view our growing list of local groups.",
      "Click the link to your city, then, once Facebook loads, click \"Join group\".",
      "Our local groups are new, so if you don't see your city on this list, you should follow the directions to create a Facebook group for your city.",
      "If you don't have a Facebook account, we strongly recommend you create one, even if it's just for the purpose of coordinating with campers in your city through this group.",
      "Our groups allow you to create events, coordinate those events, and share photos from the events afterward.",
      "Whether you're hosting a study group, pair programming at your local library, or going to a weekend hackathon, your city's group will help you make it happen."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7137d8c441eddfaeb5bdef",
    "name": "Get Help the Hacker Way with RSAP",
    "difficulty": 0.008,
    "challengeSeed": "125407432",
    "description": [
      "Let's cover one last thing before you start working through our lessons: how to get help.",
      "Any time you get stuck or don't know what to do next, follow this simple algorithm (procedure): RSAP (Read, Search, Ask, Post).",
      "First, R - Read the documentation or error message. A key skill that good coders have is the ability to interpret and then follow instructions.",
      "Next, S - Search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.",
      "Then, if you still haven't found an answer to your question, A - Ask your friends. If you have trouble, you can ask your fellow campers. We have a special chat room specifically for getting help with tools you learn through these Free Code Camp Challenges. Go to <a href='https://freecode.slack.com/messages/help/' target='_blank'>https://freecode.slack.com/messages/help/</a>. Keep this chat open while you work on the remaining challenges.",
      "Finally, P - Post on Stack Overflow. Before you attempt to do this, read Stack Overflow's guide to asking good questions: <a href='http://stackoverflow.com/help/how-to-ask'>http://stackoverflow.com/help/how-to-ask</a>.",
      "Here's our detailed field guide on getting help: <a href='/field-guide/how-do-i-get-help-when-i-get-stuck' target='_blank'>http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck</a>.",
      "Now you have a clear algorithm to follow when you need help! Let's start coding! Move on to your next challenge."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7123c8c441eddfaeb5bdef",
    "name": "Use HTML Elements",
    "difficulty": 0.0085,
    "description": [
      "Welcome to Free Code Camp's first coding challenge! Click on the button below for further instructions.",
      "Awesome. Now you can read the rest of this challenge's instructions.",
      "You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
      "Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
      "Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code>&#60;h1&#62;</code>. Closing tags look like this: <code>&#60;/h1&#62;</code>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.",
      "Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.",
      "To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"."
    ],
    "tests": [
      "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')"
    ],
    "challengeSeed": [
      "<h1>Hello</h1>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf0887a",
    "name": "Use the h2 Element",
    "difficulty": 0.010,
    "description": [
      "Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element.",
      "The h2 element you enter will create an h2 element on the website.",
      "This element tells the browser how to render the text that it contains.",
      "<code>h2</code> elements are slightly smaller than <code>h1</code> elements. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements."
    ],
    "tests": [
      "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your h2 element should have the text \"CatPhotoApp\"')",
      "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')"
    ],
    "challengeSeed": [
      "<h1>Hello World</h1>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08801",
    "name": "Use the Paragraph Element",
    "difficulty": 0.011,
    "description": [
      "Create a paragraph element below the h2 element, and give it the text \"Hello Paragraph\".",
      "Paragraph elements are the preferred element for normal-sized paragraph text on websites.",
      "You can create a paragraph element like so: <code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>"
    ],
    "tests": [
      "assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your paragraph element should have the text \"Hello Paragraph\"')"
    ],
    "challengeSeed": [
      "<h1>Hello World</h1>",
      "<h2>CatPhotoApp</h2>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aeaf08801",
    "name": "Add a Line Break to Visually Separate Elements",
    "difficulty": 0.012,
    "description": [
      "Add a <code>line break</code> between the <code>&#60;h2&#62</code> and <code>&#60;p&#62</code> elements.",
      "You can create an line break element with <code>&#60;br&#47&#62</code>.",
      "Note that <code>&#60;br&#47&#62</code> has no closing tag. It is a <code>self-closing</code> element. See how a forward-slash precedes the closing bracket?",
      "You'll encounter other <code>self-closing</code> element tags soon."
    ],
    "tests": [
      "assert(($('br').length > 0), 'You should have a br element between your h2 and paragraph elements.')"
    ],
    "challengeSeed": [
      "<h1>Hello World</h1>",
      "<h2>CatPhotoApp</h2>",
      "<p>Hello Paragraph</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08802",
    "name": "Uncomment HTML",
    "difficulty": 0.013,
    "description": [
      "Uncomment the <code>h1</code>, <code>h2</code> and <code>p</code> elements.",
      "Commenting is a way that you can leave comments within your code without affecting the code itself.",
      "Commenting is also a convenient way to make code inactive without having to delete it entirely.",
      "You can start a comment with <code>&#60;!--</code> and end a comment with <code>--&#62;</code>."
    ],
    "tests": [
      "assert(($('h1').length > 0), 'The h1 element should not commented. It should be visible in the browser.')",
      "assert(($('h2').length > 0), 'The h2 element should not commented. It should be visible in the browser.')",
      "assert(($('p').length > 0), 'The paragraph element should not commented. It should be visible in the browser.')"
    ],
    "challengeSeed": [
      "<!--",
      "<h1>Hello World</h1>",
      "",
      "<h2>CatPhotoApp</h2>",
      "",
      "<br/>",
      "",
      "<p>Hello Paragraph</p>",
      "-->"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08804",
    "name": "Comment out HTML",
    "difficulty": 0.014,
    "description": [
      "Comment out the <code>h1</code> element and the <code>p</code> element, but leave the <code>h2</code> element uncommented.",
      "Remember that in order to start a comment, you need to use <code>&#60;!--</code> and to end a comment, you need to use <code>--&#62;</code>.",
      "Here you'll need to end the comment before the h2 element begins."
    ],
    "tests": [
      "assert(($('h1').length == 0), 'The h1 element should be commented. It should not be visible in the browser.')",
      "assert(($('h2').length > 0), 'The h2 element should not commented. It should be visible in the browser.')",
      "assert(($('p').length == 0), 'The paragraph element should be commented. It should not be visible in the browser.')"
    ],
    "challengeSeed": [
      "<!--",
      "<h1>Hello World</h1>",
      "",
      "<h2>CatPhotoApp</h2>",
      "",
      "<br/>",
      "",
      "<p>Hello Paragraph</p>",
      "-->"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08833",
    "name": "Use Lorem Ipsum Text as a Placeholder",
    "difficulty": 0.015,
    "description": [
      "Change the text in the <code>p</code> element to use the first few words of <code>Kitty Ipsum</code> text.",
      "Web developers traditionally use <code>Lorem Ipsum</code> as placeholder text. It's called Lorem Ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
      "Lorem Ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
      "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <a href='http://kittyipsum.com/'>Kitty Ipsum</a>!",
      "Here are the first few words of Kitty Ipsum text, which you can copy and paste into the right position: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
    ],
    "tests": [
      "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your paragraph element should contain the first few words of the famous Kitty Ipsum text.')"
    ],
    "challengeSeed": [
      "<h1>Hello World</h1>",
      "",
      "<h2>CatPhotoApp</h2>",
      "",
      "<br/>",
      "",
      "<p>Hello Paragraph</p>"
    ]
  },
  {
    "_id": "bad87fed1348bd9aedf08833",
    "name": "Delete HTML Elements",
    "difficulty": 0.016,
    "description": [
      "Delete the h1 and br elements so we can simplify our view.",
      "Our phone doesn't have much space, for HTML elements.",
      "Let's remove the unnecessary elements so we can start building our CatPhotoApp."
    ],
    "tests": [
      "assert(($('h1').length == 0), 'Delete the h1 element.')",
      "assert(($('h2').length > 0), 'Leave the h2 element on the page.')",
      "assert(($('br').length == 0), 'Delete the br element.')",
      "assert(($('p').length > 0), 'Leave the paragraph element on the page.')"
    ],
    "challengeSeed": [
      "<h1>Hello World</h1>",
      "",
      "<h2>CatPhotoApp</h2>",
      "",
      "<br/>",
      "",
      "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08803",
    "name": "Change the Color of Text",
    "difficulty": 0.017,
    "description": [
      "Change the <code>h2</code> element's style so that its text color is red.",
      "We can do this by changing the <code>style</code> of the <code>h2</code> element.",
      "The style that is responsible for the color of an element's text is the \"color\" style.",
      "Here's how you would set your <code>h2</code> element's text color to blue: <code>&#60;h2 style=\"color: blue\"&#62;CatPhotoApp&#60;h2&#62;</code>"
    ],
    "tests": [
      "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')"
    ],
    "challengeSeed": [
      "<h2>CatPhotoApp</h2>",
      "",
      "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08805",
    "name": "Use CSS Selectors to Style Elements",
    "difficulty": 0.018,
    "description": [
      "Delete your <code>h2</code> element's <code>style</code> tag and write the CSS to make all <code>h2</code> elements blue.",
      "With CSS, there are hundreds of <code>CSS attributes</code> that you can use to change the way an element looks on a web page.",
      "When you entered <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;h2&#62;</code>, you were giving that individual h2 element an <code>inline style</code>",
      "That's one way to add style to an element, but a better way is by using <code>Cascading Style Sheets (CSS)</code>.",
      "At the top of your code, create a <code>style tag</code> like this: <code>&#60;style&#62;&#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 <code>opening and closing curly braces</code> (<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": [
      "assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your h2 element should be blue.')",
      "assert(!$('h2').attr('style'), 'You should remove the style attribute from your h2 element.')"
    ],
    "challengeSeed": [
      "<h2 style='color: red'>CatPhotoApp</h2>",
      "",
      "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aecf08806",
    "name": "Use a CSS Class to Style an Element",
    "difficulty": 0.019,
    "description": [
      "Create a CSS class called \"red-text\" 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 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 Style tag, try removing the h2 style declaration from the existing style element, and replace it with the class declaration for \".red-text\"."
    ],
    "tests": [
      "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')",
      "assert($('h2').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')"
    ],
    "challengeSeed": [
      "<style>",
      "  h2 {",
      "    color: blue;",
      "  }",
      "</style>",
      "",
      "<h2>CatPhotoApp</h2>",
      "",
      "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aefe08806",
    "name": "Use a CSS Class to Style Multiple Elements",
    "difficulty": 0.020,
    "description": [
      "Apply the \"red-text\" class to the <code>h2</code> and <code>p</code> elements.",
      "Remember that you can attach classes to HTML elements by using the <code>class=\"class\"</code> within the relevant element's opening tag."
    ],
    "tests": [
      "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')",
      "assert($('h2').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')",
      "assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your paragraph element should be red.')",
      "assert($('p').hasClass('red-text'), 'You paragraph element should have the class \"red-text\".')"
    ],
    "challengeSeed": [
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08806",
    "name": "Change the Font Size of an Element",
    "difficulty": 0.021,
    "description": [
      "Create a second <code>p</code> element. Then set the font size 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>.",
      "First, create a second paragraph 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>",
      "See if you can figure out how to give both of your paragraph 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."
    ],
    "tests": [
      "assert($('p').length > 1, 'You need 2 paragraph elements with Kitty Ipsum text.')",
      "assert($('p').css('font-size') === '16px', 'Your paragraph elements should have the font-size of 16px.')"
    ],
    "challengeSeed": [
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aede08807",
    "name": "Set the Font Family of an Element",
    "difficulty": 0.022,
    "description": [
      "Make all paragraph elements use the \"Monospace\" font.",
      "You can set an element's font by using the <code>font-family</code> attribute.",
      "For example, if you wanted to set your h2 element's font to \"San-serif\", you would use the following CSS: <code>h2 { font-family: 'San-serif'; }</code>"
    ],
    "tests": [
      "assert($('p').css('font-family').match(/monospace/i), 'Your paragraph elements should use the font \"Monospace\".')"
    ],
    "challengeSeed": [
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08807",
    "name": "Import a Google Font",
    "difficulty": 0.023,
    "description": [
      "Apply the <code>font-family</code> of \"Lobster\" to your <code>h2</code> element.",
      "First, you'll need to make a <code>call</code> to Google to grab the \"Lobster\" font and load it into your HTML.",
      "Copy the following code snippet and paste it into your code editor above your <code>style</code> element:",
      "<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."
    ],
    "tests": [
      "assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')"
    ],
    "challengeSeed": [
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08808",
    "name": "Specify How Fonts Should Degrade",
    "difficulty": 0.024,
    "description": [
      "Make all your <code>h2</code> elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.",
      "You can leave \"Lobster\" your <code>h2</code> element's font-family, and have it \"degrade\" to a different font 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 do use this CSS style: <code>p { font-family: \"Helvetica\", \"Sans-Serif\"; }</code>.",
      "There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set your h2 elements to use \"Lobster\" and degrade to \"Monospace\".",
      "Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
    ],
    "tests": [
      "assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')",
      "assert($('h2').css('font-family').match(/monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08809",
    "name": "Using Important to Override Styles",
    "difficulty": 0.025,
    "description": [
      "Create a \"blue-text\" class that gives an element the font-color of blue. Also create a \"urgently-red\" class that give an element the font-color of red, but use <code>!important</code> to ensure the element is rendered as being red. Apply both classes to your <code>h2</code> element.",
      "Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.",
      "If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.",
      "There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use <code>!important</code>.",
      "In case you're curious, this is the priority hierarchy for element styles: !important > inline style > css class selector > css selector. That is, !important trumps all other styles, and inline styles trump style tag declarations.",
      "Here's an example of a CSS style that uses <code>!important</code>: <code>&#60;style&#62; .urgently-blue { color: blue !important; } &#60;/style&#62;</code>.",
      "Now see if you can make sure the h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations."
    ],
    "tests": [
      "assert($('h2').hasClass('blue-text'), 'Your h2 element should have the class \"blue-text\".')",
      "assert($('h2').hasClass('urgently-red'), 'Your h2 element should have the class \"urgently-red\".')",
      "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },

  {
    "_id": "bad87fee1348bd9aedf08812",
    "name": "Add an Image to your Website",
    "difficulty": 0.026,
    "description": [
      "Use an <code>img</code> element to add the image <code>http://bit.ly/fcc-kittens</code> to your website.",
      "You can add images to your website by using the <code>img</code> element, and point to an specific image's URL using the <code>src</code> attribute.",
      "An example of this would be <code>&#60img src=\"www.your-image-source.com/your-image.jpg\"/&#62</code>. Note that in most cases, <code>img</code> elements are self-closing.",
      "Try it with this image: <code>http://bit.ly/fcc-kittens</code>."
    ],
    "tests": [
      "assert($('img').length > 0, 'Your webpage should have an image element.')",
      "assert(!!$('img').attr('src'), 'Your image should have have a <code>src</code> attribute that points to the kitten image.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9acdf08812",
    "name": "Specify an Image Size",
    "difficulty": 0.027,
    "description": [
      "Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
      "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 images 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>."
    ],
    "tests": [
      "assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
      "assert($('img').width() === 100, 'Your image should be 100 pixels wide.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<img src='https://bit.ly/fcc-kittens'/>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9bedf08813",
    "name": "Add a Border Around an Element",
    "difficulty": 0.028,
    "description": [
      "Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border around an HTML element, and apply it to your cat photo.",
      "CSS borders have attributes like style, color and width.",
      "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>."
    ],
    "tests": [
      "assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
      "assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')",
      "assert(parseInt($('img').css('border-left-width')) > 8, 'Your image should have a border with a width of 10 pixels.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<img class='smaller-image' src='https://bit.ly/fcc-kittens'/>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08814",
    "name": "Add Rounded Corners with a Border Radius",
    "difficulty": 0.029,
    "description": [
      "Give your cat photo a border radius of 10 pixels.",
      "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."
    ],
    "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')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08815",
    "name": "Make an Image Circular with a Border Radius",
    "difficulty": 0.030,
    "description": [
      "Give your cat photo a <code>border-radius</code> of 50%.",
      "In addition to pixels, you can also specify a <code>border-radius</code> using a percentage."
    ],
    "tests": [
      "assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 10px;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08816",
    "name": "Use an Anchor Tag to Link to an External Page",
    "difficulty": 0.031,
    "description": [
      "Create an <code>anchor</code> element that links to http://catphotoapp.com and has \"cat photos\" as its anchor text (link text).",
      "Here's a diagram of an <code>anchor tag</code>. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your 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>"
    ],
    "tests": [
      "assert((/photo/gi).test($('a').text()), 'You need an <code>anchor</code> element that links to \"catphotoapp.com\".')",
      "assert($('a').filter(function(index) { return /photo/gi.test($('a')[index]); }).length === 1, 'Your <code>anchor</code> element should have the anchor text of \"See my cat photos\"')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aede08817",
    "name": "Wrap an Anchor Element within a Paragraph",
    "difficulty": 0.032,
    "description": [
      "Now wrap your anchor element within a <code>paragraph</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.",
      "Again, here's a diagram of an <code>anchor tag</code> 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>"
    ],
    "tests": [
      "assert((/photo/gi).test($('a').text()), 'You need an <code>anchor</code> element that links to \"catphotoapp.com\".')",
      "assert($('a').filter(function(index) { return /photo/gi.test($('a')[index]); }).length === 1, 'Your <code>anchor</code> element should have the anchor text of \"See my cat photos\"')",
      "assert($('a').parent().is('p'), 'Your anchor element should be wrapped within a paragraph element.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<a href='http://www.catphotoapp.com'>cat photos</a>",
      "",
      "<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },

  {
    "_id": "bad87fee1348bd9aedf08817",
    "name": "Make Dead Links using the Hash Symbol",
    "difficulty": 0.033,
    "description": [
      "Use the hash symbol(#) to turn your <code>anchor</code> element's link into a dead link.",
      "Sometimes you want to add <code>anchor</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>anchor</code> element's <code>href</code> attribute with 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 \"#\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='http://www.catphotoapp.com'>cat photos</a>.</p>",
      "",
      "<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08820",
    "name": "Turn an Image into a Link",
    "difficulty": 0.034,
    "description": [
      "Wrap your <code>img</code> element inside an anchor element with a dead link.",
      "You can make elements into links by wrapping them in an <code>anchor tag</code>.",
      "Wrap your image in an <code>anchor tag</code>. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'&#62;&#60;/a&#62;</code>",
      "Remember to use the hash symbol as your <code>anchor tag</code>'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').filter(function(index) { return /#/gi.test($('a')[index]); }).length > 1, 'Wrap your image element inside an anchor element that has its <code>href</code> attribute set to \"#\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08818",
    "name": "Add Alt Text to an image",
    "difficulty": 0.035,
    "description": [
      "Add the <code>alt text</code> \"A cute orange cat lying on its back\" to our cat photo",
      "<code>alt text</code> is what browsers will display if they fail to load the image. <code>alt text</code> is also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt text</code>.",
      "In short, every image should have <code>alt text</code>!",
      "<code>Alt text</code> is a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
      "You can add alt text right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>."
    ],
    "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\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedf08827",
    "name": "Create a Bulleted Unordered List",
    "difficulty" : 0.036,
    "description": [
      "Replace the paragraph elements with an unordered list of three things that cats love.",
      "HTML has a special element for creating unordered lists, 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;&#60;li&#62;milk&#60;/li&#62;&#60;li&#62;cheese&#60;/li&#62;&#60;ul&#62;</code> would create a bulleted list of \"milk\" and \"cheese\"."
    ],
    "tests": [
      "assert($('ul').length > 0, 'Create a <code>ul</code> element.')",
      "assert($('li').length > 2, 'Add three <code>li</code> elements to your <code>ul</code> element.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
      "<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedf08828",
    "name": "Create an Ordered List",
    "difficulty" : 0.037,
    "description": [
      "Create an <code>ordered list</code> of the the top 3 things cats hate the most.",
      "HTML has a special element for creating ordered lists, 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;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;ol&#62;</code> would create a numbered list of \"hydrogen\" and \"helium\"."
    ],
    "tests": [
      "assert($('ul').length > 0, 'You should have an <code>ul</code> element on your webpage.')",
      "assert($('ol').length > 0, 'You should have an <code>ol</code> element on your webpage.')",
      "assert($('li').length > 5, 'You should have three <code>li</code> elements on within your <code>ul</code> element.')",
      "assert($('li').length > 5, 'You should have three <code>li</code> elements on within your <code>ol</code> element.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedf08829",
    "name": "Create a Text Field",
    "difficulty" : 0.038,
    "description": [
      "Now we'll create a web form. Create a text field under your lists.",
      "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>"
    ],
    "tests": [
      "assert($('input[type=\"text\"').length > 0, 'Your webpage should have an text field input element.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedf08830",
    "name": "Add Placeholder Text to a Text Field",
    "difficulty" : 0.039,
    "description": [
      "Add the placeholder text \"type a cat photo URL here\" to your text field.",
      "Placeholder text will appear in your text field before your user has inputed anything.",
      "For example: <code>&#60;input type='text' placeholder='this is placeholder text'&#62;</code>"
    ],
    "tests": [
      "assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of \"cat photo URL\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<input type='text'>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aede08830",
    "name": "Create a basic Form Element",
    "difficulty" : 0.040,
    "description": [
      "Wrap your text field in a <code>&#60;form&#62;</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element.",
      "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
      "For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>"
    ],
    "tests": [
      "assert($('form').length > 0, 'Wrap your text input element within a <code>form</code> element.')",
      "assert($('form').attr('action'), 'Your <code>form</code> element should have an <code>action</code> attribute.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<input type='text' placeholder='cat photo URL'>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedd08830",
    "name": "Add a Submit Button to a Form",
    "difficulty" : 0.041,
    "description": [
      "Add a submit button to your form field.",
      "Let's add a submit button to your form. Clicking this button will send the date 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>"
    ],
    "tests": [
      "assert($('button').length > 0, 'Your form should have a button inside it.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <input type='text' placeholder='cat photo URL'>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedc08830",
    "name": "Use HTML5 to Make a Field Required",
    "difficulty" : 0.042,
    "description": [
      "Make it required for your user to input text into your form before being able to submit it.",
      "You can require your user to complete specific form fields before they will be able to submit your form.",
      "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 use: <code>&#60;input type='text' required&#62;</code>"
    ],
    "tests": [
      "assert($('input').prop('required'), 'Your text field have the property of being required.')",
      "assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of \"cat photo URL\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <input type='text' placeholder='cat photo URL'>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedf08834",
    "name": "Create a Set of Radio Buttons",
    "difficulty" : 0.043,
    "description": [
      "Add to your form a pair of <code>radio buttons</code> that are wrapped in <code>label</code> elements and share a <code>name</code> attribute, with the options of \"indoor\" and \"outdoor\".",
      "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>.",
      "Radio buttons should be wrapped within <code>label</code> elements.",
      "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>"
    ],
    "tests": [
      "assert($('input[type=\"radio\"').length > 1, 'Your webpage should have two radio button elements.')",
      "assert($('input[type=\"radio\"').attr('name'), 'Both of your radio button should have <code>name</code> attributes with the same value.')",
      "assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedf08835",
    "name": "Create a Set of Checkboxes",
    "difficulty" : 0.044,
    "description": [
      "Add to your form a set of three <code>checkbox</code> elements that are wrapped in <code>label</code> elements and share the same <code>name</code> attribute.",
      "Forms commonly use <code>checkbox</code> elements for questions that may have more than one answer.",
      "For example: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>"
    ],
    "tests": [
      "assert($('input[type=\"checkbox\"').length > 2, 'Your webpage should have three checkbox elements.')",
      "assert($('label').length > 2, 'Each of your three checkbox elements should be wrapped in a label element.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aede08835",
    "name": "Clean up your form using Linebreaks",
    "difficulty" : 0.045,
    "description": [
      "Clean up your form by adding linebreaks between form elements.",
      "Remember that you can create a linebreak element by using the code: <code>&#60;br&#62;</code>"
    ],
    "tests": [
      "assert($('br').length > 1, 'Add at least 2 line breaks to visually separate your form elements.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedd08835",
    "name": "Check Radio Buttons and Checkboxes by Default",
    "difficulty" : 0.046,
    "description": [
      "Set one of your radio buttons and one of your checkboxes to be checked by default.",
      ""
    ],
    "tests": [
      "assert($('input[type=\"radio\"').prop('checked'), 'One of the radio buttons on your form should be checked by default.')",
      "assert($('input[type=\"checkbox\"').prop('checked'), 'One of the checkboxes on your form should be checked by default.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id": "bad87fee1348bd9acde08812",
    "name": "Use Bootstrap for Responsive Images",
    "difficulty": 0.047,
    "description": [
      "Add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\", and add the <code>img-responsive</code> Bootstrap class to the image.",
      "Specifying a width of 200 pixels on our img element made it fit our phone's screen, but it's not a perfect fit. It would be great if the image could be exactly the width of our phone's screen.",
      "Fortunately, there's a <code>Responsive CSS Framework</code> called written by Twitter called Bootstrap. 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 included it for you here.",
      "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.",
      "Now all you need to do is add the <code>img-responsive</code> class to your image."
    ],
    "tests": [
      "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\"')",
      "assert($('img').length > 1, 'You should add an image with the src of \"http://bit.ly/fcc-kittens2\"')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },
  {
    "_id": "bad87fee1348bd8acde08812",
    "name": "Center Text with Bootstrap",
    "difficulty": 0.048,
    "description": [
      "Add Bootstrap's <code>text-center</code> class to your h2 element.",
      "Now that we're using Bootstrap, we can center our heading elements (h2) to make them look better. All we need to do is add the class <code>text-center</code> to the h1 and h2 elements.",
      "Note 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 h2 element should be centered by applying the class \"text-center\"')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id": "bad87fee1348cd8acdf08812",
    "name": "Create a Bootstrap Button",
    "difficulty": 0.049,
    "description": [
      "Create a new button below your large kitten photo with the class \"btn\" and the text of \"like this photo\".",
      "Bootstrap has its own button styles, which look much better than the plain HTML ones."
    ],
    "tests": [
      "assert($('.btn').length > 0, 'your new button should have the class \"btn\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text text-center'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },
  {
    "_id": "bad87fee1348cd8acef08812",
    "name": "Create a Block Element Bootstrap Button",
    "difficulty": 0.050,
    "description": [
      "Add Bootstrap's <code>btn-block</code> class to your Bootstrap button.",
      "Normally, your buttons are only as wide as the text they contain. By making them <code>block elements</code>, your button will stretch to fill your page's entire horizontal space.",
      "Note that these buttons still need the <code>btn</code> class."
    ],
    "tests": [
      "assert($('.btn-block').length > 0, 'your new button should have the class \"btn-block\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text text-center'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<button class='btn'>Like</button>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },
  {
    "_id": "bad87fee1348cd8acef08811",
    "name": "Color a Bootstrap Button with Button Primary",
    "difficulty": 0.051,
    "description": [
      "Add Bootstrap's <code>btn-block</code> class to both of your buttons.",
      "Normally, your buttons are only as wide as the text they contain. By making them <code>block elements</code>, your button will stretch to fill your page's entire horizontal space.",
      "Note that these buttons still need the <code>btn</code> class."
    ],
    "tests": [
      "assert($('.btn-primary').length > 0, 'your new button should have the class \"btn-primary\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text text-center'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<button class='btn btn-block'>Like</button>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },
  {
    "_id": "bad87fee1348cd8acef08813",
    "name": "Color a Bootstrap Button with Button Info",
    "difficulty": 0.052,
    "description": [
      "Create a new block-level Bootstrap button below your \"like\" button with the text \"Info\", and add Bootstrap's <code>btn-info</code> class to it.",
      "Bootstrap comes with several pre-defined colors for buttons. The <code>btn-primary</code> class is the main button color you'll use throughout your app.",
      "Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
    ],
    "tests": [
      "assert($('.btn-info').length > 0, 'your new button should have the class \"btn-info\".')",
      "assert($('.btn-block').length > 1, 'Both of your Bootstrap buttons should have the class \"btn-block\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text text-center'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<button class='btn btn-block btn-primary'>Like</button>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },
  {
    "_id": "bad87fee1348ce8acef08814",
    "name": "Warn your Users of a Dangerous Action with the Bootstrap Button Danger Class",
    "difficulty": 0.053,
    "description": [
      "Create a button with the text \"delete\" and give it the class <code>btn-danger</code>.",
      "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.",
      "Note that this button still needs the <code>btn</code> and <code>btn-block</code> classes."
    ],
    "tests": [
      "assert($('.btn-danger').length > 0, 'Your new button should have the class \"btn-danger\".')",
      "assert($('.btn-block').length > 1, 'Both of your Bootstrap buttons should have the class \"btn-block\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text text-center'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<button class='btn btn-block btn-primary'>Like</button>",
      "<button class='btn btn-block btn-info'>Info</button>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },
  {
    "_id": "bad88fee1348ce8acef08815",
    "name": "Use the Bootstrap Grid to Put Elements Side By Side",
    "difficulty": 0.054,
    "description": [
      "Put the \"like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping them in both in a <code>&#60;div class=\"row\"&#62;</code> element and each of them in a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
      "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.",
      "The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be <code>nested</code> within it."
    ],
    "tests": [
      "assert($('.row').length > 0, 'Your new button should be wrapped within a div with the class \"row\".')",
      "assert($('.col-xs-4').length > 2, 'Each of your bootstrap buttons should be wrapped in a div with the class \"col-xs-4\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text text-center'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<button class='btn btn-block btn-primary'>Like</button>",
      "<button class='btn btn-block btn-info'>Info</button>",
      "<button class='btn btn-block btn-danger'>Delete</button>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedf08845",
    "name": "Use Bootstrap Text Primary Class instead of Custom CSS",
    "difficulty" : 0.055,
    "description": [
      "Delete the following from your style tag: <code>.red-text</code>, <code>p</code>, <code>.smaller-image</code>. Delete the <code>p</code> element with the dead link. Remove your <code>red-text</code> class from your <code>h2</code> element and instead apply the <code>text-primary</code> Bootstrap class. Replace the <code>smaller-image</code> class on your top image with the <code>img-responsive</code> class."
    ],
    "tests": [
      "assert(!$('h2').hasClass('red-text'), 'You h2 element should no longer have the class \"red-text\".')",
      "assert($('h2').hasClass('text-primary'), 'You 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-responsive').length > 1, 'Remove the \"smaller-image\" class from your top image and replace it with the \"img-responsive\" class.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  .red-text {",
      "    color: red;",
      "  }",
      "",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  p {",
      "    font-size: 16px;",
      "    font-family: Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "  .smaller-image {",
      "    width: 100px;",
      "  }",
      "</style>",
      "",
      "<h2 class='red-text text-center'>CatPhotoApp</h2>",
      "",
      "<p>Click here for <a href='#'>cat photos</a>.</p>",
      "",
      "<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<br>",
      "<div class='row'>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-primary'>Like</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-info'>Info</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-danger'>Delete</button>",
      "  </div>",
      "</div>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aede08845",
    "name": "Create a Custom Heading",
    "difficulty" : 0.056,
    "description": [
      "Wrap your first image and your h2 element in a <code>&#60;div class='row'&#62;</code> element. Wrap your h2 text in 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."
    ],
    "tests": [
      "assert($('.row').length > 1, 'Your h2 and top image elements should both be wrapped together within a div with the class \"row\".')",
      "assert($('.col-xs-4').length > 3, 'Wrap your top image inside a div with the class \"col-xs-4\".')",
      "assert($('.col-xs-8').length > 0, 'Wrap your h2 element inside a div with the class \"col-xs-8\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "",
      "<style>",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "</style>",
      "",
      "<h2 class='text-primary text-center'>CatPhotoApp</h2>",
      "",
      "<a href='#'><img class='img-responsive' src='https://bit.ly/fcc-kittens'/></a>",
      "",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<br>",
      "<div class='row'>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-primary'>Like</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-info'>Info</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-danger'>Delete</button>",
      "  </div>",
      "</div>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedd08845",
    "name": "Add Font Awesome Icons to our Buttons",
    "difficulty" : 0.057,
    "description": [
      "Use Font Awesome to add a \"like\" icon to your like button.",
      "You should add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;</code> within your like button's element."
    ],
    "tests": [
      "assert($('.fa-thumbs-up').length > 0, 'You should add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;&#60;i&#62;</code> within your like button element.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "</style>",
      "",
      "<div class='row'>",
      "  <div class='col-xs-8'>",
      "    <h2 class='text-primary text-center'>CatPhotoApp</h2>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "  </div>",
      "</div>",
      "<br>",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<br>",
      "<div class='row'>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-primary'>Like</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-info'>Info</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-danger'>Delete</button>",
      "  </div>",
      "</div>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedc08845",
    "name": "Add Font Awesome Icons all of our Buttons",
    "difficulty" : 0.058,
    "description": [
      "Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" button to your delete button.",
      "You should add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;</code> within your like button's element."
    ],
    "tests": [
      "assert($('.fa-trash').length > 0, 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;i&#62;</code> within your like button element.')",
      "assert($('.fa-info-circle').length > 0, 'You should add a <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;i&#62;</code> within your like button element.')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "</style>",
      "",
      "<div class='row'>",
      "  <div class='col-xs-8'>",
      "    <h2 class='text-primary text-center'>CatPhotoApp</h2>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "  </div>",
      "</div>",
      "<br>",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<br>",
      "<div class='row'>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-info'>Info</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-danger'>Delete</button>",
      "  </div>",
      "</div>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aedb08845",
    "name": "Use Bootstrap to Responsively Style a Radio Buttons",
    "difficulty" : 0.059,
    "description": [
      "Wrap all of your radio buttons in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-6'&#62;</code> element."
    ],
    "tests": [
      "assert($('.row').length > 2, 'Wrap your all of your radio buttons inside one div with the class \"row\".')",
      "assert($('.col-xs-6').length > 3, 'Wrap each of your radio buttons inside its own div with the class \"col-xs-6\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "</style>",
      "",
      "<div class='row'>",
      "  <div class='col-xs-8'>",
      "    <h2 class='text-primary text-center'>CatPhotoApp</h2>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "  </div>",
      "</div>",
      "<br>",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<br>",
      "<div class='row'>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
      "  </div>",
      "</div>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "  <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aeda08845",
    "name": "Use Bootstrap to Responsively Style Checkboxes",
    "difficulty" : 0.060,
    "description": [
      "Wrap all your checkboxes in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-4'&#62;</code> element."
    ],
    "tests": [
      "assert($('.row').length > 3, 'Wrap your all of your checkboxes inside one div with the class \"row\".')",
      "assert($('.col-xs-4').length > 6, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "</style>",
      "",
      "<div class='row'>",
      "  <div class='col-xs-8'>",
      "    <h2 class='text-primary text-center'>CatPhotoApp</h2>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "  </div>",
      "</div>",
      "<br>",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<br>",
      "<div class='row'>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
      "  </div>",
      "</div>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <div class='row'>",
      "    <div class='col-xs-6'>",
      "      <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "    </div>",
      "    <div class='col-xs-6'>",
      "      <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "    </div>",
      "  </div>",
      "  <br>",
      "  <label><input type='checkbox' name='personality'> Loving</label>",
      "  <label><input type='checkbox' name='personality'> Lazy</label>",
      "  <label><input type='checkbox' name='personality'> Crazy</label>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aed908845",
    "name": "Style a Text Input with the Bootstrap Form Control Class",
    "difficulty" : 0.061,
    "description": [
      "Give your form's text input field in a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\" and give it the Font Awesome icon of \"fa-paper-plane\"."
    ],
    "tests": [
      "assert($('.btn-primary').length > 1, 'Give your form's submit button the classes \"btn btn-primary\".')",
      "assert($('.fa-paper-plane').length > 0, 'You should add a <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;i&#62;</code> within your submit button element.')",
      "assert($('.form-control').length > 0, 'Give your form's text input field in a class of \"form-control\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "</style>",
      "",
      "<div class='row'>",
      "  <div class='col-xs-8'>",
      "    <h2 class='text-primary text-center'>CatPhotoApp</h2>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "  </div>",
      "</div>",
      "<br>",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<br>",
      "<div class='row'>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
      "  </div>",
      "</div>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <br>",
      "  <div class='row'>",
      "    <div class='col-xs-6'>",
      "      <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "    </div>",
      "    <div class='col-xs-6'>",
      "      <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "    </div>",
      "  </div>",
      "  <br>",
      "  <div class='row'>",
      "    <div class='col-xs-4'>",
      "      <label><input type='checkbox' name='personality'> Loving</label>",
      "    </div>",
      "    <div class='col-xs-4'>",
      "      <label><input type='checkbox' name='personality'> Lazy</label>",
      "    </div>",
      "    <div class='col-xs-4'>",
      "      <label><input type='checkbox' name='personality'> Crazy</label>",
      "    </div>",
      "  </div>",
      "  <br>",
      "  <input type='text' placeholder='cat photo URL' required>",
      "  <button type='submit'>Submit</button>",
      "</form>"
    ]
  },

  {
    "_id" : "bad87fee1348bd9aec908845",
    "name": "Line up Form Elements Responsively with Bootstrap",
    "difficulty" : 0.062,
    "description": [
      "Wrap both your form's text input field and submit button within a div with the class \"row\". Wrap your form's text input field within a div with the class of \"col-xs-7\". Wrap your form's submit button the in a div with the class \"col-xs-5\"."
    ],
    "tests": [
      "assert($('.row').length > 4, 'Wrap your all of your checkboxes inside one div with the class \"row\".')",
      "assert($('.col-xs-5').length > 0, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')",
      "assert($('.col-xs-7').length > 0, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')"
    ],
    "challengeSeed": [
      "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
      "<style>",
      "  h2 {",
      "    font-family: Lobster, Monospace;",
      "  }",
      "",
      "  .thick-green-border {",
      "    border-color: green;",
      "    border-width: 10px;",
      "    border-style: solid;",
      "    border-radius: 50%;",
      "  }",
      "",
      "</style>",
      "",
      "<div class='row'>",
      "  <div class='col-xs-8'>",
      "    <h2 class='text-primary text-center'>CatPhotoApp</h2>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
      "  </div>",
      "</div>",
      "<br>",
      "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
      "<br>",
      "<div class='row'>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
      "  </div>",
      "  <div class='col-xs-4'>",
      "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
      "  </div>",
      "</div>",
      "<p>Things cats love:</p>",
      "<ul>",
      "  <li>cat nip</li>",
      "  <li>laser pointers</li>",
      "  <li>lasagna</li>",
      "</ul>",
      "<p>Top 3 things cats hate:</p>",
      "<ol>",
      "  <li>flea treatment</li>",
      "  <li>thunder</li>",
      "  <li>other cats</li>",
      "</ol>",
      "<form action=\"/submit-cat-photo\">",
      "  <br>",
      "  <div class='row'>",
      "    <div class='col-xs-6'>",
      "      <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
      "    </div>",
      "    <div class='col-xs-6'>",
      "      <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
      "    </div>",
      "  </div>",
      "  <br>",
      "  <div class='row'>",
      "    <div class='col-xs-4'>",
      "      <label><input type='checkbox' name='personality'> Loving</label>",
      "    </div>",
      "    <div class='col-xs-4'>",
      "      <label><input type='checkbox' name='personality'> Lazy</label>",
      "    </div>",
      "    <div class='col-xs-4'>",
      "      <label><input type='checkbox' name='personality'> Crazy</label>",
      "    </div>",
      "  </div>",
      "  <br>",
      "  <input type='text' class='form-control' placeholder='cat photo URL' required>",
      "  <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
      "</form>"
    ]
  },

  {
    "_id": "bad88fee1348bd9aedf08825",
    "name": "Adjusting the Padding of an Element",
    "difficulty": 0.064,
    "description": [
      "Change the <code>padding</code> of the green box to match that of the red box.",
      "An element's <code>padding</code> controls the amount of space between an element and its <code>border</code>.",
      "Here, we can see that the green box and the red box and the green 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 padding, it will increase the distance between the word \"padding\" and the border around the text."
    ],
    "tests": [
      "expect($('.green-box')).to.have.css('padding', '20px')"
    ],
    "challengeSeed": [
      "<style>",
      "  .injected-text {",
      "    margin-bottom: -25px;",
      "    text-align: center;",
      "  }",
      "",
      "  .box {",
      "    border-style: solid;",
      "    border-color: black;",
      "    border-width: 5px;",
      "    text-align: center;",
      "  }",
      "",
      "  .yellow-box {",
      "    background-color: yellow;",
      "    padding:10px;",
      "  }",
      "  ",
      "  .red-box {",
      "    background-color:red;",
      "    padding: 20px;",
      "  }",
      "",
      "  .green-box {",
      "    background-color: green;",
      "    padding: 10px;",
      "  }",
      "</style>",
      "<h5 class=\"injected-text\">margin</h5>",
      "",
      "<div class=\"box yellow-box\">",
      "  <h5 class=\"box red-box\">padding</h5>",
      "  <h5 class=\"box green-box\">padding</h5>",
      "</div>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08822",
    "name": "Adjust the Margin of an Element",
    "difficulty": 0.065,
    "description": [
      "Change the <code>margin</code> of the green box to match that of the red box.",
      "An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
      "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more <code>margin</code> than the green box, making it appear smaller.",
      "When you increase the green box's padding, it will increase the distance between its border and surrounding elements."
    ],
    "tests": [
      "expect($('.green-box')).to.have.css('margin', '20px')"
    ],
    "challengeSeed": [
      "<style>",
      "  .injected-text {",
      "    margin-bottom: -25px;",
      "    text-align: center;",
      "  }",
      "",
      "  .box {",
      "    border-style: solid;",
      "    border-color: black;",
      "    border-width: 5px;",
      "    text-align: center;",
      "  }",
      "",
      "  .yellow-box {",
      "    background-color: yellow;",
      "    padding:10px;",
      "  }",
      "  ",
      "  .red-box {",
      "    background-color:red;",
      "    padding: 20px;",
      "    margin: 20px;",
      "  }",
      "",
      "  .green-box {",
      "    background-color: green;",
      "    padding: 20px;",
      "    margin: 10px;",
      "  }",
      "</style>",
      "<h5 class=\"injected-text\">margin</h5>",
      "",
      "<div class=\"box yellow-box\">",
      "  <h5 class=\"box red-box\">padding</h5>",
      "  <h5 class=\"box green-box\">padding</h5>",
      "</div>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08823",
    "name": "Add a Negative Margin to an Element",
    "difficulty": 0.066,
    "description": [
      "Change the <code>margin</code> of the green box to a negative value, so it fills the entire horizontal width of the blue box.",
      "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 margin to a negative value, the element will grow larger.",
      "Try to set the margin to a negative value like the one for the red box."
    ],
    "tests": [
      "expect($('.green-box')).to.have.css('margin', '-15px')"
    ],
    "challengeSeed": [
      "<style>",
      "  .injected-text {",
      "    margin-bottom: -25px;",
      "    text-align: center;",
      "  }",
      "",
      "  .box {",
      "    border-style: solid;",
      "    border-color: black;",
      "    border-width: 5px;",
      "    text-align: center;",
      "  }",
      "",
      "  .yellow-box {",
      "    background-color: yellow;",
      "    padding:10px;",
      "  }",
      "  ",
      "  .red-box {",
      "    background-color:red;",
      "    padding: 20px;",
      "    margin: -15px;",
      "  }",
      "",
      "  .green-box {",
      "    background-color: green;",
      "    padding: 20px;",
      "    margin: 20px;",
      "  }",
      "</style>",
      "",
      "<div class=\"box yellow-box\">",
      "  <h5 class=\"box red-box\">padding</h5>",
      "  <h5 class=\"box green-box\">padding</h5>",
      "</div>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08824",
    "name": "Add Different Padding to Each Side of an Element TEST",
    "difficulty": 0.067,
    "description": [
      "Give the green box a padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
      "Sometimes you will want to customize an element so that it has different padding on each of its sides.",
      "CSS allows you to control the padding 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."
    ],
    "tests": [
      "expect($('.green-box')).to.have.css('padding-bottom', '20px')",
      "expect($('.green-box')).to.have.css('padding-left', '40px')"
    ],
    "challengeSeed": [
      "<style>",
      "  .injected-text {",
      "    margin-bottom: -25px;",
      "    text-align: center;",
      "  }",
      "",
      "  .box {",
      "    border-style: solid;",
      "    border-color: black;",
      "    border-width: 5px;",
      "    text-align: center;",
      "  }",
      "",
      "  .yellow-box {",
      "    background-color: yellow;",
      "    padding:10px;",
      "  }",
      "  ",
      "  .red-box {",
      "    background-color:red;",
      "    padding-top: 40px;",
      "    padding-right: 20px;",
      "    padding-bottom: 20px;",
      "    padding-left: 40px;",
      "  }",
      "",
      "  .green-box {",
      "    background-color: green;",
      "  }",
      "</style>",
      "<h5 class=\"injected-text\">margin</h5>",
      "",
      "<div class=\"box yellow-box\">",
      "  <h5 class=\"box red-box\">padding</h5>",
      "  <h5 class=\"box green-box\">padding</h5>",
      "</div>"
    ]
  },
  {
    "_id": "bad87fee1248bd9aedf08824",
    "name": "Add Different a Margin to Each Side of an Element TEST",
    "difficulty": 0.068,
    "description": [
      "Give the green box a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
      "Sometimes you will want to customize an element so that it has a different margin on each of its sides.",
      "CSS allows you to control the margin 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."
    ],
    "tests": [
      "expect($('.green-box')).to.have.css('margin-bottom', '20px')",
      "expect($('.green-box')).to.have.css('margin-left', '40px')"
    ],
    "challengeSeed": [
      "<style>",
      "  .injected-text {",
      "    margin-bottom: -25px;",
      "    text-align: center;",
      "  }",
      "",
      "  .box {",
      "    border-style: solid;",
      "    border-color: black;",
      "    border-width: 5px;",
      "    text-align: center;",
      "  }",
      "",
      "  .yellow-box {",
      "    background-color: yellow;",
      "    padding:10px;",
      "  }",
      "  ",
      "  .red-box {",
      "    background-color:red;",
      "    margin-top: 40px;",
      "    margin-right: 20px;",
      "    margin-bottom: 20px;",
      "    margin-left: 40px;",
      "  }",
      "",
      "  .green-box {",
      "    background-color: green;",
      "  }",
      "</style>",
      "<h5 class=\"injected-text\">margin</h5>",
      "",
      "<div class=\"box yellow-box\">",
      "  <h5 class=\"box red-box\">padding</h5>",
      "  <h5 class=\"box green-box\">padding</h5>",
      "</div>"
    ]
  },
  {
    "_id": "bad87fee1348bd9aedf08826",
    "name": "Use Clockwise Notation to Specify an Element's Padding",
    "difficulty": 0.069,
    "description": [
      "Use <code>Clockwise Notation</code> to give an element padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
      "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.",
      "You can also use this notation for margins!"
    ],
    "tests": [
      "expect($('.green-box')).to.have.css('margin-bottom', '20px')",
      "expect($('.green-box')).to.have.css('margin-left', '40px')"
    ],
    "challengeSeed": [
      "<style>",
      "  .injected-text {",
      "    margin-bottom: -25px;",
      "    text-align: center;",
      "  }",
      "",
      "  .box {",
      "    border-style: solid;",
      "    border-color: black;",
      "    border-width: 5px;",
      "    text-align: center;",
      "  }",
      "",
      "  .yellow-box {",
      "    background-color: yellow;",
      "    padding: 20px 40px 20px 40px;",
      "  }",
      "  ",
      "  .red-box {",
      "    background-color:red;",
      "  }",
      "",
      "  .green-box {",
      "    background-color: green;",
      "  }",
      "</style>",
      "<h5 class=\"injected-text\">margin</h5>",
      "",
      "<div class=\"box yellow-box\">",
      "  <h5 class=\"box red-box\">padding</h5>",
      "  <h5 class=\"box green-box\">padding</h5>",
      "</div>"
    ]
  },

  {
    "_id": "bad87fee1348bd9aede08826",
    "name": "Use Hex Codes for Precise Colors",
    "difficulty": 0.070,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aedd08826",
    "name": "Use Shortened Hex Codes for Colors",
    "difficulty": 0.071,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9acdd08826",
    "name": "Learn how Script Tags and Document Ready Work",
    "difficulty": 0.072,
    "description": [
      "Test"
    ],
    "tests": [
      "assert($('#target').hasClass('disabled'), 'The button with the ID of \"target\" should continue to have the \"disabled\" class.')",
      "assert(!!$('#target[disabled]'), 'Enable the button with the ID of \"target\" by using jQuery.')",
      "expect($('#target')).to.exist()"
    ],
    "challengeSeed": [
      "fccss",
      "  $(document).ready(function() {",
      "    $('#target').attr('disabled', true)",
      "  });",
      "fcces",
      "<button id='target' class='btn btn-primary btn-block'>Enable this button with jQuery</button>"
    ]
  },

  {
    "_id": "bad87fee1348bd9aedc08826",
    "name": "Target Elements by Selectors Using jQuery",
    "difficulty": 0.073,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aedb08826",
    "name": "Target Elements by Class Using jQuery",
    "difficulty": 0.074,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aeda08826",
    "name": "Target an element by ID Using jQuery",
    "difficulty": 0.075,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed908826",
    "name": "Change the CSS of an Element Using jQuery",
    "difficulty": 0.076,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed808826",
    "name": "Disable an Element Using jQuery",
    "difficulty": 0.077,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed708826",
    "name": "Remove an Element Using jQuery",
    "difficulty": 0.078,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed608826",
    "name": "Move an Element Using jQuery",
    "difficulty": 0.079,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed508826",
    "name": "Clone an Element Using jQuery",
    "difficulty": 0.080,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed408826",
    "name": "Animate an Element Using jQuery",
    "difficulty": 0.081,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed308826",
    "name": "Target the Parent of an Element Using jQuery",
    "difficulty": 0.082,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed208826",
    "name": "Target the Children of an Element Using jQuery",
    "difficulty": 0.083,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },


  {
    "_id": "bad87fee1348bd9aed108826",
    "name": "Target a Specific Child of an Element Using jQuery",
    "difficulty": 0.084,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aed008826",
    "name": "Target Even Numbered Elements Using jQuery",
    "difficulty": 0.085,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aecc08826",
    "name": "Read Data from an Element Using jQuery",
    "difficulty": 0.086,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9aebc08826",
    "name": "Get Data from an URL Using jQuery",
    "difficulty": 0.087,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9ae9c08826",
    "name": "Loop through JSON Data Using jQuery",
    "difficulty": 0.089,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bad87fee1348bd9ae8c08826",
    "name": "Setup Click Events Using jQuery",
    "difficulty": 0.089,
    "description": [

    ],
    "tests": [

    ],
    "challengeSeed": [

    ]
  },

  {
    "_id": "bd7123d8c441eddfaeb5bdef",
    "name": "Learn Basic Computer Science",
    "difficulty": 0.90,
    "challengeSeed": "114628241",
    "description": [
      "Stanford has an excellent free online Computer Science curriculum. This interactive course uses a modified version of JavaScript. It will cover a lot of concepts quickly.",
      "Note that Harvard also has an excellent introduction to computer science course called CS50, but it takes more than 100 hours to complete, and doesn't use JavaScript.",
      "Despite being completely self-paced, Stanford's CS101 course is broken up into weeks. Each of the following challenges will address one of those weeks.",
      "Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z54/z1/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z54/z1/</a> and complete the first week's course work."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd8124d8c441eddfaeb5bdef",
    "name": "Learn Loops",
    "difficulty": 0.19,
    "challengeSeed": "114597348",
    "description": [
      "Now let's tackle week 2 of Stanford's Intro to Computer Science course.",
      "This will introduce us to loops, a fundamental feature of every programming language.",
      "Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z100/a7a70ce6e4724c58862ee6007284face/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z100/a7a70ce6e4724c58862ee6007284face/</a> and complete Week 2."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd8125d8c441eddfaeb5bdef",
    "name": "Learn Computer Hardware",
    "difficulty": 0.20,
    "challengeSeed": "114597347",
    "description": [
      "Week 3 of Stanford's Intro to Computer Science covers computer hardware and explains Moore's law of exponential growth in the price-performance of processors.",
      "This challenge will also give you an understanding of how bits and bytes work.",
      "Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z143/z101/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z143/z101/</a> and complete Week 3."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd8126d8c441eddfaeb5bdef",
    "name": "Learn Computer Networking",
    "difficulty": 0.21,
    "challengeSeed": "114604811",
    "description": [
      "Now that you've learned about computer hardware, it's time to learn about the software that runs on top of it.",
      "Particularly important, you will learn about networks and TCP/IP - the protocol that powers the internet.",
      "Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z187/z144/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z187/z144/</a> and complete Week 4."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd8127d8c441eddfaeb5bdef",
    "name": "Learn Boolean Logic",
    "difficulty": 0.22,
    "challengeSeed": "114604812",
    "description": [
      "Now we'll do some more table exercises and learn boolean logic.",
      "We'll also learn the difference between digital data and analog data.",
      "Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z208/z188/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z208/z188/</a> and complete Week 5."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd8128d8c441eddfaeb5bdef",
    "name": "Learn Computer Security",
    "difficulty": 0.23,
    "challengeSeed": "114604813",
    "description": [
      "We're almost done with Stanford's Introduction to Computer Science course!",
      "We'll learn about one of the most important inventions of the 20th century - spreadsheets.",
      "We'll also learn about Computer Security and some of the more common vulnerabilities software systems have.",
      "Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/</a> and complete Week 6, the final week of the course."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7129d8c441eddfaeb5bdef",
    "name": "Build an Adventure Game",
    "difficulty": 0.24,
    "challengeSeed": "114604814",
    "description": [
      "Now that you understand some Computer Science fundamentals, let's focus on programming JavaScript!",
      "We're going to work through Codecademy's famous interactive JavaScript course.",
      "This course will teach us some JavaScript fundamentals while guiding us through the process of building interesting web apps, all within Codecademy's learner-friendly environment!",
      "Go to <a href='http://www.codecademy.com/courses/getting-started-v2/0/1' target='_blank'>http://www.codecademy.com/courses/getting-started-v2/0/1</a> and complete the section.",
      "Be sure to also complete this section: <a href='http://www.codecademy.com/courses/javascript-beginner-en-x9DnD/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-x9DnD/0/1</a>."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7130d8c441eddfaeb5bdef",
    "name": "Build Rock Paper Scissors",
    "difficulty": 0.25,
    "challengeSeed": "114604815",
    "description": [
      "Now we'll learn how JavaScript functions work, and use them to build a simple Rock Paper Scissors game.",
      "Go to <a href='http://www.codecademy.com/courses/javascript-beginner-en-6LzGd/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-6LzGd/0/1</a> and complete the section.",
      "Be sure to also complete this section: <a href='http://www.codecademy.com/courses/javascript-beginner-en-Bthev-mskY8/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-Bthev-mskY8/0/1</a>."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7131d8c441eddfaeb5bdef",
    "name": "Learn JavaScript For Loops",
    "difficulty": 0.26,
    "challengeSeed": "114614220",
    "description": [
      "Let's learn more about the loops that make virtually all programs possible - the \"For Loop\" and \"While Loop\". First, we'll learn the For Loop.",
      "Go to <a href='http://www.codecademy.com/courses/javascript-beginner-en-NhsaT/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-NhsaT/0/1web</a> and complete both the both For and While loop section.",
      "Be sure to also complete this section: <a href='http://www.codecademy.com/courses/javascript-beginner-en-XEDZA/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-XEDZA/0/1</a>."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7132d8c441eddfaeb5bdef",
    "name": "Learn JavaScript While Loops",
    "difficulty": 0.27,
    "challengeSeed": "114612889",
    "description": [
      "Go to <a href='http://www.codecademy.com/courses/javascript-beginner-en-ASGIv/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-ASGIv/0/1</a> and complete the section.",
      "Be sure to also complete this section: <a href='http://www.codecademy.com/courses/javascript-beginner-en-mrTNH-6VIZ9/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-mrTNH-6VIZ9/0/1</a>."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7133d8c441eddfaeb5bdef",
    "name": "Learn Control Flow",
    "difficulty": 0.28,
    "challengeSeed": "114612888",
    "description": [
      "Much of human reasoning can be broken down into what we call Boolean Logic. Lucky for us, computers can think the same way! Let's learn how to instruct our computers by writing \"If Statements\" and \"Else Statements\".",
      "We'll also learn some advanced \"Control Flow\" principals, such as ways we can exit loops early.",
      "Go to <a href='http://www.codecademy.com/courses/javascript-beginner-en-qDwp0/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-qDwp0/0/1</a> and complete the section.",
      "Be sure to also complete this section: <a href='http://www.codecademy.com/courses/javascript-beginner-en-ZA2rb/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-ZA2rb/0/1</a>."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7134d8c441eddfaeb5bdef",
    "name": "Build a Contact List",
    "difficulty": 0.29,
    "challengeSeed": "114612887",
    "description": [
      "Up to this point, you've been working mostly with strings and numbers. Now we're going to learn more complicated data structures, like \"Arrays\" and \"Objects\".",
      "Go to <a href='http://www.codecademy.com/courses/javascript-beginner-en-9Sgpi/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-9Sgpi/0/1</a> and complete the section.",
      "Be sure to also complete this section: <a href='http://www.codecademy.com/courses/javascript-beginner-en-3bmfN/0/1' target='_blank'>http://www.codecademy.com/courses/javascript-beginner-en-3bmfN/0/1</a>."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7135d8c441eddfaeb5bdef",
    "name": "Build an Address Book",
    "difficulty": 0.30,
    "challengeSeed": "114612885",
    "description": [
      "Let's learn more about objects.",
      "Go to <a href='http://www.codecademy.com/courses/spencer-sandbox/0/1' target='_blank'>http://www.codecademy.com/courses/spencer-sandbox/0/1</a> and complete the section.",
      "Be sure to also complete this section: <a href='http://www.codecademy.com/courses/building-an-address-book/0/1?curriculum_id=506324b3a7dffd00020bf661' target='_blank'>http://www.codecademy.com/courses/building-an-address-book/0/1?curriculum_id=506324b3a7dffd00020bf661</a>."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7136d8c441eddfaeb5bdef",
    "name": "Build a Cash Register",
    "difficulty": 0.31,
    "challengeSeed": "114612882",
    "description": [
      "In this final Codecademy section, we'll learn even more about JavaScript objects.",
      "Go to <a href='http://www.codecademy.com/courses/objects-ii/0/1' target='_blank'>http://www.codecademy.com/courses/objects-ii/0/1</a> and complete this section.",
      "Be sure to also complete the final section: <a href='http://www.codecademy.com/courses/close-the-super-makert/0/1' target='_blank'>http://www.codecademy.com/courses/close-the-super-makert/0/1</a>."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7118d8c441eddfaeb5bdef",
    "name": "Discover Chrome's DevTools",
    "difficulty": 0.32,
    "challengeSeed": "110752743",
    "description": [
      "It's time to learn the most powerful tool your browser has - the Development Tools!",
      "If you aren't already using Chrome, you'll want to download it here: <a href='http://www.google.com/chrome/' target='_blank'>http://www.google.com/chrome/</a>. While it's true that Firefox has a tool called Firebug that is very similar to Chrome's DevTools, we will use Chrome for this challenge.",
      "Note that this course, jointly produced by Google and Code School, is technologically impressive, but occasionally buggy. If you encounter a bug, just ignore it and keep going.",
      "Go to <a href='http://discover-devtools.codeschool.com' target='_blank'>http://discover-devtools.codeschool.com</a> and complete this short course."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7138d8c441eddfaeb5bdef",
    "name": "Learn Regular Expressions",
    "difficulty": 0.33,
    "challengeSeed": "112547802",
    "description": [
      "You can use a Regular Expression, or \"Regex\", to select specific types of characters in text.",
      "Check out <a href='http://www.regexr.com' target='_blank'>http://www.regexr.com</a>. It's a Regular Expression Sandbox.",
      "Now go to <a href='http://www.regexone.com' target='_blank'>http://www.regexone.com</a> and complete the tutorial and exercises 1 - 6.",
      "Note that you can click \"continue\" to move on to the next step as soon as all the tasks have green check marks beside them. You can often do this just by using the wildcard \"dot\" operator, but try to use the techniques that each lesson recommends."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7154d8c441eddfaeb5bdef",
    "name": "Get Started with Angular.js",
    "difficulty": 0.34,
    "challengeSeed": "114684726",
    "description": [
      "Code School has a short, free Angular.js course. This will give us a quick tour of Angular.js's mechanics and features.",
      "In this course, we'll build a virtual shop entirely in Angular.js.",
      "Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1</a> and complete the section."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7155d8c441eddfaeb5bdef",
    "name": "Apply Angular.js Directives",
    "difficulty": 0.35,
    "challengeSeed": "114684727",
    "description": [
      "Directives serve as markers in your HTML. When Angular.js compiles your HTML, it will can alter the behavior of DOM elements based on the directives you've used.",
      "Let's learn how these powerful directives work, and how to use them to make your web apps more dynamic",
      "Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/1/video/1</a> and complete the section."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7156d8c441eddfaeb5bdef",
    "name": "Power Forms with Angular.js",
    "difficulty": 0.36,
    "challengeSeed": "114684729",
    "description": [
      "One area where Angular.js really shines is its powerful web forms.",
      "Learn how to create reactive Angular.js forms, including real-time form validation.",
      "Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/3/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/3/section/1/video/1</a> and complete the section."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7157d8c441eddfaeb5bdef",
    "name": "Customize Angular.js Directives",
    "difficulty": 0.37,
    "challengeSeed": "114685062",
    "description": [
      "Now we'll learn how to modify existing Angular.js directives, and even build directives of your own.",
      "Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/4/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/4/section/1/video/1</a> and complete the section."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7158d8c441eddfaeb5bdef",
    "name": "Create Angular.js Services",
    "difficulty": 0.38,
    "challengeSeed": "114685060",
    "description": [
      "Services are functions that you can use and reuse throughout your Angular.js app to get things done.",
      "We'll learn how to use services in this final Code School Angular.js challenge.",
      "Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/5/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/5/section/1/video/1</a> and complete the section."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7153d8c441eddfaeb5bd0f",
    "name": "Manage Packages with NPM",
    "difficulty": 0.39,
    "challengeSeed": "126433450",
    "description": [
      "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
      "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
      "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
      "Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
      "Give your workspace a name.",
      "Choose Node.js in the selection area below the name field",
      "Click the Create button",
      "Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button",
      "Click the \"Start Editing\" button.",
      "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.",
      "Run this command: <code>sudo npm install how-to-npm -g</code>",
      "Now start this tutorial by running <code>how-to-npm</code>",
      "Note that you can resize the c9.io's windows by dragging their borders.",
      "Follow the directions and work through all of the the tutorial's steps before moving on."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7153d8c441eddfaeb5bdff",
    "name": "Start a Node.js Server",
    "difficulty": 0.40,
    "challengeSeed": "126411561",
    "description": [
      "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
      "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
      "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
      "Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
      "Give your workspace a name.",
      "Choose Node.js in the selection area below the name field",
      "Click the Create button",
      "Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button",
      "Click the \"Start Editing\" button.",
      "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.",
      "Run this command: <code>sudo npm install learnyounode -g</code>",
      "Now start this tutorial by running <code>learnyounode</code>",
      "Note that you can resize the c9.io's windows by dragging their borders.",
      "Follow the directions and work through all of the the tutorial's steps before moving on."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7153d8c441eddfaeb5bd1f",
    "name": "Build Web Apps with Express.js",
    "difficulty": 0.41,
    "challengeSeed": "126411559",
    "description": [
      "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
      "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
      "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
      "Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
      "Give your workspace a name.",
      "Choose Node.js in the selection area below the name field",
      "Click the Create button",
      "Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button",
      "Click the \"Start Editing\" button.",
      "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.",
      "Run this command: <code>git clone http://github.com/reddock/fcc_express && chmod 744 fcc_express/setup.sh && fcc_express/setup.sh && source ~/.profile</code>",
      "Now start this tutorial by running <code>expressworks</code>",
      "Note that you can resize the c9.io's windows by dragging their borders.",
      "Follow the directions and work through all of the the tutorial's steps before moving on."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7140d8c441eddfaeb5bdef",
    "name": "Manage Source Code with Git",
    "difficulty": 0.43,
    "challengeSeed": "114635309",
    "description": [
      "Version Control Systems like Git ensure that, no matter how you experiment with your code, you can always roll back your app to a stable previous state.",
      "Git is also a great way to share and contribute to open source software.",
      "Go to <a href='https://www.codeschool.com/courses/try-git' target='_blank'>https://www.codeschool.com/courses/try-git</a> and complete this short interactive course."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7139d8c441eddfaeb5bdef",
    "name": "Pair Program on Bonfires",
    "difficulty": 0.44,
    "challengeSeed": "119657641",
    "description": [
      "OK, we're finally ready to start pair programming!",
      "Pair Programming is where two people code together on the same computer. It is an efficient way to collaborate, and widely practiced at software companies. Pair Programming is one of the core concepts of \"Agile\" Software Development, which you will hear more about later.",
      "Many people use Skype or Google Hangouts to pair program, but if you talk with professional software engineers, they will tell you that it's not really pair programming unless both people have the ability to use the keyboard and mouse.",
      "The most popular tool for pair programming is Screen Hero. You can download Screen Hero for <a href='http://links.screenhero.com/e/c/eyJlbWFpbF9pZCI6Ik1qQTNNem9XQkNJQ1pBQUNjd0FYQVZrVEdnRkxNamtfX0JWZEdGVEpSZkVCWlRwbFpXRTBNamM0WVMxaE56SmlMVEV4WlRRdE9HUXpZUzFpWXpVNE1HRTJNalkxTldNNk1UUTJNVEEyQUE9PSIsInBvc2l0aW9uIjowLCJocmVmIjoiaHR0cDovL2RsLnNjcmVlbmhlcm8uY29tL3NtYXJ0ZG93bmxvYWQvZklYQU1UUUJBTEtQQkhQTC9TY3JlZW5oZXJvLnppcD9zb3VyY2U9d2ViIn0=' target='_blank'>Mac</a> or <a href='http://links.screenhero.com/e/c/eyJlbWFpbF9pZCI6Ik1qQTNNem9XQkNJQ1pBQUNjd0FYQVZrVEdnRkxNamtfX0JWZEdGVEpSZkVCWlRwbFpXRTBNamM0WVMxaE56SmlMVEV4WlRRdE9HUXpZUzFpWXpVNE1HRTJNalkxTldNNk1UUTJNVEEyQUE9PSIsInBvc2l0aW9uIjoxLCJocmVmIjoiaHR0cDovL2RsLnNjcmVlbmhlcm8uY29tL3NtYXJ0ZG93bmxvYWQvZklYQU1UUUJBTEtQQkhQTC9TY3JlZW5oZXJvLXNldHVwLmV4ZSJ9' target='_blank'>Windows</a>. Create your new user account from within the app.",
      "We have a special chat room for people ready to pair program. Go to our Slack chatroom and navigate to the #letspair channel and type \"Hello Pair Programmers!\"",
      "If someone is available, they will be your \"pair\" - the person you pair programming with.",
      "If no one gets back to you in the first few minutes, don't worry. There will be lots of opportunities to pair program in the future.",
      "If someone does get back to you, private message them and ask for the email address they used to register Screen Hero.",
      "Add them as a new contact in Screen Hero, then click the monitor-looking button to attempt to share your screen with them.",
      "Once the Screen Hero session starts, your screen's margins will glow orange. You are now sharing your screen.",
      "Your pair will have their own cursor, and will be able to type text on his or her and keyboard.",
      "Now it's time to tackle our Bonfires.",
      "Go to <a href='http://freecodecamp.com/bonfires' target='_blank'>http://freecodecamp.com/bonfires</a> and start working through our Bonfire challenges.",
      "Once you you finish pair programming, end the session in Screen Hero session.",
      "Congratulations! You have completed your first pair programming session.",
      "Pair program as much as possible with different campers until you've completed all the Bonfire challenges. This is a big time investment, but the JavaScript practice you get will be well worth it!",
      "Mark this challenge as complete and move on to the Bonfires."
    ],
    "challengeType": 2,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfbeb5bd1f",
    "name": "Get Set for Ziplines",
    "difficulty": 1.00,
    "challengeSeed": "125658022",
    "description": [
      "Now you're ready to start our Zipline challenges. These front-end development challenges will give you many opportunities to apply the HTML, CSS, jQuery and JavaScript you've learned to build static (database-less) applications.",
      "For many of these challenges, you will be using JSON data from external API endpoints, such as Twitch.tv and Twitter. Note that you don't need to have a database to use these data.",
      "The easiest way to manipulate these data is with <a href='http://api.jquery.com/jquery.getjson/' target='_blank'>jQuery $.getJSON()</a>.",
      "Whatever you do, don't get discouraged! Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck'>RSAP</a> if you get stuck.",
      "We'll build these challenges using CodePen, a popular tool for creating, sharing, and discovering static web applications.",
      "Go to <a href='http://codepen.io' target='_blank'>http://codepen.io</a> and create an account.",
      "Click your user image in the top right corner, then click the \"New pen\" button that drops down.",
      "Drag the windows around and press the buttons in the lower-right hand corner to change the orientation to suit your preference.",
      "Click the gear next to CSS. Then in the \"External CSS File or Another Pen\" text field, type \"bootstrap\" and scroll down until you see the latest version of Bootstrap. Click it.",
      "Verify that bootstrap is active by adding the following code to your HTML: <code>&lt;h1 class='text-primary'&gt;Hello CodePen!&lt;/h1&gt;</code>. The text's color should be Bootstrap blue.",
      "Click the gear next the JavaScript. Click the \"Latest version of...\" select box and choose jQuery.",
      "Now add the following code to your JavaScript: <code>$(document).ready(function() { $('.text-primary').text('Hi CodePen!') });</code>. Click the \"Save\" button at the top. Your \"Hello CodePen!\" should change to \"Hi CodePen!\". This means that jQuery is working.",
      "Now you're ready for your first Zipline. 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."
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfaeb5bd1f",
    "name": "Zipline: Use the Twitch.tv JSON API",
    "difficulty": 1.01,
    "challengeSeed": "126411564",
    "description": [
      "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/GJKRxZ' target='_blank'>http://codepen.io/GeoffStorbeck/full/GJKRxZ</a>.",
      "<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
      "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
      "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
      "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
      "<span class='text-info'>User Story:</span> As a user, I can see whether Free Code Camp is currently streaming on Twitch.tv.",
      "<span class='text-info'>User Story:</span> As a user, I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
      "<span class='text-info'>User Story:</span> As a user, if Free Code Camp is streaming, I can see additional details about what they are streaming.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can search through the streams listed.",
      "<span class='text-info'>Hint:</span> Here's an example call to Twitch.tv's JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
      "<span class='text-info'>Hint:</span> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
      "<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]</code>",
      "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.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfaeb5bd13",
    "name": "Zipline: Build a Random Quote Machine",
    "difficulty": 1.02,
    "challengeSeed": "126415122",
    "description": [
      "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/AdventureBear/full/vEoVMw' target='_blank'>http://codepen.io/AdventureBear/full/vEoVMw</a>.",
      "<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
      "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
      "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
      "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
      "<span class='text-info'>User Story:</span> As a user, I can click a button to show me a new random quote.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can press a button to tweet out a quote.",
      "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.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfaeb5bd10",
    "name": "Zipline: Show the Local Weather",
    "difficulty": 1.03,
    "challengeSeed": "126415127",
    "description": [
      "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/AdventureBear/full/yNBJRj' target='_blank'>http://codepen.io/AdventureBear/full/yNBJRj</a>.",
      "<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
      "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
      "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
      "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
      "<span class='text-info'>User Story:</span> As a user, I can see the weather in my current location.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can see an icon depending on the temperature..",
      "<span class='text-info'>Bonus User Story:</span> As a user, I see a different background image depending on the temperature (e.g. snowy mountain, hot desert).",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can push a button to toggle between Fahrenheit and Celsius.",
      "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.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfaeb5bd18",
    "name": "Zipline: Stylize Stories on Camper News",
    "difficulty": 1.04,
    "challengeSeed": "126415129",
    "description": [
      "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/Wveezv' target='_blank'>http://codepen.io/GeoffStorbeck/full/Wveezv</a>.",
      "<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
      "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
      "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
      "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
      "<span class='text-info'>User Story:</span> As a user, I can browse recent posts from Camper News.",
      "<span class='text-info'>User Story:</span> As a user, I can click on a post to be taken to the story's original URL.",
      "<span class='text-info'>User Story:</span> As a user, I can click a link to go directly to the post's discussion page.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.",
      "<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/stories/hotStories</code>.",
      "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.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfaeb5bd19",
    "name": "Zipline: Wikipedia Viewer",
    "difficulty": 1.05,
    "challengeSeed": "126415131",
    "description": [
      "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/MwgQea' target='_blank'>http://codepen.io/GeoffStorbeck/full/MwgQea</a>.",
      "<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
      "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
      "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
      "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
      "<span class='text-info'>User Story:</span> As a user, I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
      "<span class='text-info'>Bonus User Story:</span>As a user, I can click a button to see a random Wikipedia entry.",
      "<span class='text-info'>Bonus User Story:</span>As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.",
      "<span class='text-info'>Hint:</span> Here's an entry on using Wikipedia's API: <code>http://www.mediawiki.org/wiki/API:Main_page</code>.",
      "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.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfaeb5bd0f",
    "name": "Zipline: Build a Pomodoro Clock",
    "difficulty": 1.06,
    "challengeSeed": "126411567",
    "description": [
      "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/RPbGxZ/' target='_blank'>http://codepen.io/GeoffStorbeck/full/RPbGxZ/</a>.",
      "<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
      "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
      "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
      "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
      "<span class='text-info'>User Story:</span> As a user, I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can reset the clock for my next pomodoro.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can customize the length of each pomodoro.",
      "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.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfaeb5bd17",
    "name": "Zipline: Build a JavaScript Calculator",
    "difficulty": 1.07,
    "challengeSeed": "126411565",
    "description": [
      "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/zxgaqw' target='_blank'>http://codepen.io/GeoffStorbeck/full/zxgaqw</a>.",
      "<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
      "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
      "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
      "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
      "<span class='text-info'>User Story:</span> As a user, I can add, subtract, multiply and divide two numbers.",
      "<span class='text-info'>Bonus User Story:</span> I can clear the input field with a clear button.",
      "<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button, and the calculator will tell me the correct output.",
      "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.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c442eddfaeb5bd1c",
    "name": "Zipline: Build a Tic Tac Toe Game",
    "difficulty": 1.08,
    "challengeSeed": "126415123",
    "description": [
      "<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/alex-dixon/full/JogOpQ/' target='_blank'>http://codepen.io/alex-dixon/full/JogOpQ/</a>.",
      "<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
      "<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
      "<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
      "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
      "<span class='text-info'>User Story:</span> As a user, I can play a game of Tic Tac Toe with the computer.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can never actually win against the computer - at best I can tie.",
      "<span class='text-info'>Bonus User Story:</span> As a user, my game will reset as soon as it's over so I can play again.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can choose whether I want to play as X or O.",
      "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.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 3,
    "tests": []
  },
  {
    "_id": "bd7158d8c443eddfaeb5bcef",
    "name": "Get Set for Basejumps",
    "difficulty": 2.00,
    "challengeSeed": "126433451",
    "description": [
      "<span class='text-info'>Objective:</span> Get the MEAN stack running on Cloud 9, push your code to GitHub, and deploy it to Heroku.",
      "We'll build our Basejumps on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
      "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
      "Now let's get your development environment ready for a new Angular-Fullstack application provided by Yeoman.",
      "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
      "Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
      "Give your workspace a name.",
      "Choose Node.js in the selection area below the name field.",
      "Click the Create button.",
      "Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button.",
      "Click the \"Start Editing\" button.",
      "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.",
      "Never run this command on your local machine. But in your Cloud 9 terminal window, run: <code>rm -rf * && echo \"export NODE_PATH=$NODE_PATH:/home/ubuntu/.nvm/v0.10.35/lib/node_modules\" >> ~/.bashrc && source ~/.bashrc && npm install -g yo grunt grunt-cli generator-angular-fullstack && yo angular-fullstack</code>",
      "Yeoman will prompt you to answer some questions. Answer them like this:",
      "What would you like to write scripts with? <span class='text-success'>JavaScript</span>",
      "What would you like to write markup with? <span class='text-success'>HTML</span>",
      "What would you like to write stylesheets with? <span class='text-success'>CSS</span>",
      "What Angular router would you like to use? <span class='text-success'>ngRoute</span>",
      "Would you like to include Bootstrap? <span class='text-success'>Yes</span>",
      "Would you like to include UI Bootstrap? <span class='text-success'>Yes</span>",
      "Would you like to use MongoDB with Mongoose for data modeling? <span class='text-success'>Yes</span>",
      "Would you scaffold out an authentication boilerplate? <span class='text-success'>Yes</span>",
      "Would you like to include additional oAuth strategies? <span class='text-success'>Twitter</span>",
      "Would you like to use socket.io? <span class='text-success'>No</span>",
      "May bower anonymously report usage statistics to improve the tool over time? (Y/n) <span class='text-success'>Y</span>",
      "You may get an error similar to <code> ERR! EEXIST, open ‘/home/ubuntu/.npm</code>. This is caused when Cloud9 runs out of memory and kills an install. If you get this, simply re-run this process with the command <code>yo angular-fullstack</code>. You will then be asked a few questions regarding the re-install. Answer them as follows:",
      "Existing .yo-rc configuration found, would you like to use it? (Y/n) <span class='text-success'>Y</span>",
      "Overwrite client/favicon.ico? (Ynaxdh) <span class='text-success'>Y</span>",
      "To finish the installation run the commands: <code>bower install && npm install</code>",
      "To start MongoDB, run the following commands in your terminal: <code>mkdir data && echo 'mongod --bind_ip=$IP --dbpath=data --nojournal --rest \"$@\"' > mongod && chmod a+x mongod && ./mongod</code>",
      "You will want to open up a new terminal to work from by clicking on the + icon and select New Terminal",
      "Start the application by running the following command in your new terminal window: <code>grunt serve</code>",
      "Wait for the following message to appear: <code>xdg-open: no method available for opening 'http://localhost:8080' </code>. Now you can open the internal Cloud9 browser. To launch the browser select Preview in the toolbar then select the dropdown option Preview Running Application.",
      "Turn the folder in which your application is running into a Git repository by running the following commands: <code>git init && git add . && git commit -am 'initial commit'</code>.",
      "Create a new Github repository by signing in to <a href='http://github.com' target='_blank'>http://github.com</a> and clicking on the + button next to your username in the upper-right hand side of your screen, then selecting \"New Repository\".",
      "Enter a project name, then click the \"Create Repository\" button.",
      "Find the \"...or push an existing repository from the command line\" section and click the Copy to Clipboard button beside it.",
      "Paste the commands from your clipboard into the Cloud9 terminal prompt. This will push your changes to your repository on Cloud 9 up to Github.",
      "Check back on your Github profile to verify the changes were successfully pushed up to Github.",
      "Now let's push your code to Heroku. If you don't already have a Heroku account, create one at <a href='http://heroku.com' target='_blank'>http://heroku.com</a>. You shouldn't be charged for anything, but you will need to add your credit card information to your Heroku before you will be able to use Heroku's free MongoLab add on.",
      "Before you publish to Heroku, you should free up as much memory as possible on Cloud9. In each of the Cloud9 terminal prompt tabs where MongoDB and Grunt are running, press the <code>control + c</code> hotkey to shut down these processes.",
      "Run the following command in a Cloud9 terminal prompt tab: <code>npm install grunt-contrib-imagemin --save-dev && npm install --save-dev && heroku login</code>. At this point, the terminal will prompt you to log in to Heroku from the command line.",
      "Now run <code>yo angular-fullstack:heroku</code>. You can choose a name for your Heroku project, or Heroku will create a random one for you. You can choose whether you want to deploy to servers the US or the EU.",
      "Set the config flag for your Heroku environment and add MongoLab for your MongoDB instance by running the following command: <code>cd ~/workspace/dist && heroku config:set NODE_ENV=production && heroku addons:add mongolab</code>.",
      "As you build your app, you should frequently commit changes to your codebase. Make sure you're in the <code>~/workspace</code> directory by running <code>cd ~/workspace</code>. Then you can this code to stage the changes to your changes and commit them: <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a short summary of the changes you made to your code, such as \"added a records controller and corresponding routes\".",
      "You can push these new commits to Github by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
      "Now you're ready to move on to your first Basejump. Click the \"I've completed this challenge\" button and enter the URLs for both your Github repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it."
    ],
    "challengeType": 4,
    "tests": []
  },
  {
    "_id": "bd7158d8c443eddfaeb5bdef",
    "name": "Basejump: Build a Voting App",
    "difficulty": 2.01,
    "challengeSeed": "123488494",
    "description": [
      "<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://voteplex.herokuapp.com/' target='_blank'>http://voteplex.herokuapp.com/</a> and deploy it to Heroku.",
      "Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
      "As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
      "You can push these new commits to Github by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
      "Here are the specific User Stories you should implement for this Basejump:",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can keep my polls and come back later to access them.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can share my polls with my friends.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can see the aggregate results of my polls.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can delete polls that I decide I don't want anymore.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can create a poll with any number of possible items.",
      "<span class='text-info'>Bonus User Story:</span> As an unauthenticated user, I can see everyone's polls, but I can't vote on anything.",
      "<span class='text-info'>Bonus User Story:</span> As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)",
      "<span class='text-info'>Bonus User Story:</span> As an authenticated user, if I don't like the options on a poll, I can create a new option.",
      "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your Github repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
      "If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 4,
    "tests": []
  },
  {
    "_id": "bd7158d8c443eddfaeb5bdff",
    "name": "Basejump: Build a Nightlife Coordination App",
    "difficulty": 2.02,
    "challengeSeed": "123488494",
    "description": [
      "<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://sociallife.herokuapp.com/' target='_blank'>http://sociallife.herokuapp.com/</a> and deploy it to Heroku.",
      "Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
      "As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
      "You can push these new commits to Github by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
      "Here are the specific User Stories you should implement for this Basejump:",
      "<span class='text-info'>User Story:</span> As an unauthenticated user, I can view all bars in my area.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can add myself to a bar to indicate I am going there tonight.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can remove myself from a bar if I no longer want to go there.",
      "<span class='text-info'>Bonus User Story:</span> As an unauthenticated user, when I login I should not have to search again.",
      "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your Github repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
      "If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 4,
    "tests": []
  },
  {
    "_id": "bd7158d8c443eddfaeb5bd0e",
    "name": "Basejump: Chart the Stock Market",
    "difficulty": 2.03,
    "challengeSeed": "123488494",
    "description": [
      "<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://stockjump.herokuapp.com/' target='_blank'>http://stockjump.herokuapp.com/</a> and deploy it to Heroku.",
      "Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
      "As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
      "You can push these new commits to Github by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
      "Here are the specific User Stories you should implement for this Basejump:",
      "<span class='text-info'>User Story:</span> As a user, I can view a graph displaying the recent trend lines for each added stock.",
      "<span class='text-info'>User Story:</span> As a user, I can add new stocks by their symbol name.",
      "<span class='text-info'>User Story:</span> As a user, I can remove stocks.",
      "<span class='text-info'>Bonus User Story:</span> As a user, I can see changes in real-time when any other user adds or removes a stock.",
      "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your Github repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
      "If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 4,
    "tests": []
  },
  {
    "_id": "bd7158d8c443eddfaeb5bd0f",
    "name": "Basejump: Manage a Book Trading Club",
    "difficulty": 2.04,
    "challengeSeed": "123488494",
    "description": [
      "<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://bookoutpost.herokuapp.com/' target='_blank'>http://bookoutpost.herokuapp.com/</a> and deploy it to Heroku.",
      "Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
      "As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
      "You can push these new commits to Github by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
      "Here are the specific User Stories you should implement for this Basejump:",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can view all books posted by every user.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can add a new book.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can update my settings to store my full name, city, and state.",
      "<span class='text-info'>Bonus User Story:</span> As an authenticated user, I can propose a trade and wait for the other user to accept the trade.",
      "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your Github repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
      "If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 4,
    "tests": []
  },
  {
    "_id": "bd7158d8c443eddfaeb5bdee",
    "name": "Basejump: Build a Pinterest Clone",
    "difficulty": 2.05,
    "challengeSeed": "123488494",
    "description": [
      "<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://linkterest.herokuapp.com/' target='_blank'>http://linkterest.herokuapp.com/</a> and deploy it to Heroku.",
      "Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
      "As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
      "You can push these new commits to Github by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
      "Here are the specific User Stories you should implement for this Basejump:",
      "<span class='text-info'>User Story:</span> As an unauthenticated user, I can login with Twitter.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can link to images.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can delete images that I've linked to.",
      "<span class='text-info'>User Story:</span> As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.",
      "<span class='text-info'>User Story:</span> As an unauthenticated user, I can browse other users' walls of images.",
      "<span class='text-info'>User Story:</span> As an unauthenticated user, I can see everyone's polls, but not be able to vote.",
      "<span class='text-info'>Bonus User Story:</span> As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)",
      "<span class='text-info'>Hint:</span> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> is a library that allows for Pinterest-style image grids.",
      "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your Github repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
      "If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
    ],
    "challengeType": 4,
    "tests": []
  }
]