diff --git a/challenges/01-responsive-web-design/applied-accessibility.json b/challenges/01-responsive-web-design/applied-accessibility.json
index 87df848bf1..2424a1d4c0 100644
--- a/challenges/01-responsive-web-design/applied-accessibility.json
+++ b/challenges/01-responsive-web-design/applied-accessibility.json
@@ -1251,7 +1251,9 @@
             "assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json
index 123724e7e0..51da359bf0 100644
--- a/challenges/01-responsive-web-design/applied-visual-design.json
+++ b/challenges/01-responsive-web-design/applied-visual-design.json
@@ -98,7 +98,9 @@
             "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".fullCard {\\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -809,7 +811,9 @@
             "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'You should use the given CSS for the <code>box-shadow</code> value.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"#thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -1735,7 +1739,9 @@
             "assert(code.match(/margin:\\s*?auto;/g), 'The <code>div</code> should have a <code>margin</code> set to auto.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"div {background-color: blue; height: 100px; width: 100px; margin: auto;}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -2099,7 +2105,9 @@
             "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"nav {background-color: hsl(180, 80%, 25%);}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -2178,7 +2186,9 @@
             "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"<style> div{border-radius: 20px; width: 70%; height: 400px; margin: 50px auto; background: linear-gradient(35deg, #cff, #fcc);}</style><div></div>\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -2257,7 +2267,9 @@
             "assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be <code>black</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -2310,7 +2322,9 @@
             "assert(code.match(/background:\\s*?url\\(\\s*(\"|'|)https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png\\1\\s*\\)/gi), 'Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"body {background: url('https://i.imgur.com/MJAkxbh.png')}\""
+      ],
       "hints": [
         "Remember to wrap the address in quotes within the url() function."
       ],
@@ -2346,7 +2360,9 @@
             "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?}|#ball2\\s*?{\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?left:\\s*?65%;\\s*?}/gi), 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"#ball2 {left: 65%; transform: scale(1.5);}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -2408,7 +2424,7 @@
             "assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \"div:hover {transform: scale(1.1);}\""],
       "hints": [
         "Make sure to apply the CSS rule to the hover state of the div, using div:hover"
       ],
@@ -2463,7 +2479,9 @@
             "assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"#bottom {background-color: blue; transform: skewX(24deg);}\""
+      ],
       "hints": [
         "Notice that there is no space between the number and \"deg\" (-32deg) when declaring the degrees value."
       ],
@@ -2516,7 +2534,9 @@
             "assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"#top {background-color: red; transform: skewY(-10deg);}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -2582,7 +2602,9 @@
             "assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -2657,7 +2679,9 @@
             "assert(code.match(/\\.heart::before\\s*?{\\s*?content\\s*?:\\s*?(\"|')\\1\\s*?;/gi), 'The <code>content</code> of the <code>heart::before</code> selector should be an empty string.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \\\"\\\"; border-radius: 50%;}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -2873,7 +2897,9 @@
             "assert(code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-fill-mode\\s*?:\\s*?forwards\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-name\\s*?:\\s*?background-color\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-duration\\s*?:\\s*?500ms\\s*?;[\\s\\S]*}/gi), '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}\""
+      ],
       "hints": [],
       "challengeType": 0,
       "translations": {},
@@ -2940,7 +2966,9 @@
             "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0(px)?;\\s*?left:\\s*?-25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"@keyframes rainbow {0% {background-color: blue; top: 0px; left: 0px;} 50% {background-color: green; top: 50px; left: 25px;} 100% {background-color: yellow; top: 0px; left:-25px;}}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -3010,7 +3038,9 @@
             "assert(code.match(/@keyframes fade\\s*?{\\s*?50%\\s*?{\\s*?(?:left:\\s*?60%;\\s*?opacity:\\s*?0?\\.1;|opacity:\\s*?0?\\.1;\\s*?left:\\s*?60%;)/gi), 'The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"@keyframes fade {50% { left: 60%; opacity: 0.1;}}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -3249,7 +3279,9 @@
             "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}\""
+      ],
       "hints": [
         "Check the animation-name declared in the star-1 class to find the right @keyframes rule to change."
       ],
diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json
index 1556443aea..ec0bfec4f0 100644
--- a/challenges/01-responsive-web-design/basic-css.json
+++ b/challenges/01-responsive-web-design/basic-css.json
@@ -20,14 +20,11 @@
       "tests": [
         {
           "text": "Your <code>h2</code> element should be red.",
-          "testString":
-            "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
+          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
         },
         {
-          "text":
-            "Your <code>style</code> declaration should end with a <code>;</code> .",
-          "testString":
-            "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)|rgb\\(\\s*100%\\s*,\\s*0%\\s*,\\s*0%\\s*\\)|red|#ff0000|#f00|hsl\\(\\s*0\\s*,\\s*100%\\s*,\\s*50%\\s*\\))\\s*\\;(\\'|\")>\\s*CatPhotoApp\\s*<\\/h2>/),' Your <code>style</code> declaration should end with a <code>;</code> .');"
+          "text": "Your <code>style</code> declaration should end with a <code>;</code> .",
+          "testString": "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)|rgb\\(\\s*100%\\s*,\\s*0%\\s*,\\s*0%\\s*\\)|red|#ff0000|#f00|hsl\\(\\s*0\\s*,\\s*100%\\s*,\\s*50%\\s*\\))\\s*\\;(\\'|\")>\\s*CatPhotoApp\\s*<\\/h2>/),' Your <code>style</code> declaration should end with a <code>;</code> .');"
         }
       ],
       "challengeType": 0,
