diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-103-special-subset-sums-optimum/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-103-special-subset-sums-optimum/index.md
index eef58e65c1..0fa3a556eb 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-103-special-subset-sums-optimum/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-103-special-subset-sums-optimum/index.md
@@ -1,5 +1,5 @@
 ---
-title: Special subset sums - optimum
+title: 'Problem 103: Special subset sums: optimum'
 ---
 ## Problem 103: Special subset sums: optimum
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-105-special-subset-sums-testing/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-105-special-subset-sums-testing/index.md
index f8c808e0a7..8c972cb0d8 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-105-special-subset-sums-testing/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-105-special-subset-sums-testing/index.md
@@ -1,5 +1,5 @@
 ---
-title: Special subset sums - testing
+title: 'Problem 105: Special subset sums: testing'
 ---
 ## Problem 105: Special subset sums: testing
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-106-special-subset-sums-meta-testing/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-106-special-subset-sums-meta-testing/index.md
index b65ec18643..53f361f7f5 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-106-special-subset-sums-meta-testing/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-106-special-subset-sums-meta-testing/index.md
@@ -1,5 +1,5 @@
 ---
-title: Special subset sums - meta-testing
+title: 'Problem 106: Special subset sums: meta-testing'
 ---
 ## Problem 106: Special subset sums: meta-testing
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem/index.md
index 1218479c05..e86f52c283 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem/index.md
@@ -1,7 +1,7 @@
 ---
-title: Paper sheets of standard sizes - an expected-value problem
+title: 'Problem 151: Paper sheets of standard sizes: an expected-value problem'
 ---
-## Problem 151: Paper sheets of standard sizes: an expected-value problem
+# Problem 151: Paper sheets of standard sizes: an expected-value problem
 
 This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-152-writing-one-half-as-a-sum-of-inverse-squares/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-152-writing-one-half-as-a-sum-of-inverse-squares/index.md
index 3cd4059de7..afd3e4f746 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-152-writing-one-half-as-a-sum-of-inverse-squares/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-152-writing-one-half-as-a-sum-of-inverse-squares/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Problem 152: Writing half as a sum of inverse squares'
+title: 'Problem 152: Writing one half as a sum of inverse squares'
 ---
 ## Problem 152: Writing one half as a sum of inverse squares
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200/index.md
index 9b5f783cac..434601ba4e 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200/index.md
@@ -1,5 +1,5 @@
 ---
-title: Find the 200th prime-proof sqube containing the contiguous sub-string "200"
+title: 'Problem 200: Find the 200th prime-proof sqube containing the contiguous sub-string "200"'
 ---
 ## Problem 200: Find the 200th prime-proof sqube containing the contiguous sub-string "200"
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-8-largest-product-in-a-series/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-8-largest-product-in-a-series/index.md
index 2b312407bc..034d39c3a6 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-8-largest-product-in-a-series/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-8-largest-product-in-a-series/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Problem 8:  Largest product in a series'
+title: 'Problem 8: Largest product in a series'
 ---
 # Problem 8: Largest product in a series
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-81-path-sum-two-ways/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-81-path-sum-two-ways/index.md
index c415f18dfa..45215ddbc2 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-81-path-sum-two-ways/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-81-path-sum-two-ways/index.md
@@ -1,5 +1,5 @@
 ---
-title: Path sum - two ways
+title: 'Problem 81: Path sum: two ways'
 ---
 ## Problem 81: Path sum: two ways
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-82-path-sum-three-ways/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-82-path-sum-three-ways/index.md
index 8848ddd9a6..92e0527d67 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-82-path-sum-three-ways/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-82-path-sum-three-ways/index.md
@@ -1,5 +1,5 @@
 ---
-title: Path sum - three ways
+title: 'Problem 82: Path sum: three ways'
 ---
 ## Problem 82: Path sum: three ways
 
