diff --git a/app.js b/app.js
index 10e269fda9..165061db3d 100755
--- a/app.js
+++ b/app.js
@@ -335,6 +335,8 @@ app.get('/privacy', function(req, res) {
   res.redirect(301, '/field-guide/what-is-the-free-code-camp-privacy-policy?');
 });
 
+app.get('/submit-cat-photo', resourcesController.catPhotoSubmit);
+
 app.get('/api/slack', function(req, res) {
   if (req.user) {
     if (req.user.email) {
diff --git a/controllers/resources.js b/controllers/resources.js
index 1b9e2570e4..6f2000457a 100644
--- a/controllers/resources.js
+++ b/controllers/resources.js
@@ -157,6 +157,10 @@ module.exports = {
     }
   },
 
+  catPhotoSubmit: function catPhotoSubmit(req, res) {
+    res.send('Success! You have submitted your cat photo.')
+  },
+
   nonprofits: function nonprofits(req, res) {
     res.render('resources/nonprofits', {
       title: 'A guide to our Nonprofit Projects'
diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json
index fbfaaf0d66..bd9604b9f1 100644
--- a/seed_data/coursewares.json
+++ b/seed_data/coursewares.json
@@ -977,31 +977,51 @@
     "name": "Turn an Image into a Link",
     "difficulty": 0.035,
     "description": [
-      "Wrap the gray cat's image with an <code>anchor tag</code> that leads nowhere.",
+      "Wrap the your cat's image element inside an anchor element that is a dead link.",
       "You can make elements into links by wrapping them in an <code>anchor tag</code>.",
       "Check out the example snow-colored cat's photo. When you hover over it with your cursor, you'll see the finger pointer you usually see when you hover over a link. The photo is now a link.",
       "Wrap your gray cat's photo in an <code>anchor tag</code>",
       "Use the hash symbol as the <code>anchor tag</code>'s <code>href</code>."
     ],
     "tests": [
-      "expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(2);"
+      "assert($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length > 1, 'Your image element should be wrapped in 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>",
-      "  .narrow-image {",
-      "    width: 200px;",
+      "  .red-text {",
+      "    color: red;",
+      "  }",
+      "",
+      "  h2 {",
+      "    font-family: Lobster, Monospace;",
+      "  }",
+      "",
+      "  p {",
+      "    font-size: 16px;",
+      "    font-family: Monospace;",
       "  }",
       "",
       "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
+      "    border-color: green;",
       "    border-width: 10px;",
+      "    border-style: solid;",
       "    border-radius: 50%;",
       "  }",
+      "",
+      "  .smaller-image {",
+      "    width: 100px;",
+      "  }",
       "</style>",
-      "<h2>cat photo app</h2>",
-      "<a href=\"#\"><img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutesnowcat\"/></a>",
-      "<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>"
+      "",
+      "<h2 class='red-text'>Cat Photo App</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'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>"
     ],
     "challengeType": 0
   },
@@ -1010,13 +1030,692 @@
     "name": "Add Alt Text to an image",
     "difficulty": 0.036,
     "description": [
-      "Add the <code>alt text</code> \"a photo of a cute gray cat\" to our cat photo",
+      "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>!",
-      "You can add alt text right in the image tag, like we've done here with the \"cute white cat\" image."
+      "<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": [
-      "expect($('img').filter(function(){ return /cat/gi.test(this.alt) }).length).to.eql(2);"
+      "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'>Cat Photo App</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'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>"
+    ],
+    "challengeType": 0
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08827",
+    "name": "Create a Bulleted Unordered List",
+    "difficulty" : 0.036,
+    "description": [
+      "Replace the paragraph elements with an unordered list of things that cats love.",
+      ""
+    ],
+    "tests": [
+      "assert($('ul').length > 0, 'You should have an <code>ol</code> element on your webpage.')",
+      "assert($('li').length > 2, 'You should have three or more <code>li</code> elements on within 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'>Cat Photo App</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'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_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.",
+      ""
+    ],
+    "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'>Cat Photo App</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>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08829",
+    "name": "Create a Text Field",
+    "difficulty" : 0.038,
+    "description": [
+      "Create a text field under your lists.",
+      ""
+    ],
+    "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'>Cat Photo App</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>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_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.",
+      ""
+    ],
+    "tests": [
+      "assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of \"type a cat photo URL here\".')"
+    ],
+    "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'>Cat Photo App</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'>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_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.",
+      ""
+    ],
+    "tests": [
+      "assert($('form').length > 0, 'Your webpage should have form element that wraps its 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'>Cat Photo App</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='enter cat photo URL'>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedd08830",
+    "name": "Add a Submit Button to a Form",
+    "difficulty" : 0.041,
+    "description": [
+      "Add a submit button to your form field.",
+      ""
+    ],
+    "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'>Cat Photo App</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='enter cat photo URL'>",
+      "</form>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedc08830",
+    "name": "Use HTML5 to Make a Field Required",
+    "difficulty" : 0.042,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "assert($('input').prop('required'), 'Your text field have the property of being required.')"
+    ],
+    "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'>Cat Photo App</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='enter cat photo URL'>",
+      "  <button type='submit'>Submit</button>",
+      "</form>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08831",
+    "name": "Use HTML5 to Specify an Input Type",
+    "difficulty" : 0.043,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08832",
+    "name": "Create a Text Area",
+    "difficulty" : 0.044,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08834",
+    "name": "Create a Set of Radio Buttons",
+    "difficulty" : 0.045,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08835",
+    "name": "Create a Set of Checkboxes",
+    "difficulty" : 0.046,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08836",
+    "name": "Create a HTML Form",
+    "difficulty" : 0.047,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08841",
+    "name": "Change the background of element",
+    "difficulty" : 0.048,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08842",
+    "name": "Make an element translucent",
+    "difficulty" : 0.049,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08844",
+    "name": "Add a Drop Shadow",
+    "difficulty" : 0.050,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08863",
+    "name": "Add a Gradient to a Button",
+    "difficulty" : 0.051,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08864",
+    "name": "Adjust the Line Height of Text",
+    "difficulty" : 0.052,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+
+
+
+  {
+    "_id": "bad87fee1348bd9acde08812",
+    "name": "Use Bootstrap for Responsive Images",
+    "difficulty": 0.999,
+    "description": [
+      "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": [
+      "expect($('img')).to.have.class('img-responsive');"
     ],
     "challengeSeed": [
       "<style>",
@@ -1032,15 +1731,527 @@
       "  }",
       "</style>",
       "<h2>cat photo app</h2>",
-      "<a href=\"#\"><img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutesnowcat\" alt=\"a photo of a cute white cat\"/></a>",
-      "<a href=\"#\"><img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/></a>"
+      "<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<a href=\"http://www.google.com\">This is a link to Google</a>",
+      "<br/>"
     ],
     "challengeType": 0
   },
+  {
+    "_id": "bad87fee1348bd8acde08812",
+    "name": "Center Text with Bootstrap",
+    "difficulty": 0.999,
+    "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 seperating each of them with a space, like this: <code>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>."
+    ],
+    "tests": [
+      "expect($('h2')).to.have.class('text-center');"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2>cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id": "bad87fee1348cd8acde08812",
+    "name": "Create a Button",
+    "difficulty": 0.999,
+    "description": [
+      "Create a button with the text \"Delete\" using the HTML <code>button</code> element.",
+      "HTML has special elements that function like links, but look like buttons. Let's creating a default HTML button."
+    ],
+    "tests": [
+      "expect((/delete/gi).test($('button').text())).to.be.true;"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2 class=\"text-center\">cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<button href=\"#\">Like</button>",
+      "<br/>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id": "bad87fee1348cd8acdf08812",
+    "name": "Create a Bootstrap Button",
+    "difficulty": 0.999,
+    "description": [
+      "Apply the Bootstrap's <code>btn</code> class to both of your buttons.",
+      "Bootstrap has its own button styles, which look much better than the plain HTML ones."
+    ],
+    "tests": [
+      "expect($('.btn').length).to.eql(2);"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2 class=\"text-center\">cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<button href=\"#\">Like</button>",
+      "<br/>",
+      "<button href=\"#\">Delete</button>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id": "bad87fee1348cd8acef08812",
+    "name": "Create a Block Element Bootstrap Button",
+    "difficulty": 0.999,
+    "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": [
+      "expect($('.btn-block').length).to.eql(2);"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2 class=\"text-center\">cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<button class=\"btn\" href=\"#\">Like</button>",
+      "<br/>",
+      "<button class=\"btn\" href=\"#\">Delete</button>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id": "bad87fee1348cd8acef08811",
+    "name": "Color a Bootstrap Button with Button Primary",
+    "difficulty": 0.999,
+    "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": [
+      "expect($('.btn-block').length).to.eql(2);"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2 class=\"text-center\">cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<button class=\"btn btn-block\" href=\"#\">Like</button>",
+      "<br/>",
+      "<button class=\"btn btn-block\" href=\"#\">Delete</button>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id": "bad87fee1348cd8acef08813",
+    "name": "Color a Bootstrap Button with Button Info",
+    "difficulty": 0.999,
+    "description": [
+      "Add Bootstrap's <code>btn-primary</code> class to both of your buttons.",
+      "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": [
+      "expect($('.btn-primary').length).to.eql(2);"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2 class=\"text-center\">cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<button class=\"btn btn-block\" href=\"#\">Like</button>",
+      "<br/>",
+      "<button class=\"btn btn-block\" href=\"#\">Delete</button>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id": "bad87fee1348ce8acef08814",
+    "name": "Warn your Users of a Dangerous Action with the Bootstrap Button Danger Class",
+    "difficulty": 0.999,
+    "description": [
+      "Change the \"Delete\" button from <code>btn-primary</code> to <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": [
+      "expect($('.btn-danger').length).to.eql(1);"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2 class=\"text-center\">cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
+      "<br/>",
+      "<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id": "bad88fee1348ce8acef08815",
+    "name": "Use the Bootstrap Grid to Put Two Elements Side By Side",
+    "difficulty": 0.999,
+    "description": [
+      "Put the \"Like\" 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=\"row\"&#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</element</code>, and the buttons themselves can be <code>nested</code> within it."
+    ],
+    "tests": [
+      "expect($('.row').length).to.eql(2);",
+      "expect($('.col-xs-12').length).to.eql(4);"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2 class=\"text-center\">cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<div class=\"row\">",
+      "  <div class=\"col-xs-6\">",
+      "    <button class=\"btn btn-block btn-success\" href=\"#\">Back</button>",
+      "  </div>",
+      "  <div class=\"col-xs-6\">",
+      "    <button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>",
+      "  </div>",
+      "</div>",
+      "<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
+      "<br/>",
+      "<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id": "bad89fee1348ce8acef08816",
+    "name": "Wrap Side By Side Elements in a Bootstrap Row",
+    "difficulty": 0.999,
+    "description": [
+      "Put the \"Like\" 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=\"row\"&#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</element</code>, and the buttons themselves can be <code>nested</code> within it."
+    ],
+    "tests": [
+      "expect($('.row').length).to.eql(2);",
+      "expect($('.col-xs-12').length).to.eql(4);"
+    ],
+    "challengeSeed": [
+      "<style>",
+      "  .thick-green-border {",
+      "    border-style: solid;",
+      "    border-color: #00ff00;",
+      "    border-width: 10px;",
+      "    border-radius: 50%;",
+      "  }",
+      "</style>",
+      "<h2 class=\"text-center\">cat photo app</h2>",
+      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
+      "<br/>",
+      "<div class=\"row\">",
+      "  <div class=\"col-xs-6\">",
+      "    <button class=\"btn btn-block btn-success\" href=\"#\">Back</button>",
+      "  </div>",
+      "  <div class=\"col-xs-6\">",
+      "    <button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>",
+      "  </div>",
+      "</div>",
+      "<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
+      "<br/>",
+      "<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
+    ],
+    "challengeType": 0
+  },
+  {
+    "_id" : "bad87fee1348bd9aedf08845",
+    "name": "Make a Navbar",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08847",
+    "name": "Add a Logo to a Navbar",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08848",
+    "name": "Make a Footer",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08849",
+    "name": "Use Icons as Links",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08850",
+    "name": "Add Hover Effects to Icons",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08851",
+    "name": "Add Depth to a Page with a Well",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08852",
+    "name": "Add an ID to a Button",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08853",
+    "name": "Fire a Modal by Clicking a Button",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08854",
+    "name": "Style a Modal with a Header",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08855",
+    "name": "Style a Modal with a Body",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08856",
+    "name": "Make a Modal Dismissable",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
+  {
+    "_id" : "bad87fee1348bd9aedf08857",
+    "name": "Create an Accordian Menu",
+    "difficulty" : 0.999,
+    "description": [
+      "",
+      ""
+    ],
+    "tests": [
+      "expect($('h1')).to.have.class('text-center');",
+      "expect($('h1')).to.have.text('hello world');"
+    ],
+    "challengeSeed": [
+      "<h1>hello world</h1>"
+    ],
+    "challengeType": 0,
+    "completionMessage": ""
+  },
+
   {
     "_id": "bad88fee1348bd9aedf08825",
     "name": "Adjusting the Padding of an Element",
-    "difficulty": 0.037,
+    "difficulty": 0.999,
     "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>.",
@@ -1091,7 +2302,7 @@
   {
     "_id": "bad87fee1348bd9aedf08822",
     "name": "Adjust the Margin of an Element",
-    "difficulty": 0.038,
+    "difficulty": 0.999,
     "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.",
@@ -1144,7 +2355,7 @@
   {
     "_id": "bad87fee1348bd9aedf08823",
     "name": "Add a Negative Margin to an Element",
-    "difficulty": 0.039,
+    "difficulty": 0.999,
     "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.",
@@ -1196,7 +2407,7 @@
   {
     "_id": "bad87fee1348bd9aedf08824",
     "name": "Add Different Padding to Each Side of an Element TEST",
-    "difficulty": 0.040,
+    "difficulty": 0.999,
     "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.",
@@ -1249,7 +2460,7 @@
   {
     "_id": "bad87fee1248bd9aedf08824",
     "name": "Add Different a Margin to Each Side of an Element TEST",
-    "difficulty": 0.041,
+    "difficulty": 0.999,
     "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.",
@@ -1302,7 +2513,7 @@
   {
     "_id": "bad87fee1348bd9aedf08826",
     "name": "Use Clockwise Notation to Specify an Element's Padding",
-    "difficulty": 0.042,
+    "difficulty": 0.999,
     "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>.",
@@ -1349,348 +2560,8 @@
     ],
     "challengeType": 0
   },
-  {
-    "_id": "bad87fee1348bd9acde08812",
-    "name": "Use Bootstrap for Responsive Images",
-    "difficulty": 0.043,
-    "description": [
-      "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": [
-      "expect($('img')).to.have.class('img-responsive');"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .narrow-image {",
-      "    width: 200px;",
-      "  }",
-      "",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2>cat photo app</h2>",
-      "<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<a href=\"http://www.google.com\">This is a link to Google</a>",
-      "<br/>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad87fee1348bd8acde08812",
-    "name": "Center Text with Bootstrap",
-    "difficulty": 0.044,
-    "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 seperating each of them with a space, like this: <code>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>."
-    ],
-    "tests": [
-      "expect($('h2')).to.have.class('text-center');"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2>cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad87fee1348cd8acde08812",
-    "name": "Create a Button",
-    "difficulty": 0.045,
-    "description": [
-      "Create a button with the text \"Delete\" using the HTML <code>button</code> element.",
-      "HTML has special elements that function like links, but look like buttons. Let's creating a default HTML button."
-    ],
-    "tests": [
-      "expect((/delete/gi).test($('button').text())).to.be.true;"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2 class=\"text-center\">cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<button href=\"#\">Like</button>",
-      "<br/>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad87fee1348cd8acdf08812",
-    "name": "Create a Bootstrap Button",
-    "difficulty": 0.046,
-    "description": [
-      "Apply the Bootstrap's <code>btn</code> class to both of your buttons.",
-      "Bootstrap has its own button styles, which look much better than the plain HTML ones."
-    ],
-    "tests": [
-      "expect($('.btn').length).to.eql(2);"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2 class=\"text-center\">cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<button href=\"#\">Like</button>",
-      "<br/>",
-      "<button href=\"#\">Delete</button>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad87fee1348cd8acef08812",
-    "name": "Create a Block Element Bootstrap Button",
-    "difficulty": 0.047,
-    "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": [
-      "expect($('.btn-block').length).to.eql(2);"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2 class=\"text-center\">cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<button class=\"btn\" href=\"#\">Like</button>",
-      "<br/>",
-      "<button class=\"btn\" href=\"#\">Delete</button>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad87fee1348cd8acef08811",
-    "name": "Color a Bootstrap Button with Button Primary",
-    "difficulty": 0.048,
-    "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": [
-      "expect($('.btn-block').length).to.eql(2);"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2 class=\"text-center\">cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<button class=\"btn btn-block\" href=\"#\">Like</button>",
-      "<br/>",
-      "<button class=\"btn btn-block\" href=\"#\">Delete</button>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad87fee1348cd8acef08813",
-    "name": "Color a Bootstrap Button with Button Info",
-    "difficulty": 0.049,
-    "description": [
-      "Add Bootstrap's <code>btn-primary</code> class to both of your buttons.",
-      "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": [
-      "expect($('.btn-primary').length).to.eql(2);"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2 class=\"text-center\">cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<button class=\"btn btn-block\" href=\"#\">Like</button>",
-      "<br/>",
-      "<button class=\"btn btn-block\" href=\"#\">Delete</button>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad87fee1348ce8acef08814",
-    "name": "Warn your Users of a Dangerous Action with the Bootstrap Button Danger Class",
-    "difficulty": 0.050,
-    "description": [
-      "Change the \"Delete\" button from <code>btn-primary</code> to <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": [
-      "expect($('.btn-danger').length).to.eql(1);"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2 class=\"text-center\">cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
-      "<br/>",
-      "<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad88fee1348ce8acef08815",
-    "name": "Use the Bootstrap Grid to Put Two Elements Side By Side",
-    "difficulty": 0.051,
-    "description": [
-      "Put the \"Like\" 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=\"row\"&#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</element</code>, and the buttons themselves can be <code>nested</code> within it."
-    ],
-    "tests": [
-      "expect($('.row').length).to.eql(2);",
-      "expect($('.col-xs-12').length).to.eql(4);"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2 class=\"text-center\">cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<div class=\"row\">",
-      "  <div class=\"col-xs-6\">",
-      "    <button class=\"btn btn-block btn-success\" href=\"#\">Back</button>",
-      "  </div>",
-      "  <div class=\"col-xs-6\">",
-      "    <button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>",
-      "  </div>",
-      "</div>",
-      "<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
-      "<br/>",
-      "<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad89fee1348ce8acef08816",
-    "name": "Wrap Side By Side Elements in a Bootstrap Row",
-    "difficulty": 0.052,
-    "description": [
-      "Put the \"Like\" 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=\"row\"&#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</element</code>, and the buttons themselves can be <code>nested</code> within it."
-    ],
-    "tests": [
-      "expect($('.row').length).to.eql(2);",
-      "expect($('.col-xs-12').length).to.eql(4);"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .thick-green-border {",
-      "    border-style: solid;",
-      "    border-color: #00ff00;",
-      "    border-width: 10px;",
-      "    border-radius: 50%;",
-      "  }",
-      "</style>",
-      "<h2 class=\"text-center\">cat photo app</h2>",
-      "<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
-      "<br/>",
-      "<div class=\"row\">",
-      "  <div class=\"col-xs-6\">",
-      "    <button class=\"btn btn-block btn-success\" href=\"#\">Back</button>",
-      "  </div>",
-      "  <div class=\"col-xs-6\">",
-      "    <button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>",
-      "  </div>",
-      "</div>",
-      "<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
-      "<br/>",
-      "<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
-    ],
-    "challengeType": 0
-  },
-  {
-    "_id": "bad87fee1348bd9aedf08813",
-    "name": "Add Alt Text to an Image TEST",
-    "difficulty": 0.053,
-    "description": [
-      "Add the alt text \"A picture of a gray cat\" to the image.",
-      "<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": [
-      "expect((/cat/gi).test($('img').attr('alt')).to.be.true;"
-    ],
-    "challengeSeed": [
-      "<style>",
-      "  .red-text {",
-      "    color: #ff0000;",
-      "  }",
-      "</style>",
-      "<h1>hello world</h1>",
-      "<h2 class=\"red-text\">cat photo app</h2>",
-      "<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
-      "<img class=\"img-responsive\" src=\"http://bit.ly/cutegraycat\"/>"
-    ],
-    "challengeType": 0
-  },
+
+
   {
     "_id": "bd7123d8c441eddfaeb5bdef",
     "name": "Learn Basic Computer Science",