@@ -140,32 +137,24 @@
       ],
       "tests": [
         {
-          "text":
-            "Remove the style attribute from your <code>h2</code> element.",
-          "testString":
-            "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.');"
+          "text": "Remove the style attribute from your <code>h2</code> element.",
+          "testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.');"
         },
         {
           "text": "Create a <code>style</code> element.",
-          "testString":
-            "assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.');"
+          "testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.');"
         },
         {
           "text": "Your <code>h2</code> element should be blue.",
-          "testString":
-            "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.');"
+          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.');"
         },
         {
-          "text":
-            "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.",
-          "testString":
-            "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');"
+          "text": "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.",
+          "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');"
         },
         {
-          "text":
-            "Make sure all your <code>style</code> elements are valid and have a closing tag.",
-          "testString":
-            "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.');"
+          "text": "Make sure all your <code>style</code> elements are valid and have a closing tag.",
+          "testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -292,26 +281,19 @@
       "tests": [
         {
           "text": "Your <code>h2</code> element should be red.",
-          "testString":
-            "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
+          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
         },
         {
-          "text":
-            "Your <code>h2</code> element should have the class <code>red-text</code>.",
-          "testString":
-            "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
+          "text": "Your <code>h2</code> element should have the class <code>red-text</code>.",
+          "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
         },
         {
-          "text":
-            "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.",
-          "testString":
-            "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a <code>red-text</code> class and have its color set to red.');"
+          "text": "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.",
+          "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a <code>red-text</code> class and have its color set to red.');"
         },
         {
-          "text":
-            "Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.",
-          "testString":
-            "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.');"
+          "text": "Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.",
+          "testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.');"
         }
       ],
       "challengeType": 0,
@@ -438,31 +420,23 @@
       "tests": [
         {
           "text": "Your <code>h2</code> element should be red.",
-          "testString":
-            "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
+          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
         },
         {
-          "text":
-            "Your <code>h2</code> element should have the class <code>red-text</code>.",
-          "testString":
-            "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
+          "text": "Your <code>h2</code> element should have the class <code>red-text</code>.",
+          "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
         },
         {
           "text": "Your first <code>p</code> element should be red.",
-          "testString":
-            "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first <code>p</code> element should be red.');"
+          "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first <code>p</code> element should be red.');"
         },
         {
-          "text":
-            "Your second and third <code>p</code> elements should not be red.",
-          "testString":
-            "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'Your second and third <code>p</code> elements should not be red.');"
+          "text": "Your second and third <code>p</code> elements should not be red.",
+          "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'Your second and third <code>p</code> elements should not be red.');"
         },
         {
-          "text":
-            "Your first <code>p</code> element should have the class <code>red-text</code>.",
-          "testString":
-            "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first <code>p</code> element should have the class <code>red-text</code>.');"
+          "text": "Your first <code>p</code> element should have the class <code>red-text</code>.",
+          "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first <code>p</code> element should have the class <code>red-text</code>.');"
         }
       ],
       "challengeType": 0,
@@ -577,10 +551,8 @@
       ],
       "tests": [
         {
-          "text":
-            "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.",
-          "testString":
-            "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.');"
+          "text": "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.",
+          "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.');"
         }
       ],
       "challengeType": 0,
@@ -684,10 +656,8 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>p</code> elements should use the font <code>monospace</code>.",
-          "testString":
-            "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>monospace</code>.');"
+          "text": "Your <code>p</code> elements should use the font <code>monospace</code>.",
+          "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>monospace</code>.');"
         }
       ],
       "challengeType": 0,
@@ -805,25 +775,19 @@
       "tests": [
         {
           "text": "Import the <code>Lobster</code> font.",
-          "testString":
-            "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the <code>Lobster</code> font.');"
+          "testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the <code>Lobster</code> font.');"
         },
         {
-          "text":
-            "Your <code>h2</code> element should use the font <code>Lobster</code>.",
-          "testString":
-            "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font <code>Lobster</code>.');"
+          "text": "Your <code>h2</code> element should use the font <code>Lobster</code>.",
+          "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font <code>Lobster</code>.');"
         },
         {
           "text": "Use an <code>h2</code> CSS selector to change the font.",
-          "testString":
-            "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an <code>h2</code> CSS selector to change the font.');"
+          "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an <code>h2</code> CSS selector to change the font.');"
         },
         {
-          "text":
-            "Your <code>p</code> element should still use the font <code>monospace</code>.",
-          "testString":
-            "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font <code>monospace</code>.');"
+          "text": "Your <code>p</code> element should still use the font <code>monospace</code>.",
+          "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font <code>monospace</code>.');"
         }
       ],
       "challengeType": 0,
@@ -945,26 +909,19 @@
       "tests": [
         {
           "text": "Your h2 element should use the font <code>Lobster</code>.",
-          "testString":
-            "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.');"
+          "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.');"
         },
         {
-          "text":
-            "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.",
-          "testString":
-            "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.');"
+          "text": "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.",
+          "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.');"
         },
         {
-          "text":
-            "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.",
-          "testString":
-            "assert(new RegExp(\"<!--[^fc]\", \"gi\").test(code), 'Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.');"
+          "text": "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.",
+          "testString": "assert(new RegExp(\"<!--[^fc]\", \"gi\").test(code), 'Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.');"
         },
         {
-          "text":
-            "Be sure to close your comment by adding <code>--&#62;</code>.",
-          "testString":
-            "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), 'Be sure to close your comment by adding <code>--&#62;</code>.');"
+          "text": "Be sure to close your comment by adding <code>--&#62;</code>.",
+          "testString": "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), 'Be sure to close your comment by adding <code>--&#62;</code>.');"
         }
       ],
       "challengeType": 0,