diff --git a/guide/english/certifications/coding-interview-prep/project-euler/problem-83-path-sum-four-ways/index.md b/guide/english/certifications/coding-interview-prep/project-euler/problem-83-path-sum-four-ways/index.md
index 6ab0de56fc..b43ef4b4f0 100644
--- a/guide/english/certifications/coding-interview-prep/project-euler/problem-83-path-sum-four-ways/index.md
+++ b/guide/english/certifications/coding-interview-prep/project-euler/problem-83-path-sum-four-ways/index.md
@@ -1,5 +1,5 @@
 ---
-title: Path sum - four ways
+title: 'Problem 83: Path sum: four ways'
 ---
 ## Problem 83: Path sum: four ways
 
diff --git a/guide/english/certifications/coding-interview-prep/rosetta-code/averages-pythagorean-means/index.md b/guide/english/certifications/coding-interview-prep/rosetta-code/averages-pythagorean-means/index.md
index a85ca5cbdf..5ec479bf8e 100644
--- a/guide/english/certifications/coding-interview-prep/rosetta-code/averages-pythagorean-means/index.md
+++ b/guide/english/certifications/coding-interview-prep/rosetta-code/averages-pythagorean-means/index.md
@@ -1,7 +1,7 @@
 ---
-title: Averages-Pythagorean means
+title: Averages/Pythagorean means
 ---
-# Averages-Pythagorean means
+# Averages/Pythagorean means
 
 ---
 ## Solutions
diff --git a/guide/english/certifications/coding-interview-prep/rosetta-code/averages-root-mean-square/index.md b/guide/english/certifications/coding-interview-prep/rosetta-code/averages-root-mean-square/index.md
index 0858c4e0ac..b241780541 100644
--- a/guide/english/certifications/coding-interview-prep/rosetta-code/averages-root-mean-square/index.md
+++ b/guide/english/certifications/coding-interview-prep/rosetta-code/averages-root-mean-square/index.md
@@ -1,7 +1,7 @@
 ---
-title: Averages-Root mean square
+title: Averages/Root mean square
 ---
-# Averages-Root mean square
+# Averages/Root mean square
 
 ---
 ## Solutions
diff --git a/guide/english/certifications/coding-interview-prep/take-home-projects/build-a-camper-leaderboard/index.md b/guide/english/certifications/coding-interview-prep/take-home-projects/build-a-camper-leaderboard/index.md
index 592c18e19e..d90357617d 100644
--- a/guide/english/certifications/coding-interview-prep/take-home-projects/build-a-camper-leaderboard/index.md
+++ b/guide/english/certifications/coding-interview-prep/take-home-projects/build-a-camper-leaderboard/index.md
@@ -1,7 +1,7 @@
 ---
-title: Build a Camper Leaderboard
+title: Build a freeCodeCamp Forum Homepage
 ---
-# Build a Camper Leaderboard
+# Build a freeCodeCamp Forum Homepage
 
 This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/coding-interview-prep/take-home-projects/build-a-camper-leaderboard/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
 