@@ -1087,16 +1044,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>img</code> element should have the class <code>smaller-image</code>.",
-          "testString":
-            "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
+          "text": "Your <code>img</code> element should have the class <code>smaller-image</code>.",
+          "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
         },
         {
-          "text":
-            "Your image should be 100 pixels wide. Browser zoom should be at 100%.",
-          "testString":
-            "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
+          "text": "Your image should be 100 pixels wide. Browser zoom should be at 100%.",
+          "testString": "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
         }
       ],
       "challengeType": 0,
@@ -1221,32 +1174,24 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>img</code> element should have the class <code>smaller-image</code>.",
-          "testString":
-            "assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
+          "text": "Your <code>img</code> element should have the class <code>smaller-image</code>.",
+          "testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
         },
         {
-          "text":
-            "Your <code>img</code> element should have the class <code>thick-green-border</code>.",
-          "testString":
-            "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.');"
+          "text": "Your <code>img</code> element should have the class <code>thick-green-border</code>.",
+          "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.');"
         },
         {
           "text": "Give your image a border width of <code>10px</code>.",
-          "testString":
-            "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of <code>10px</code>.');"
+          "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of <code>10px</code>.');"
         },
         {
           "text": "Give your image a border style of <code>solid</code>.",
-          "testString":
-            "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of <code>solid</code>.');"
+          "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of <code>solid</code>.');"
         },
         {
-          "text":
-            "The border around your <code>img</code> element should be green.",
-          "testString":
-            "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.');"
+          "text": "The border around your <code>img</code> element should be green.",
+          "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.');"
         }
       ],
       "challengeType": 0,
@@ -1305,8 +1250,7 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements",
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -1381,15 +1325,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Your image element should have the class \"thick-green-border\".",
-          "testString":
-            "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".');"
+          "text": "Your image element should have the class \"thick-green-border\".",
+          "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".');"
         },
         {
           "text": "Your image should have a border radius of <code>10px</code>",
-          "testString":
-            "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of <code>10px</code>');"
+          "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of <code>10px</code>');"
         }
       ],
       "challengeType": 0,
@@ -1431,8 +1372,7 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius",
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -1512,15 +1452,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Your image should have a border radius of <code>50%</code>, making it perfectly circular.",
-          "testString":
-            "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.');"
+          "text": "Your image should have a border radius of <code>50%</code>, making it perfectly circular.",
+          "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.');"
         },
         {
           "text": "Be sure to use a percentage value of <code>50%</code>.",
-          "testString":
-            "assert(code.match(/50%/g), 'Be sure to use a percentage value of <code>50%</code>.');"
+          "testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of <code>50%</code>.');"
         }
       ],
       "challengeType": 0,
@@ -1640,16 +1577,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Give your <code>div</code> element the class <code>silver-background</code>.",
-          "testString":
-            "assert($(\"div\").hasClass(\"silver-background\"), 'Give your <code>div</code> element the class <code>silver-background</code>.');"
+          "text": "Give your <code>div</code> element the class <code>silver-background</code>.",
+          "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your <code>div</code> element the class <code>silver-background</code>.');"
         },
         {
-          "text":
-            "Your <code>div</code> element should have a silver background.",
-          "testString":
-            "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your <code>div</code> element should have a silver background.');"
+          "text": "Your <code>div</code> element should have a silver background.",
+          "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your <code>div</code> element should have a silver background.');"
         }
       ],
       "challengeType": 0,
@@ -1781,10 +1714,8 @@
       ],
       "tests": [
         {
-          "text":
-            "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
-          "testString":
-            "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
+          "text": "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
+          "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
         }
       ],
       "challengeType": 0,
@@ -1926,28 +1857,20 @@
       ],
       "tests": [
         {
-          "text":
-            "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
-          "testString":
-            "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
+          "text": "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
+          "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
         },
         {
-          "text":
-            "Your <code>form</code> element should have the <code>background-color</code> of green.",
-          "testString":
-            "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your <code>form</code> element should have the <code>background-color</code> of green.');"
+          "text": "Your <code>form</code> element should have the <code>background-color</code> of green.",
+          "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your <code>form</code> element should have the <code>background-color</code> of green.');"
         },
         {
-          "text":
-            "Make sure your <code>form</code> element has an <code>id</code> attribute.",
-          "testString":
-            "assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has an <code>id</code> attribute.');"
+          "text": "Make sure your <code>form</code> element has an <code>id</code> attribute.",
+          "testString": "assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has an <code>id</code> attribute.');"
         },
         {
-          "text":
-            "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.",
-          "testString":
-            "assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');"
+          "text": "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.",
+          "testString": "assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');"
         }
       ],
       "challengeType": 0,
@@ -2088,10 +2011,8 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
         }
       ],
       "challengeType": 0,
@@ -2148,8 +2069,7 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element",
+      "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -2210,10 +2130,8 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
         }
       ],
       "challengeType": 0,
@@ -2259,8 +2177,7 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element",
+      "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -2323,10 +2240,8 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
         }
       ],
       "challengeType": 0,
@@ -2372,8 +2287,7 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element",
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -2434,35 +2348,26 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title":
-            "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand",
+          "title": "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand",
           "description": [
             "Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also <code>padding</code> – geben wollen.",
             "CSS erlaubt dir den Innenabstand - <code>padding</code> - eines Elements auf allen Seiten einzeln mit den Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu steuern.",
@@ -2480,8 +2385,7 @@
           ]
         },
         "pt-br": {
-          "title":
-            "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento",
+          "title": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento",
           "description": [
             "As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (<code>padding</code>) diferente em cada um de seus lados.",
             "O CSS permite controlar o preenchimento (<code>padding</code>) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code>.",
@@ -2490,8 +2394,7 @@
           ]
         },
         "ru": {
-          "title":
-            "Добавьте разный отступ содердимого с каждой стороны элемента",
+          "title": "Добавьте разный отступ содердимого с каждой стороны элемента",
           "description": [
             "Иногда вам может потребоваться изменить элемент таким образом, чтобы отступ содержимого <code>padding</code> с каждой из сторон был разным.",
             "CSS позволяет вам контролировать значение свойства <code>padding</code> элемента со всех сторон с помощью свойств: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>.",
@@ -2500,8 +2403,7 @@
           ]
         }
       },
-      "guideUrl":
-        "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element",
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -2563,35 +2465,26 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title":
-            "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu",
+          "title": "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu",
           "description": [
             "Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - <code>margin</code> - geben wollen.",
             "CSS erlaubt dir ebenfalls den Außenabstand - <code>margin</code> - eines Elements auf jeder Seite einzeln mit den Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu steuern.",
@@ -2689,41 +2582,30 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');"
+          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.",
+          "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');"
         },
         {
-          "text":
-            "You should use the clockwise notation to set the padding of <code>blue-box</code> class.",
-          "testString":
-            "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of <code>blue-box</code> class.');"
+          "text": "You should use the clockwise notation to set the padding of <code>blue-box</code> class.",
+          "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of <code>blue-box</code> class.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title":
-            "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
+          "title": "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
           "description": [
             "Anstatt die Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu verwenden, kannst du sie alle in einer Zeile schreiben:",
             "<code>padding: 10px 20px 10px 20px;</code>",
@@ -2733,8 +2615,7 @@
           ]
         },
         "es": {
-          "title":
-            "Utiliza notación en sentido horario para especificar el relleno de un elemento",
+          "title": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
           "description": [
             "En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code> de un elemento, puedes especificar todas en una sóla línea, así: ",
             "<code>padding: 10px 20px 10px 20px;</code>",
@@ -2744,8 +2625,7 @@
           ]
         },
         "pt-br": {
-          "title":
-            "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento",
+          "title": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento",
           "description": [
             "Ao invés de especificar as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code> de um elemento, você pode especificar todas elas em uma só linha, assim:",
             "<code>padding: 10px 20px 10px 20px;</code>",
@@ -2755,8 +2635,7 @@
           ]
         },
         "ru": {
-          "title":
-            "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента",
+          "title": "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента",
           "description": [
             "Вместо указания свойств элемента: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>, вы можете указать их в строку, например:",
             "<code>padding: 10px 20px 10px 20px;</code>",
@@ -2826,35 +2705,26 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
         },
         {
-          "text":
-            "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
-          "testString":
-            "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
+          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
+          "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title":
-            "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
+          "title": "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
           "description": [
             "Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also <code>margin</code>.",
             "Anstatt die Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu verwenden, kannst du alle in eine Zeile schreiben:",
@@ -2865,8 +2735,7 @@
           ]
         },
         "es": {
-          "title":
-            "Utiliza notación en sentido horario para especificar el margen de un elemento",
+          "title": "Utiliza notación en sentido horario para especificar el margen de un elemento",
           "description": [
             "Vamos a intentar esto de nuevo, pero esta vez con el margen (<code>margin</code>).",
             "En lugar de especificar las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, y <code>margin-left</code> de un elemento, puedes especificarlas en una sóla línea así: ",
@@ -2877,8 +2746,7 @@
           ]
         },
         "pt-br": {
-          "title":
-            "Use Notação em Sentido Horário para Especificar a Margem de um Elemento",
+          "title": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento",
           "description": [
             "Vamos praticar isso outra vez, mas desta vez será com a margem (<code>margin</code>).",
             "Ao invés de especificar as propriedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, e <code>margin-left</code> de um elemento, você pode especificar todas elas em apenas uma linha assim:",
@@ -2889,8 +2757,7 @@
           ]
         },
         "ru": {
-          "title":
-            "Используйте систему ссылок по часовой стрелке для установки отступа элемента",
+          "title": "Используйте систему ссылок по часовой стрелке для установки отступа элемента",
           "description": [
             "Давайте попробуем то же самое, но со свойством <code>margin</code> на этот раз.",
             "Вмето указания свойств элемента: <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>, вы можете указать их в строку, например:",
@@ -2961,20 +2828,16 @@
       ],
       "tests": [
         {
-          "text":
-            "The <code>type</code> attribute selector should be used to select the checkboxes.",
-          "testString":
-            "assert(code.match(/<style>[\\s\\S]*?\\[type=(\"|')checkbox\\1\\]\\s*?{[\\s\\S]*?}[\\s\\S]*?<\\/style>/gi),'The <code>type</code> attribute selector should be used to select the checkboxes.');"
+          "text": "The <code>type</code> attribute selector should be used to select the checkboxes.",
+          "testString": "assert(code.match(/<style>[\\s\\S]*?\\[type=(\"|')checkbox\\1\\]\\s*?{[\\s\\S]*?}[\\s\\S]*?<\\/style>/gi),'The <code>type</code> attribute selector should be used to select the checkboxes.');"
         },
         {
           "text": "The top margins of the checkboxes should be 10px.",
-          "testString":
-            "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()),'The top margins of the checkboxes should be 10px.');"
+          "testString": "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()),'The top margins of the checkboxes should be 10px.');"
         },
         {
           "text": "The bottom margins of the checkboxes should be 15px.",
-          "testString":
-            "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()),'The bottom margins of the checkboxes should be 15px.');"
+          "testString": "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()),'The bottom margins of the checkboxes should be 15px.');"
         }
       ],
       "solutions": [],
@@ -3069,16 +2932,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>red-box</code> class should have a <code>padding</code> property.",
-          "testString":
-            "assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'Your <code>red-box</code> class should have a <code>padding</code> property.');"
+          "text": "Your <code>red-box</code> class should have a <code>padding</code> property.",
+          "testString": "assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'Your <code>red-box</code> class should have a <code>padding</code> property.');"
         },
         {
-          "text":
-            "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.",
-          "testString":
-            "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.');"
+          "text": "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.",
+          "testString": "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.');"
         }
       ],
       "challengeType": 0,