diff --git a/guide/english/certifications/data-visualization/json-apis-and-ajax/convert-json-data-to-html/index.md b/guide/english/certifications/data-visualization/json-apis-and-ajax/convert-json-data-to-html/index.md
index d8109aea1b..aaaa12f27d 100644
--- a/guide/english/certifications/data-visualization/json-apis-and-ajax/convert-json-data-to-html/index.md
+++ b/guide/english/certifications/data-visualization/json-apis-and-ajax/convert-json-data-to-html/index.md
@@ -3,8 +3,81 @@ title: Convert JSON Data to HTML
 ---
 # Convert JSON Data to HTML
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/json-apis-and-ajax/convert-json-data-to-html/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<script >
+  document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('getMessage').onclick = function() {
+      req = new XMLHttpRequest();
+      req.open("GET", '/json/cats.json', true);
+      req.send();
+      req.onload = function() {
+        json = JSON.parse(req.responseText);
+        var html = "";
+        // Add your code below this line
+
+        json.forEach(function(val) {
+
+          // Adding each object keys
+          var keys = Object.keys(val);
+          // Generating new html
+          html += "<div class = 'cat'>";
+          // Adding the custom html to each key
+          keys.map(function(key) {
+
+            html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
+
+          });
+
+          html += "</div><br>";
+
+        });
+
+        // Add your code above this line
+        document.getElementsByClassName('message')[0].innerHTML = html;
+      };
+    };
+  });
+</script>
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1> 
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/data-visualization/json-apis-and-ajax/render-images-from-data-sources/index.md b/guide/english/certifications/data-visualization/json-apis-and-ajax/render-images-from-data-sources/index.md
index 340e730170..0a413464ef 100644
--- a/guide/english/certifications/data-visualization/json-apis-and-ajax/render-images-from-data-sources/index.md
+++ b/guide/english/certifications/data-visualization/json-apis-and-ajax/render-images-from-data-sources/index.md
@@ -3,8 +3,69 @@ title: Render Images from Data Sources
 ---
 # Render Images from Data Sources
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/json-apis-and-ajax/render-images-from-data-sources/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<script>
+  document.addEventListener('DOMContentLoaded',function(){
+    document.getElementById('getMessage').onclick=function(){
+      req=new XMLHttpRequest();
+      req.open("GET",'/json/cats.json',true);
+      req.send();
+      req.onload=function(){
+        json=JSON.parse(req.responseText);
+        var html = "";
+        json.forEach(function(val) {
+          html += "<div class = 'cat'>";
+          // Add your code below this line
+          html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
+          
+          // Add your code above this line
+          html += "</div><br>";
+        });
+        document.getElementsByClassName('message')[0].innerHTML=html;
+      };
+     };
+  });
+</script>
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1> 
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/create-a-block-element-bootstrap-button/index.md b/guide/english/certifications/front-end-libraries/bootstrap/create-a-block-element-bootstrap-button/index.md
index cc63236ec2..a9131a180d 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/create-a-block-element-bootstrap-button/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/create-a-block-element-bootstrap-button/index.md
@@ -3,8 +3,70 @@ title: Create a Block Element Bootstrap Button
 ---
 # Create a Block Element Bootstrap Button
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-block-element-bootstrap-button/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-default">Like</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-button/index.md b/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-button/index.md
index c49a37110f..ebccc1f98c 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-button/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-button/index.md
@@ -3,8 +3,78 @@ title: Create a Bootstrap Button
 ---
 # Create a Bootstrap Button
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-bootstrap-button/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<html>
+<head>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+</head>
+<body>
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+
+   <!-- ADD Bootstrap Styled Button -->
+  <button class="btn btn-default">Like</button> 
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+</html>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-headline/index.md b/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-headline/index.md
index 31aab326b7..f0ee04f61a 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-headline/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-headline/index.md
@@ -3,8 +3,13 @@ title: Create a Bootstrap Headline
 ---
 # Create a Bootstrap Headline
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-bootstrap-headline/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<h3 class="text-primary text-center">jQuery Playground</h3>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-row/index.md b/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-row/index.md
index 5482af2261..121677d526 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-row/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/create-a-bootstrap-row/index.md
@@ -3,8 +3,16 @@ title: Create a Bootstrap Row
 ---
 # Create a Bootstrap Row
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-bootstrap-row/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row"></div>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/create-a-custom-heading/index.md b/guide/english/certifications/front-end-libraries/bootstrap/create-a-custom-heading/index.md
index 1946ce4a68..bd93d2ff3a 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/create-a-custom-heading/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/create-a-custom-heading/index.md
@@ -3,8 +3,70 @@ title: Create a Custom Heading
 ---
 # Create a Custom Heading
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-custom-heading/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary  text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+        <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/create-bootstrap-wells/index.md b/guide/english/certifications/front-end-libraries/bootstrap/create-bootstrap-wells/index.md
index 0a802757b5..9c4cc67d4a 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/create-bootstrap-wells/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/create-bootstrap-wells/index.md
@@ -3,8 +3,23 @@ title: Create Bootstrap Wells
 ---
 # Create Bootstrap Wells
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-bootstrap-wells/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well"></div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well"></div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/give-each-element-a-unique-id/index.md b/guide/english/certifications/front-end-libraries/bootstrap/give-each-element-a-unique-id/index.md
index 45d9c2b052..7b528b1980 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/give-each-element-a-unique-id/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/give-each-element-a-unique-id/index.md
@@ -3,8 +3,33 @@ title: Give Each Element a Unique id
 ---
 # Give Each Element a Unique id
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/give-each-element-a-unique-id/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1"></button>
+        <button class="btn btn-default target" id="target2"></button>
+        <button class="btn btn-default target" id="target3"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4"></button>
+        <button class="btn btn-default target" id="target5"></button>
+        <button class="btn btn-default target" id="target6"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div/index.md b/guide/english/certifications/front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div/index.md
index 349ee56645..599088a97d 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div/index.md
@@ -3,8 +3,15 @@ title: House our page within a Bootstrap container-fluid div
 ---
 # House our page within a Bootstrap container-fluid div
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<div class="container-fluid">
+    <h3 class="text-primary text-center">jQuery Playground</h3>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/label-bootstrap-buttons/index.md b/guide/english/certifications/front-end-libraries/bootstrap/label-bootstrap-buttons/index.md
index baf5e77edb..1bcb65d332 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/label-bootstrap-buttons/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/label-bootstrap-buttons/index.md
@@ -3,8 +3,33 @@ title: Label Bootstrap Buttons
 ---
 # Label Bootstrap Buttons
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/label-bootstrap-buttons/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/label-bootstrap-wells/index.md b/guide/english/certifications/front-end-libraries/bootstrap/label-bootstrap-wells/index.md
index 94cf782e7b..8fa7a12106 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/label-bootstrap-wells/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/label-bootstrap-wells/index.md
@@ -3,8 +3,33 @@ title: Label Bootstrap Wells
 ---
 # Label Bootstrap Wells
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/label-bootstrap-wells/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap/index.md b/guide/english/certifications/front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap/index.md
index a33289fa8e..47299a50d5 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap/index.md
@@ -3,8 +3,90 @@ title: Line up Form Elements Responsively with Bootstrap
 ---
 # Line up Form Elements Responsively with Bootstrap
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Loving</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Lazy</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Crazy</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-7">
+        <input type="text" class="form-control" placeholder="cat photo URL" required>
+      </div>
+      <div class="col-xs-5">
+        <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
+      </div>
+    </div>
+  </form>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/make-images-mobile-responsive/index.md b/guide/english/certifications/front-end-libraries/bootstrap/make-images-mobile-responsive/index.md
index 8d88f85f46..778f115252 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/make-images-mobile-responsive/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/make-images-mobile-responsive/index.md
@@ -3,8 +3,73 @@ title: Make Images Mobile Responsive
 ---
 # Make Images Mobile Responsive
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/make-images-mobile-responsive/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Problem Explanation
+When using Bootstrap, if you want an image to be responsive, all you have to do is add the class `img-responsive` to it.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+---
+## Solutions
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive">
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/responsively-style-checkboxes/index.md b/guide/english/certifications/front-end-libraries/bootstrap/responsively-style-checkboxes/index.md
index 16b32ee5e4..d9f85b2ca7 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/responsively-style-checkboxes/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/responsively-style-checkboxes/index.md
@@ -3,8 +3,88 @@ title: Responsively Style Checkboxes
 ---
 # Responsively Style Checkboxes
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/responsively-style-checkboxes/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Problem Explanation
+You can use Bootstrap’s col-xs-* classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+---
+## Solutions
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Loving</label>   
+      </div>
+      <div class="col-xs-4">
+         <label><input type="checkbox" name="personality"> Lazy</label>
+      </div>
+      <div class="col-xs-4">
+         <label><input type="checkbox" name="personality"> Crazy</label>
+      </div>
+    </div>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/responsively-style-radio-buttons/index.md b/guide/english/certifications/front-end-libraries/bootstrap/responsively-style-radio-buttons/index.md
index 7222cbe57e..2eb216007b 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/responsively-style-radio-buttons/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/responsively-style-radio-buttons/index.md
@@ -3,8 +3,76 @@ title: Responsively Style Radio Buttons
 ---
 # Responsively Style Radio Buttons
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/responsively-style-radio-buttons/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+  <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+</details>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/split-your-bootstrap-row/index.md b/guide/english/certifications/front-end-libraries/bootstrap/split-your-bootstrap-row/index.md
index 8d21eec820..b2157b754f 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/split-your-bootstrap-row/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/split-your-bootstrap-row/index.md
@@ -3,8 +3,18 @@ title: Split Your Bootstrap Row
 ---
 # Split Your Bootstrap Row
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/split-your-bootstrap-row/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6"></div>
+    <div class="col-xs-6"></div>
+  </div>
+</div>
+```
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/style-text-inputs-as-form-controls/index.md b/guide/english/certifications/front-end-libraries/bootstrap/style-text-inputs-as-form-controls/index.md
index a845acbbbd..50ece0835d 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/style-text-inputs-as-form-controls/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/style-text-inputs-as-form-controls/index.md
@@ -3,8 +3,84 @@ title: Style Text Inputs as Form Controls
 ---
 # Style Text Inputs as Form Controls
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/style-text-inputs-as-form-controls/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Loving</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Lazy</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Crazy</label>
+      </div>
+    </div>
+    <input type="text" class="form-control" placeholder="cat photo URL" required>
+    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
+  </form>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow/index.md b/guide/english/certifications/front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow/index.md
index 063fa7d7d1..59339a433d 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow/index.md
@@ -3,8 +3,70 @@ title: Taste the Bootstrap Button Color Rainbow
 ---
 # Taste the Bootstrap Button Color Rainbow
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-primary btn-block">Like</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/use-comments-to-clarify-code/index.md b/guide/english/certifications/front-end-libraries/bootstrap/use-comments-to-clarify-code/index.md
index e0428973e0..47fc0099ce 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/use-comments-to-clarify-code/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/use-comments-to-clarify-code/index.md
@@ -3,8 +3,34 @@ title: Use Comments to Clarify Code
 ---
 # Use Comments to Clarify Code
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/use-comments-to-clarify-code/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<!-- Only change code above this line. -->
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side/index.md b/guide/english/certifications/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side/index.md
index 3cfb00b779..8436a07408 100644
--- a/guide/english/certifications/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side/index.md
+++ b/guide/english/certifications/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side/index.md
@@ -3,8 +3,88 @@ title: Use the Bootstrap Grid to Put Elements Side By Side
 ---
 # Use the Bootstrap Grid to Put Elements Side By Side
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+## Problem Explanation
+Bootstrap uses a responsive grid system that makes it easier to put elements into rows and tell each element's relative width.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+![Bootstrap 12 column grid layout](https://www.evernote.com/shard/s116/sh/f0944d97-08b8-4615-8273-a327bf41fb05/de1a3acbceef89ae/deep/0/)
+
+Note that in this illustration, the `col-md-_` class is being used. Here, md means medium, and _ is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+</details>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
diff --git a/guide/english/certifications/front-end-libraries/jquery/delete-your-jquery-functions/index.md b/guide/english/certifications/front-end-libraries/jquery/delete-your-jquery-functions/index.md
index 0638e95dab..e8d4c0e904 100644
--- a/guide/english/certifications/front-end-libraries/jquery/delete-your-jquery-functions/index.md
+++ b/guide/english/certifications/front-end-libraries/jquery/delete-your-jquery-functions/index.md
@@ -3,8 +3,45 @@ title: Delete Your jQuery Functions
 ---
 # Delete Your jQuery Functions
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/delete-your-jquery-functions/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Problem Explanation
+To delete the functions it is just as any other piece of code that you want to remove, select it and delete with the keyboard.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+---
+## Solutions
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<script>
+  $(document).ready(function() {
+
+  });
+</script>
+
+<!-- Only change code above this line. -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/jquery/disable-an-element-using-jquery/index.md b/guide/english/certifications/front-end-libraries/jquery/disable-an-element-using-jquery/index.md
index f94f01dfa6..5e05e584d2 100644
--- a/guide/english/certifications/front-end-libraries/jquery/disable-an-element-using-jquery/index.md
+++ b/guide/english/certifications/front-end-libraries/jquery/disable-an-element-using-jquery/index.md
@@ -3,8 +3,43 @@ title: Disable an Element Using jQuery
 ---
 # Disable an Element Using jQuery
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/disable-an-element-using-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+
+  });
+</script>
+
+<!-- Only change code above this line. -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work/index.md b/guide/english/certifications/front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work/index.md
index 1eb6ae5fe8..53ab4283ff 100644
--- a/guide/english/certifications/front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work/index.md
+++ b/guide/english/certifications/front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work/index.md
@@ -3,8 +3,39 @@ title: Learn How Script Tags and Document Ready Work
 ---
 # Learn How Script Tags and Document Ready Work
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<script>
+  $(document).ready(function() {
+  });
+</script>
+<!-- Only change code above this line. -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/front-end-libraries/jquery/remove-an-element-using-jquery/index.md b/guide/english/certifications/front-end-libraries/jquery/remove-an-element-using-jquery/index.md
index 03b12f2e29..1feef0e4ea 100644
--- a/guide/english/certifications/front-end-libraries/jquery/remove-an-element-using-jquery/index.md
+++ b/guide/english/certifications/front-end-libraries/jquery/remove-an-element-using-jquery/index.md
@@ -3,8 +3,44 @@ title: Remove an Element Using jQuery
 ---
 # Remove an Element Using jQuery
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/remove-an-element-using-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+  });
+</script>
+
+<!-- Only change code above this line. -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
diff --git a/guide/english/certifications/front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery/index.md b/guide/english/certifications/front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery/index.md
index fb47aa65f4..a4fdaa5fde 100644
--- a/guide/english/certifications/front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery/index.md
+++ b/guide/english/certifications/front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery/index.md
@@ -3,8 +3,48 @@ title: Target a Specific Child of an Element Using jQuery
 ---
 # Target a Specific Child of an Element Using jQuery
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $(".target:nth-child(2)").addClass("animated bounce");
+  });
+</script>
+
+<!-- Only change code above this line. -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/jquery/target-the-children-of-an-element-using-jquery/index.md b/guide/english/certifications/front-end-libraries/jquery/target-the-children-of-an-element-using-jquery/index.md
index 338d962c6d..9c083613e2 100644
--- a/guide/english/certifications/front-end-libraries/jquery/target-the-children-of-an-element-using-jquery/index.md
+++ b/guide/english/certifications/front-end-libraries/jquery/target-the-children-of-an-element-using-jquery/index.md
@@ -3,8 +3,47 @@ title: Target the Children of an Element Using jQuery
 ---
 # Target the Children of an Element Using jQuery
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/target-the-children-of-an-element-using-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+  });
+</script>
+
+<!-- Only change code above this line. -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery/index.md b/guide/english/certifications/front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery/index.md
index ea47b4285f..20150c663e 100644
--- a/guide/english/certifications/front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery/index.md
+++ b/guide/english/certifications/front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery/index.md
@@ -3,8 +3,44 @@ title: Use appendTo to Move Elements with jQuery
 ---
 # Use appendTo to Move Elements with jQuery
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+  });
+</script>
+
+<!-- Only change code above this line. -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator/index.md b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator/index.md
index 9a15a40c39..23480be943 100644
--- a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator/index.md
+++ b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator/index.md
@@ -1,7 +1,7 @@
 ---
-title: Comparison with the greater than operator (>)
+title: Comparison with the Greater Than Operator
 ---
-# Comparison with the Greater Than Operator (>)
+# Comparison with the Greater Than Operator
 
 
 ---
diff --git a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator/index.md b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator/index.md
index f576e8211d..2bbabcebec 100644
--- a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator/index.md
+++ b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator/index.md
@@ -1,7 +1,7 @@
 ---
-title: Comparisons with the && (logical AND) operator
+title: Comparisons with the Logical AND operator
 ---
-# Comparisons with the && (logical AND) operator
+# Comparisons with the Logical AND operator
 
 ---
 ## Problem Explanation
diff --git a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/index.md b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/index.md
index 9a1545a25e..9dcbf4164e 100644
--- a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/index.md
+++ b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/index.md
@@ -3,7 +3,37 @@ title: Iterate with JavaScript For Loops
 ---
 # Iterate with JavaScript For Loops
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Hints
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+### Hint 1
+```javascript
+for(var i = 0; i < 5; i++) {  // There are 3 parts here
+```
 
+There are three parts to for loop. They are separated by semicolons.
+
+1. The initialization: `var i = 0;` - This code runs only once at the start of the loop. It's usually used to declare the counter variable (with `var`) and initialize the counter (in this case it is set to 0).
+
+2. The condition: `i < 5;` - The loop will run as long as this is `true`. That means that as soon as `i` is equal to 5, the loop will stop looping. Note that the inside of the loop will never see `i` as 5 because it will stop before then. If this condition is initially `false`, the loop will never execute.
+
+3. The increment: `i++` - This code is run at the end of each loop. It's usually a simple increment (`++` operator), but can really be any expression. It is used to move the counter (`i`) forward (or backwards, or whatever).
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```javascript
+var ourArray = [];
+for (var i = 0; i < 5; i++) {
+  ourArray.push(i);
+}
+
+var myArray = [];
+for (var i = 1; i < 6; i++) {
+  myArray.push(i);
+}
+```
+
+</details>
diff --git a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/index.md b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/index.md
index 72c11495da..955e68339a 100644
--- a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/index.md
+++ b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/index.md
@@ -3,7 +3,27 @@ title: Logical Order in If Else Statements
 ---
 # Logical Order in If Else Statements
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Hints
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+### Hint 1
+So be careful while using the `if`, `else if` and `else` statements and always remember that these are executed from top to bottom. Keep this in mind placing your statements accordingly so that you get the desired output.
 
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```javascript
+function orderMyLogic(val) {
+  if(val < 5) {
+    return "Less than 5";
+  } else if (val < 10) {
+    return "Less than 10";
+  } else {
+    return "Greater than or equal to 10";
+  }
+}
+```
+
+</details>
diff --git a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes/index.md b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes/index.md
index cf27dff43b..1067c66308 100644
--- a/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes/index.md
+++ b/guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes/index.md
@@ -3,7 +3,27 @@ title: Quoting Strings with Single Quotes
 ---
 # Quoting Strings with Single Quotes
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Problem Explanation
+String values in JavaScript may be written with single or double quotes, so long as you start and end with the same type of quote. Unlike some languages, single and double quotes are functionally identical in JavaScript.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+```
+"This string has \"double quotes\" in it"
+```
 
+The value in using one or the other has to do with the need to escape quotes of the same type. If you have a string with many double quotes, this can be difficult to read and write. Instead, use single quotes:
+
+```
+'This string has "double quotes" in it. And "probably" lots of them.'
+```
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```javascript
+var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys/index.md b/guide/english/certifications/responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys/index.md
index b829b6f9ae..540f36b8d0 100644
--- a/guide/english/certifications/responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys/index.md
+++ b/guide/english/certifications/responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys/index.md
@@ -1,7 +1,7 @@
 ---
-title: Make Links Navigatable with HTML Access Keys
+title: Make Links Navigable with HTML Access Keys
 ---
-# Make Links Navigatable with HTML Access Keys
+# Make Links Navigable with HTML Access Keys
 
 
 ---
diff --git a/guide/english/certifications/responsive-web-design/basic-css/inherit-css-variables/index.md b/guide/english/certifications/responsive-web-design/basic-css/inherit-css-variables/index.md
index 7702927c6f..503e371513 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/inherit-css-variables/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/inherit-css-variables/index.md
@@ -1,7 +1,7 @@
 ---
-title: Cascading CSS Variables
+title: Inherit CSS Variables
 ---
-# Cascading CSS Variables
+# Inherit CSS Variables
 
 ---
 ## Problem Explanation
diff --git a/guide/english/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md
index 09409fcae5..50340da4ba 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md
@@ -3,8 +3,74 @@ title: Set the id of an Element
 ---
 # Set the id of an Element
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+  
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+  
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+  
+  <form action="/submit-cat-photo" id="cat-photo-form">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md
index 518e2343e7..bb91873e9e 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md
@@ -3,8 +3,18 @@ title: Style the HTML Body Element
 ---
 # Style the HTML Body Element
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<style>
+body {
+  background-color: black;
+}
+</style>
+```
+
+</details>
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md
index 3eba651765..3502521a9d 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md
@@ -3,8 +3,48 @@ title: Use Abbreviated Hex Code
 ---
 # Use Abbreviated Hex Code
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Problem Explanation
+Red, which is `#FF0000` in hex code, can be shortened to `#F00`. That is, one digit for red, one digit for green, one digit for blue.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+This reduces the total number of possible colors to around 4,000. But browsers will interpret `#FF0000` and `#F00` as exactly the same color.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<style>
+  body {
+    background-color: #F00;
+  }
+</style>
+```
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<style>
+  .red-text {
+    color: #F00;
+  }
+  .fuchsia-text {
+    color: #F0F;
+  }
+  .cyan-text {
+    color: #0FF;
+  }
+  .green-text {
+    color: #0F0;
+  }
+</style>
+
+<h1 class="red-text">I am red!</h1>
+
+<h1 class="fuchsia-text">I am fuchsia!</h1>
+
+<h1 class="cyan-text">I am cyan!</h1>
+
+<h1 class="green-text">I am green!</h1>
+```
+
+</details>
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md
index 82de6da7d3..45c062479c 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md
@@ -3,8 +3,78 @@ title: Use an id Attribute to Style an Element
 ---
 # Use an id Attribute to Style an Element
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+
+  #cat-photo-form {
+    background-color: green;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+  
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+  
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+  
+  <form action="/submit-cat-photo" id="cat-photo-form">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+</details>
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md
index 83d52f86b9..4ad655cf30 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md
@@ -3,8 +3,61 @@ title: Use Clockwise Notation to Specify the Margin of an Element
 ---
 # Use Clockwise Notation to Specify the Margin of an Element
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Problem Explanation
+Instead of specifying an element’s `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` attributes, you can specify them all in one line, like this: `margin: 10px 20px 10px 20px;`.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```css
+.green-box {
+  background-color: green;
+  margin: 40px 20px 20px 40px;
+}
+```
+
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    margin: 20px 40px 20px 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    margin: 40px 20px 20px 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md
index 39788f365b..f440dc0b07 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md
@@ -3,8 +3,48 @@ title: Use Clockwise Notation to Specify the Padding of an Element
 ---
 # Use Clockwise Notation to Specify the Padding of an Element
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding: 40px 20px 20px 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+</details>
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md
index 96b0bf08df..23532409f1 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md
@@ -3,8 +3,23 @@ title: Use Hex Code for Specific Colors
 ---
 # Use Hex Code for Specific Colors
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Problem Explanation
+With CSS, we use 6 hexadecimal number to represent colors. For example, `#000000` is the lowest possible value, and it represents the color black.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+This is the same as `#RRGGBB` which can also be simplified to `#RGB`.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+---
+## Solutions
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```html
+<style>
+  body {
+    background-color: #000000;
+  }
+</style>
+```
+
+</details>
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-rgb-values-to-color-elements/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-rgb-values-to-color-elements/index.md
index 12b4a7ea7b..e529c5eea4 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-rgb-values-to-color-elements/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-rgb-values-to-color-elements/index.md
@@ -3,8 +3,16 @@ title: Use RGB values to Color Elements
 ---
 # Use RGB values to Color Elements
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-rgb-values-to-color-elements/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+---
+## Solutions
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```html
+<style>
+  body {
+    background-color: rgb(0, 0, 0);
+  }
+</style>
+```
+</details>
\ No newline at end of file