@@ -3143,21 +3002,16 @@
       ],
       "tests": [
         {
-          "text":
-            "Give your <code>body</code> element the <code>background-color</code> of black.",
-          "testString":
-            "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of black.');"
+          "text": "Give your <code>body</code> element the <code>background-color</code> of black.",
+          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of black.');"
         },
         {
-          "text":
-            "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.",
-          "testString":
-            "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule is properly formatted with both opening and closing curly brackets.');"
+          "text": "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.",
+          "testString": "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule is properly formatted with both opening and closing curly brackets.');"
         },
         {
           "text": "Make sure your CSS rule ends with a semi-colon.",
-          "testString":
-            "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule ends with a semi-colon.');"
+          "testString": "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule ends with a semi-colon.');"
         }
       ],
       "challengeType": 0,
@@ -3234,43 +3088,31 @@
       "tests": [
         {
           "text": "Create an <code>h1</code> element.",
-          "testString":
-            "assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.');"
+          "testString": "assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should have the text <code>Hello World</code>.",
-          "testString":
-            "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.');"
+          "text": "Your <code>h1</code> element should have the text <code>Hello World</code>.",
+          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.');"
         },
         {
           "text": "Make sure your <code>h1</code> element has a closing tag.",
-          "testString":
-            "assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.');"
+          "testString": "assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.');"
         },
         {
-          "text":
-            "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.",
-          "testString":
-            "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');"
+          "text": "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.",
+          "testString": "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');"
         },
         {
-          "text":
-            "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.",
-          "testString":
-            "assert(($(\"body\").css(\"font-family\").match(/monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.');"
+          "text": "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.",
+          "testString": "assert(($(\"body\").css(\"font-family\").match(/monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.",
-          "testString":
-            "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.');"
+          "text": "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.",
+          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.",
-          "testString":
-            "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');"
+          "text": "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.",
+          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');"
         }
       ],
       "challengeType": 0,
@@ -3351,21 +3193,16 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text":
-            "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.",
-          "testString":
-            "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.');"
+          "text": "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.",
+          "testString": "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.');"
         },
         {
           "text": "Your <code>h1</code> element should be pink.",
-          "testString":
-            "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
         }
       ],
       "challengeType": 0,
@@ -3449,27 +3286,20 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>blue-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
         },
         {
-          "text":
-            "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.",
-          "testString":
-            "assert($(\".pink-text\").hasClass(\"blue-text\"), 'Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');"
+          "text": "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.",
+          "testString": "assert($(\".pink-text\").hasClass(\"blue-text\"), 'Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');"
         },
         {
           "text": "Your <code>h1</code> element should be blue.",
-          "testString":
-            "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h1</code> element should be blue.');"
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h1</code> element should be blue.');"
         }
       ],
       "challengeType": 0,
@@ -3571,51 +3401,38 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>blue-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element the id of <code>orange-text</code>.",
-          "testString":
-            "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.');"
+          "text": "Give your <code>h1</code> element the id of <code>orange-text</code>.",
+          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.');"
         },
         {
           "text": "There should be only one <code>h1</code> element.",
-          "testString":
-            "assert(($(\"h1\").length === 1), 'There should be only one <code>h1</code> element.');"
+          "testString": "assert(($(\"h1\").length === 1), 'There should be only one <code>h1</code> element.');"
         },
         {
-          "text":
-            "Create a CSS declaration for your <code>orange-text</code> id",
-          "testString":
-            "assert(code.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id');"
+          "text": "Create a CSS declaration for your <code>orange-text</code> id",
+          "testString": "assert(code.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id');"
         },
         {
-          "text":
-            "Do not give your <code>h1</code> any <code>style</code> attributes.",
-          "testString":
-            "assert(!code.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.');"
+          "text": "Do not give your <code>h1</code> any <code>style</code> attributes.",
+          "testString": "assert(!code.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.');"
         },
         {
           "text": "Your <code>h1</code> element should be orange.",
-          "testString":
-            "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.');"
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title":
-            "Überschreibe Klassen Deklarationen mit Styling von ID Attributen",
+          "title": "Überschreibe Klassen Deklarationen mit Styling von ID Attributen",
           "description": [
             "Wir haben gerade bewiesen, dass der Browser CSS von oben nach unten liest. Das bedeuted, dass im Falle eines Konflikts der Browser immer die letzte CSS Deklaration verwenden wird.",
             "Aber damit sind wir noch nicht fertig. Es gibt andere Wege um CSS zu überschreiben. Erinnerst du dich an Id Attribute?",
@@ -3629,8 +3446,7 @@
           ]
         },
         "es": {
-          "title":
-            "Anula la declaración de clases dando estilo a los atributos ID",
+          "title": "Anula la declaración de clases dando estilo a los atributos ID",
           "description": [
             "Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ",
             "Pero no hemos terminado todavía. Hay otras maneras con las que puedes anular CSS. ¿Te acuerdas de los atributos id?",
@@ -3645,8 +3461,7 @@
           ]
         },
         "pt-br": {
-          "title":
-            "Sobreponha a Declaração de Classes Estilizando Atributos ID",
+          "title": "Sobreponha a Declaração de Classes Estilizando Atributos ID",
           "description": [
             "Acabamos de demonstrar que os navegadores fazem a leitura do CSS de cima para baixo. Isso significa que, em caso de um conflito, o navegador utilizará a última declaração CSS.",
             "Mas ainda não terminamos, pois existem outras formas para sobrepor CSS. Você se lembra dos atributos <code>id</code>?",
@@ -3660,8 +3475,7 @@
           ]
         },
         "ru": {
-          "title":
-            "Переопределите значения свойств классов стилизацией атрибутов id",
+          "title": "Переопределите значения свойств классов стилизацией атрибутов id",
           "description": [
             "Мы только что доказали, что браузеры читают CSS сверху-вниз. Это значит, что в случае конфликта значений будет установлено то, которое было объявлено в последнюю очередь.",
             "Но мы ещё не закончилил. Есть и другие способы переопределения CSS. Помните атрибуты id?",
@@ -3715,32 +3529,24 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>blue-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
-          "testString":
-            "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
+          "text": "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
+          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
         },
         {
           "text": "Give your <code>h1</code> element an inline style.",
-          "testString":
-            "assert(document.querySelector('h1[style]'), 'Give your <code>h1</code> element an inline style.');"
+          "testString": "assert(document.querySelector('h1[style]'), 'Give your <code>h1</code> element an inline style.');"
         },
         {
           "text": "Your <code>h1</code> element should be white.",
-          "testString":
-            "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'Your <code>h1</code> element should be white.');"
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'Your <code>h1</code> element should be white.');"
         }
       ],
       "challengeType": 0,
@@ -3779,8 +3585,7 @@
           ]
         },
         "ru": {
-          "title":
-            "Переопределите значения свойств классов встроенными стилями",
+          "title": "Переопределите значения свойств классов встроенными стилями",
           "description": [
             "Итак, мы доказали, что объявление атрибута <code>id</code> переопределяет значения свойств, определённые в значениях атрибута <code>class</code>, независимо от того, были ли они объявлены в вашем элементе <code>style</code>.",
             "Есть и другие способы переопределения CSS. Помните встроенные стили?",
@@ -3835,39 +3640,28 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should have the class <code>blue-text</code>.",
-          "testString":
-            "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
+          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
+          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
-          "testString":
-            "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
+          "text": "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
+          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
         },
         {
-          "text":
-            "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.",
-          "testString":
-            "assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.');"
+          "text": "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.",
+          "testString": "assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.');"
         },
         {
-          "text":
-            "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.",
-          "testString":
-            "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g), 'Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.');"
+          "text": "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.",
+          "testString": "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g), 'Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.');"
         },
         {
           "text": "Your <code>h1</code> element should be pink.",
-          "testString":
-            "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
+          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
         }
       ],
       "challengeType": 0,
@@ -3967,16 +3761,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Give your <code>body</code> element the background-color of black.",
-          "testString":
-            "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.');"
+          "text": "Give your <code>body</code> element the background-color of black.",
+          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.');"
         },
         {
-          "text":
-            "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.",
-          "testString":
-            "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'Use the <code>hex code</code> for the color black instead of the word <code>black</code>.');"
+          "text": "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.",
+          "testString": "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'Use the <code>hex code</code> for the color black instead of the word <code>black</code>.');"
         }
       ],
       "challengeType": 0,
@@ -4054,52 +3844,36 @@
       ],
       "tests": [
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
-          "testString":
-            "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
+          "testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
         },
         {
-          "text":
-            "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.",
-          "testString":
-            "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>.');"
+          "text": "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.",
+          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
-          "testString":
-            "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
+          "testString": "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
         },
         {
-          "text":
-            "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.",
-          "testString":
-            "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color green instead of the word <code>green</code>.');"
+          "text": "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.",
+          "testString": "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color green instead of the word <code>green</code>.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.",
-          "testString":
-            "assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', 'Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.",
+          "testString": "assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', 'Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.');"
         },
         {
-          "text":
-            "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.",
-          "testString":
-            "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#1E90FF\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.');"
+          "text": "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.",
+          "testString": "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#1E90FF\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.",
-          "testString":
-            "assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', 'Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.",
+          "testString": "assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', 'Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.');"
         },
         {
-          "text":
-            "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.",
-          "testString":
-            "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.');"
+          "text": "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.",
+          "testString": "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.');"
         }
       ],
       "challengeType": 0,
@@ -4188,52 +3962,36 @@
       ],
       "tests": [
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
-          "testString":
-            "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
+          "testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
         },
         {
-          "text":
-            "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.",
-          "testString":
-            "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.');"
+          "text": "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.",
+          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
-          "testString":
-            "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
+          "testString": "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
         },
         {
-          "text":
-            "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.",
-          "testString":
-            "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.');"
+          "text": "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.",
+          "testString": "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.",
-          "testString":
-            "assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', 'Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.",
+          "testString": "assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', 'Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.');"
         },
         {
-          "text":
-            "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.",
-          "testString":
-            "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.');"
+          "text": "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.",
+          "testString": "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.",
-          "testString":
-            "assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.",
+          "testString": "assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.');"
         },
         {
-          "text":
-            "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.",
-          "testString":
-            "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.');"
+          "text": "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.",
+          "testString": "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.');"
         }
       ],
       "challengeType": 0,
@@ -4331,16 +4089,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>body</code> element should have a black background.",
-          "testString":
-            "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Your <code>body</code> element should have a black background.');"
+          "text": "Your <code>body</code> element should have a black background.",
+          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Your <code>body</code> element should have a black background.');"
         },
         {
-          "text":
-            "Use <code>rgb</code> to give your <code>body</code> element a color of black.",
-          "testString":
-            "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element a color of black.');"
+          "text": "Use <code>rgb</code> to give your <code>body</code> element a color of black.",
+          "testString": "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element a color of black.');"
         }
       ],
       "challengeType": 0,
@@ -4430,48 +4184,36 @@
       ],
       "tests": [
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
-          "testString":
-            "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
+          "testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
         },
         {
           "text": "Use <code>rgb</code> for the color red.",
-          "testString":
-            "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?,\\s*?0\\s*?,\\s*?0\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color red.');"
+          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?,\\s*?0\\s*?,\\s*?0\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color red.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.",
-          "testString":
-            "assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', 'Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.",
+          "testString": "assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', 'Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.');"
         },
         {
           "text": "Use <code>rgb</code> for the color orchid.",
-          "testString":
-            "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?,\\s*?112\\s*?,\\s*?214\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color orchid.');"
+          "testString": "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?,\\s*?112\\s*?,\\s*?214\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color orchid.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.",
-          "testString":
-            "assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.",
+          "testString": "assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.');"
         },
         {
           "text": "Use <code>rgb</code> for the color blue.",
-          "testString":
-            "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?255\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color blue.');"
+          "testString": "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?255\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color blue.');"
         },
         {
-          "text":
-            "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.",
-          "testString":
-            "assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', 'Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.');"
+          "text": "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.",
+          "testString": "assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', 'Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.');"
         },
         {
           "text": "Use <code>rgb</code> for the color sienna.",
-          "testString":
-            "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?,\\s*?82\\s*?,\\s*?45\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color sienna.');"
+          "testString": "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?,\\s*?82\\s*?,\\s*?45\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color sienna.');"
         }
       ],
       "challengeType": 0,
@@ -4554,25 +4296,21 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
-          "testString":
-            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
+          "text": "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
         },
         {
-          "text":
-            "<code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.",
-          "testString":
-            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.');"
+          "text": "<code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.');"
         },
         {
-          "text":
-            "<code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.",
-          "testString":
-            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-beak\\s*?:\\s*?orange\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.');"
+          "text": "<code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-beak\\s*?:\\s*?orange\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}\""
+      ],
       "hints": [],
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
@@ -4802,13 +4540,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
-          "testString":
-            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
+          "text": "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".penguin {--penguin-skin: gray;}\""],
       "hints": [],
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
@@ -5035,31 +4771,25 @@
       ],
       "tests": [
         {
-          "text":
-            "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.",
-          "testString":
-            "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.');"
+          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.",
+          "testString": "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.');"
         },
         {
-          "text":
-            "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.",
-          "testString":
-            "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.right-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.');"
+          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.",
+          "testString": "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.right-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.');"
         },
         {
-          "text":
-            "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.",
-          "testString":
-            "assert(code.match(/.right-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.left-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.');"
+          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.",
+          "testString": "assert(code.match(/.right-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.left-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.');"
         },
         {
-          "text":
-            "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.",
-          "testString":
-            "assert(code.match(/.left-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.');"
+          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.",
+          "testString": "assert(code.match(/.left-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}\""
+      ],
       "hints": [],
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
@@ -5301,19 +5031,17 @@
       ],
       "tests": [
         {
-          "text":
-            "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.",
-          "testString":
-            "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.');"
+          "text": "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.",
+          "testString": "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.');"
         },
         {
-          "text":
-            "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.",
-          "testString":
-            "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.');"
+          "text": "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.",
+          "testString": "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}\""
+      ],
       "hints": [],
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
@@ -5547,13 +5275,11 @@
       ],
       "tests": [
         {
-          "text":
-            "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.",
-          "testString":
-            "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.');"
+          "text": "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.",
+          "testString": "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \":root {--penguin-belly: pink;}\""],
       "hints": [],
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
@@ -5783,13 +5509,11 @@
       ],
       "tests": [
         {
-          "text":
-            "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.",
-          "testString":
-            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.');"
+          "text": "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.",
+          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".penguin {--penguin-belly: white;}\""],
       "hints": [],
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
@@ -6021,19 +5745,17 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.",
-          "testString":
-            "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-size\\s*?:\\s*?200px\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.');"
+          "text": "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.",
+          "testString": "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-size\\s*?:\\s*?200px\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.');"
         },
         {
-          "text":
-            "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.",
-          "testString":
-            "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?black\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.');"
+          "text": "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.",
+          "testString": "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?black\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}\""
+      ],
       "hints": [],
       "releasedOn": "Mar 15, 2018",
       "challengeType": 0,
diff --git a/challenges/01-responsive-web-design/css-flexbox.json b/challenges/01-responsive-web-design/css-flexbox.json
index bdc90a2860..f5a81b882c 100644
--- a/challenges/01-responsive-web-design/css-flexbox.json
+++ b/challenges/01-responsive-web-design/css-flexbox.json
@@ -279,7 +279,9 @@
           "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The <code>footer</code> should have a <code>flex-direction</code> property set to row.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"header {flex-direction: row;} footer {flex-direction: row;}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
@@ -634,7 +636,9 @@
           "testString": "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), 'The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"header .profile-name {display: flex; flex-direction: column; justify-content: center; margin-left: 10px;}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
diff --git a/challenges/01-responsive-web-design/css-grid.json b/challenges/01-responsive-web-design/css-grid.json
index c6dc56da75..6971ee20b5 100644
--- a/challenges/01-responsive-web-design/css-grid.json
+++ b/challenges/01-responsive-web-design/css-grid.json
@@ -15,13 +15,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
+          "text": "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".container {display: grid;}\""],
       "hints": [],
       "releasedOn": "Feb 15, 2018",
       "challengeType": 0,
@@ -76,13 +74,13 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".container {grid-template-columns: 100px 100px 100px;}\""
+      ],
       "hints": [],
       "releasedOn": "Feb 15, 2018",
       "challengeType": 0,
@@ -135,13 +133,13 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
+          "text": "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".container {grid-template-rows: 50px 50px;}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -201,13 +199,13 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".container {grid-template-columns: 1fr 100px 2fr;}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -264,13 +262,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
+          "text": "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".container {grid-column-gap: 20px;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -326,13 +322,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
+          "text": "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".container {grid-row-gap: 5px;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -388,13 +382,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
+          "text": "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".container {grid-gap: 10px 20px;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -456,13 +448,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.",
-          "testString":
-            "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
+          "text": "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.",
+          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".item5 {grid-column: 2 / 4;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -522,13 +512,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.",
-          "testString":
-            "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
+          "text": "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.",
+          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".item5 {grid-row: 2 / 4;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -592,13 +580,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.",
-          "testString":
-            "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
+          "text": "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.",
+          "testString": "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".item2 {justify-self: center;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -659,13 +645,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.",
-          "testString":
-            "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
+          "text": "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.",
+          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".item3 {align-self: end;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -726,13 +710,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
+          "text": "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".container {justify-items: center;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -789,13 +771,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
+          "text": "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".container {align-items: end;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -856,13 +836,13 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
+          "text": "<code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".container {grid-template-areas: \\\"header header header\\\" \\\". content content\\\" \\\"footer footer footer\\\";}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -924,13 +904,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.",
-          "testString":
-            "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
+          "text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.",
+          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".item5 {grid-area: footer;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -998,13 +976,11 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.",
-          "testString":
-            "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
+          "text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.",
+          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": ["var code = \".item5 {grid-area: 3/1/4/4;}\""],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -1072,13 +1048,13 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".container {grid-template-columns: repeat(3, 1fr);}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -1137,13 +1113,13 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".container {grid-template-columns: repeat(3, minmax(90px, 1fr));}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -1204,13 +1180,13 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
+          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".container {grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -1285,13 +1261,13 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
-          "testString":
-            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
+          "text": "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
+          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -1367,13 +1343,13 @@
       ],
       "tests": [
         {
-          "text":
-            "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.",
-          "testString":
-            "assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
+          "text": "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.",
+          "testString": "assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \"@media (min-width: 400px){.container{ grid-template-areas: \\\"header header\\\" \\\"advert content\\\" \\\"footer footer\\\";}}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
@@ -1469,19 +1445,17 @@
       ],
       "tests": [
         {
-          "text":
-            "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.",
-          "testString":
-            "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');"
+          "text": "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.",
+          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');"
         },
         {
-          "text":
-            "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.",
-          "testString":
-            "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
+          "text": "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.",
+          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
         }
       ],
-      "solutions": [],
+      "solutions": [
+        "var code = \".item3 {grid-template-columns: auto 1fr; display: grid;}\""
+      ],
       "hints": [],
       "releasedOn": "",
       "challengeType": 0,
diff --git a/challenges/01-responsive-web-design/responsive-web-design.json b/challenges/01-responsive-web-design/responsive-web-design.json
index a25c4a1e70..616aacfce1 100644
--- a/challenges/01-responsive-web-design/responsive-web-design.json
+++ b/challenges/01-responsive-web-design/responsive-web-design.json
@@ -20,16 +20,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.",
-          "testString":
-            "assert($('p').css('font-size') == '10px', 'Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.');"
+          "text": "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.",
+          "testString": "assert($('p').css('font-size') == '10px', 'Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.');"
         },
         {
-          "text":
-            "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.",
-          "testString":
-            "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.');"
+          "text": "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.",
+          "testString": "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -86,22 +82,16 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.",
-          "testString":
-            "assert(code.match(/max-width:\\s*?100%;/g), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');"
+          "text": "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.",
+          "testString": "assert(code.match(/max-width:\\s*?100%;/g), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');"
         },
         {
-          "text":
-            "Your <code>img</code> tag should have a <code>display</code> set to block.",
-          "testString":
-            "assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.');"
+          "text": "Your <code>img</code> tag should have a <code>display</code> set to block.",
+          "testString": "assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.');"
         },
         {
-          "text":
-            "Your <code>img</code> tag should have a <code>height</code> set to auto.",
-          "testString":
-            "assert(code.match(/height:\\s*?auto;/g), 'Your <code>img</code> tag should have a <code>height</code> set to auto.');"
+          "text": "Your <code>img</code> tag should have a <code>height</code> set to auto.",
+          "testString": "assert(code.match(/height:\\s*?auto;/g), 'Your <code>img</code> tag should have a <code>height</code> set to auto.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -151,16 +141,12 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.",
-          "testString":
-            "assert($('img').css('width') == '100px', 'Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');"
+          "text": "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.",
+          "testString": "assert($('img').css('width') == '100px', 'Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');"
         },
         {
-          "text":
-            "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.",
-          "testString":
-            "assert($('img').css('height') == '100px', 'Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
+          "text": "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.",
+          "testString": "assert($('img').css('height') == '100px', 'Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -208,20 +194,16 @@
       ],
       "tests": [
         {
-          "text":
-            "Your <code>h2</code> tag should have a <code>width</code> of 80vw.",
-          "testString":
-            "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your <code>h2</code> tag should have a <code>width</code> of 80vw.');"
+          "text": "Your <code>h2</code> tag should have a <code>width</code> of 80vw.",
+          "testString": "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your <code>h2</code> tag should have a <code>width</code> of 80vw.');"
         },
         {
-          "text":
-            "Your <code>p</code> tag should have a <code>width</code> of 75vmin.",
-          "testString":
-            "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
+          "text": "Your <code>p</code> tag should have a <code>width</code> of 75vmin.",
+          "testString": "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
-      "solutions": [],
+      "solutions": ["var code = \"h2 {width: 80vw;} p {width: 75vmin;}\""],
       "hints": [],
       "challengeType": 0,
       "translations": {