From 41718abf76a6b6c53b893291cbb2d1466e364a67 Mon Sep 17 00:00:00 2001
From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
Date: Thu, 27 Feb 2020 07:20:46 -0800
Subject: [PATCH] fix(learn): consolidate comments for responsive web design
 cert (#38256)

Related to PR #38040

This PR is an attempt to consolidate/remove as many comments in the challenge seed code in the Responsive Web Design certification challenges, to be able to create a small translation lookup object for translating the English comments to other languages.
---
 .../add-an-accessible-date-picker.english.md     |  4 ++--
 ...essibility-with-the-figure-element.english.md |  8 ++------
 ...-screen-reader-by-using-custom-css.english.md |  4 ++--
 ...-with-the-html5-datetime-attribute.english.md | 12 ++++--------
 ...t-element-for-better-accessibility.english.md |  8 ++------
 .../modify-fill-mode-of-an-animation.english.md  |  4 ++--
 ...a-fallback-value-to-a-css-variable.english.md |  8 ++++----
 ...nge-a-variable-for-a-specific-area.english.md |  6 ++----
 .../create-a-custom-css-variable.english.md      |  5 ++---
 .../basic-css/inherit-css-variables.english.md   |  5 ++---
 .../use-a-custom-css-variable.english.md         | 16 ++++++++--------
 ...a-media-query-to-change-a-variable.english.md |  6 ++----
 ...to-change-several-elements-at-once.english.md |  4 ++--
 ...columns-with-grid-template-columns.english.md |  6 +++---
 .../add-gaps-faster-with-grid-gap.english.md     |  6 +++---
 .../add-rows-with-grid-template-rows.english.md  |  6 +++---
 ...s-horizontally-using-justify-items.english.md |  6 +++---
 ...items-vertically-using-align-items.english.md |  6 +++---
 ...em-horizontally-using-justify-self.english.md |  6 +++---
 ...n-item-vertically-using-align-self.english.md |  6 +++---
 ...a-column-gap-using-grid-column-gap.english.md |  6 +++---
 ...reate-a-row-gap-using-grid-row-gap.english.md |  6 +++---
 ...e-flexible-layouts-using-auto-fill.english.md |  8 ++++----
 ...te-flexible-layouts-using-auto-fit.english.md |  4 ++--
 .../create-grids-within-grids.english.md         |  4 ++--
 .../create-your-first-css-grid.english.md        |  6 +++---
 ...ide-the-grid-into-an-area-template.english.md |  5 ++---
 ...tem-size-using-the-minmax-function.english.md |  4 ++--
 ...areas-using-the-grid-area-property.english.md |  6 +++---
 ...petition-using-the-repeat-function.english.md |  4 ++--
 ...hange-the-size-of-columns-and-rows.english.md |  4 ++--
 ...without-creating-an-areas-template.english.md |  4 ++--
 ...use-grid-column-to-control-spacing.english.md |  4 ++--
 .../use-grid-row-to-control-spacing.english.md   |  7 ++-----
 ...eries-to-create-responsive-layouts.english.md | 10 ++--------
 .../create-a-media-query.english.md              |  4 +++-
 ...ge-the-presentation-of-a-bar-chart.english.md | 10 +++-------
 37 files changed, 99 insertions(+), 129 deletions(-)

diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md
index 210f85dd43..16be4f16f2 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md
@@ -60,11 +60,11 @@ tests:
         <p>Tell us the best date for the competition</p>
         <label for="pickdate">Preferred Date:</label>
 
-        <!-- Add your code below this line -->
+        <!-- Only change code below this line -->
 
 
 
-        <!-- Add your code above this line -->
+        <!-- Only change code above this line -->
 
         <input type="submit" name="submit" value="Submit">
       </form>
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md
index 9ca4ffc351..31dec12039 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md
@@ -71,13 +71,13 @@ tests:
   <main>
     <section>
 
-      <!-- Add your code below this line -->
+      <!-- Only change code below this line -->
       <div>
         <!-- Stacked bar chart will go here -->
         <br>
         <p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
       </div>
-      <!-- Add your code above this line -->
+      <!-- Only change code above this line -->
 
     </section>
     <section id="stealth">
@@ -123,15 +123,11 @@ tests:
   </header>
   <main>
     <section>
-
-      <!-- Add your code below this line -->
       <figure>
         <!-- Stacked bar chart will go here -->
         <br>
         <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
       </figure>
-      <!-- Add your code above this line -->
-
     </section>
     <section id="stealth">
       <h2>Stealth &amp; Agility Training</h2>
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md
index 4008c02f2f..ce899c3abe 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md
@@ -85,7 +85,7 @@ tests:
   <section>
     <h2>Master Camper Cat's Beginner Three Week Training Program</h2>
     <figure>
-      <!-- Stacked bar chart of weekly training-->
+      <!-- Stacked bar chart of weekly training -->
       <p>[Stacked bar chart]</p>
       <br />
       <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
@@ -181,7 +181,7 @@ tests:
   <section>
     <h2>Master Camper Cat's Beginner Three Week Training Program</h2>
     <figure>
-      <!-- Stacked bar chart of weekly training-->
+      <!-- Stacked bar chart of weekly training -->
       <p>[Stacked bar chart]</p>
       <br />
       <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.english.md
index e32652665a..9672430a67 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.english.md
@@ -48,11 +48,11 @@ tests:
   <article>
     <h2>Mortal Kombat Tournament Survey Results</h2>
 
-    <!-- Add your code below this line -->
+    <!-- Only change code below this line -->
 
     <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
 
-    <!-- Add your code above this line -->
+    <!-- Only change code above this line -->
 
     <section>
       <h3>Comments:</h3>
@@ -101,13 +101,9 @@ const datetimeAttr = $(timeElement).attr("datetime");
   </header>
   <article>
     <h2>Mortal Kombat Tournament Survey Results</h2>
-    
-    <!-- Add your code below this line -->
-    
+
     <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
-    
-    <!-- Add your code above this line -->
-    
+
     <section>
       <h3>Comments:</h3>
       <article>
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md
index ce91822384..82e1e9fecc 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md
@@ -71,7 +71,7 @@ tests:
       <input type="text" id="email" name="email">
 
 
-      <!-- Add your code below this line -->
+      <!-- Only change code below this line -->
       <div>
         <p>What level ninja are you?</p>
         <input id="newbie" type="radio" name="levels" value="newbie">
@@ -81,7 +81,7 @@ tests:
         <input id="master" type="radio" name="levels" value="master">
         <label for="master">Master</label>
       </div>
-      <!-- Add your code above this line -->
+      <!-- Only change code above this line -->
 
 
       <input type="submit" name="submit" value="Submit">
@@ -125,8 +125,6 @@ tests:
       <label for="email">Email:</label>
       <input type="text" id="email" name="email">
 
-
-      <!-- Add your code below this line -->
       <fieldset>
         <legend>What level ninja are you?</legend>
         <input id="newbie" type="radio" name="levels" value="newbie">
@@ -136,8 +134,6 @@ tests:
         <input id="master" type="radio" name="levels" value="master">
         <label for="master">Master</label>
       </fieldset>
-      <!-- Add your code above this line -->
-
 
       <input type="submit" name="submit" value="Submit">
     </form>
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md
index 1416bbf20a..56460b605f 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.english.md
@@ -46,9 +46,9 @@ tests:
   button:hover {
     animation-name: background-color;
     animation-duration: 500ms;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-    /* add your code above this line */
+    /* Only change code above this line */
   }
   @keyframes background-color {
     100% {
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md
index acb8b29039..625c8aad45 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md
@@ -62,9 +62,9 @@ tests:
     top: 10%;
     left: 25%;
 
-    /* change code below */
+    /* Change code below this line */
     background: var(--pengiun-skin);
-    /* change code above */
+    /* Change code above this line */
 
     width: 50%;
     height: 45%;
@@ -75,9 +75,9 @@ tests:
     top: 40%;
     left: 23.5%;
 
-    /* change code below */
+    /* Change code below this line */
     background: var(--pengiun-skin);
-    /* change code above */
+    /* Change code above this line */
 
     width: 53%;
     height: 45%;
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.english.md
index b7f9a23a42..40bbf548ed 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.english.md
@@ -47,11 +47,9 @@ tests:
   }
 
   .penguin {
+    /* Only change code below this line */
 
-    /* add code below */
-
-    /* add code above */
-
+    /* Only change code above this line */
     position: relative;
     margin: auto;
     display: block;
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md
index 21d3339abd..99031aa26c 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md
@@ -43,10 +43,9 @@ tests:
 ```html
 <style>
   .penguin {
+    /* Only change code below this line */
 
-    /* add code below */
-
-    /* add code above */
+    /* Only change code above this line */
     position: relative;
     margin: auto;
     display: block;
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
index 0ad2226734..002c8f2483 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.english.md
@@ -38,10 +38,9 @@ tests:
 ```html
 <style>
   :root {
+    /* Only change code below this line */
 
-    /* add code below */
-
-    /* add code above */
+    /* Only change code above this line */
   }
 
   body {
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md
index 09629ad6d3..69ecdfd4f5 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md
@@ -62,9 +62,9 @@ tests:
     top: 10%;
     left: 25%;
 
-    /* change code below */
+    /* Change code below this line */
     background: black;
-    /* change code above */
+    /* Change code above this line */
 
     width: 50%;
     height: 45%;
@@ -75,9 +75,9 @@ tests:
     top: 40%;
     left: 23.5%;
 
-    /* change code below */
+    /* Change code below this line */
     background: black;
-    /* change code above */
+    /* Change code above this line */
 
     width: 53%;
     height: 45%;
@@ -88,9 +88,9 @@ tests:
     top: 0%;
     left: -5%;
 
-    /* change code below */
+    /* Change code below this line */
     background: black;
-    /* change code above */
+    /* Change code above this line */
 
     width: 30%;
     height: 60%;
@@ -103,9 +103,9 @@ tests:
     top: 0%;
     left: 75%;
 
-    /* change code below */
+    /* Change code below this line */
     background: black;
-    /* change code above */
+    /* Change code above this line */
 
     width: 30%;
     height: 60%;
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.english.md
index d350717fdf..5a4b1833bd 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.english.md
@@ -47,11 +47,9 @@ tests:
 
   @media (max-width: 350px) {
     :root {
+      /* Only change code below this line */
 
-      /* add code below */
-
-      /* add code above */
-
+      /* Only change code above this line */
     }
   }
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.english.md
index d3ff3a82f5..80d93e91e0 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.english.md
@@ -42,11 +42,11 @@ tests:
 <style>
   .penguin {
 
-    /* change code below */
+    /* Only change code below this line */
     --penguin-skin: black;
     --penguin-belly: gray;
     --penguin-beak: yellow;
-    /* change code above */
+    /* Only change code above this line */
 
     position: relative;
     margin: auto;
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md
index 035514d57e..2665d0c58f 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md
@@ -56,10 +56,10 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 </style>
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md
index 19585b8625..0328a112db 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md
@@ -49,10 +49,10 @@ tests:
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 </style>
 <div class="container">
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md
index 56c95c9683..97da48e4a5 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md
@@ -47,10 +47,10 @@ tests:
     background: LightGray;
     display: grid;
     grid-template-columns: 100px 100px 100px;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 </style>
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md
index 819f3dbaa6..f15f9c0cca 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md
@@ -50,10 +50,10 @@ tests:
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 </style>
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md
index 18693eb710..566a00db94 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md
@@ -50,10 +50,10 @@ tests:
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 </style>
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md
index 901450bbff..7dcf2a8eab 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md
@@ -42,10 +42,10 @@ tests:
 
   .item2 {
     background: LightSalmon;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 
   .item3{background:PaleTurquoise;}
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md
index aca0521f8a..9992a31a9d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md
@@ -40,10 +40,10 @@ tests:
 
   .item3 {
     background: PaleTurquoise;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 
   .item4{background:LightPink;}
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md
index a334363e7b..6d4d62611c 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md
@@ -55,10 +55,10 @@ tests:
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+   
+    /* Only change code above this line */
   }
 </style>
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md
index f968ddff02..5435075a70 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md
@@ -49,10 +49,10 @@ tests:
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 </style>
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
index 8a4f840e65..c22f9e24a2 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
@@ -54,11 +54,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: repeat(3, minmax(60px, 1fr));
 
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }
@@ -114,11 +114,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
     
     grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
     
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md
index 750038c0de..cd80a8d21b 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md
@@ -59,11 +59,11 @@ tests:
     width: 100%;
     background: Silver;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: repeat(3, minmax(60px, 1fr));
 
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md
index 816850f7c6..2ddd36a22f 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md
@@ -65,10 +65,10 @@ tests:
   .item3 {
     background: PaleTurquoise;
     grid-area: content;
-    /* enter your code below this line */
+    /* Only change code below this line */
 
 
-    /* enter your code above this line */
+    /* Only change code above this line */
   }
 
   .item4 {
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md
index b1d07df494..0373a9e41a 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md
@@ -46,10 +46,10 @@ tests:
     font-size: 40px;
     width: 100%;
     background: LightGray;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 </style>
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md
index 2131d1ede2..bcdf652bf4 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md
@@ -61,13 +61,12 @@ tests:
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
-    /* change code below this line */
-
     grid-template-areas:
+    /* Only change code below this line */
       "header header header"
       "advert content content"
       "footer footer footer";
-    /* change code above this line */
+    /* Only change code above this line */
   }
 </style>
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md
index ec4bd280da..2bf2fc8e81 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md
@@ -53,11 +53,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: repeat(3, 1fr);
 
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md
index 502021390a..ce6bfc6ebe 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md
@@ -50,10 +50,10 @@ tests:
 
   .item5 {
     background: PaleGreen;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    
+    /* Only change code above this line */
   }
 
   .container {
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md
index 923df245f5..ca4edea083 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md
@@ -67,11 +67,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* change the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: 1fr 1fr 1fr;
 
-    /* change the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
   }
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md
index 1441ecd4a3..0ed8fe8f93 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md
@@ -56,11 +56,11 @@ tests:
     width: 100%;
     background: LightGray;
     display: grid;
-    /* modify the code below this line */
+    /* Only change code below this line */
 
     grid-template-columns: auto 50px 10% 2fr 1fr;
 
-    /* modify the code above this line */
+    /* Only change code above this line */
     grid-template-rows: 50px 50px;
   }
 </style>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md
index 4228e01600..e03467c94d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md
@@ -54,10 +54,10 @@ tests:
 
   .item5 {
     background: PaleGreen;
-    /* add your code below this line */
+    /* Only change code below this line */
 
 
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 
   .container {
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md
index 219084e31a..203a4852be 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md
@@ -61,10 +61,10 @@ tests:
 
   .item5 {
     background: PaleGreen;
-    /* add your code below this line */
+    /* Only change code below this line */
 
 
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 
   .container {
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md
index 3804d98f5b..d497eed571 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md
@@ -51,10 +51,9 @@ tests:
   .item5 {
     background: PaleGreen;
     grid-column: 2 / 4;
-    /* add your code below this line */
+    /* Only change code below this line */
 
-
-    /* add your code above this line */
+    /* Only change code above this line */
   }
 
   .container {
@@ -98,9 +97,7 @@ tests:
   .item5 {
     background: PaleGreen;
     grid-column: 2 / 4;
-    /* add your code below this line */
     grid-row: 2 / 4;
-    /* add your code above this line */
   }
 
   .container {
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md
index 8068742ca8..a9382da834 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md
@@ -85,14 +85,12 @@ tests:
 
   @media (min-width: 400px){
     .container{
-      /* change the code below this line */
-
       grid-template-areas:
+      /* Only change code below this line */
         "advert header"
         "advert content"
         "advert footer";
-
-    /* change the code above this line */
+      /* Only change code above this line */
     }
   }
 </style>
@@ -165,14 +163,10 @@ tests:
 
   @media (min-width: 400px){
     .container{
-      /* change the code below this line */
-
       grid-template-areas:
         "header header"
         "advert content"
         "footer footer";
-
-    /* change the code above this line */
     }
   }
 </style>
diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
index 454188b1e8..b3628d9478 100644
--- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
@@ -48,7 +48,9 @@ tests:
     font-size: 20px;
   }
 
-  /* Add media query below */
+  /* Only change code below this line */
+
+  /* Only change code above this line */
 </style>
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md
index 82e55cf426..e773411c16 100644
--- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md
+++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.english.md
@@ -56,9 +56,10 @@ tests:
   .bar {
     width: 25px;
     height: 100px;
-    /* Add your code below this line */
+    /* Only change code below this line */
 
-    /* Add your code above this line */
+    
+    /* Only change code above this line */
     display: inline-block;
     background-color: blue;
   }
@@ -72,10 +73,7 @@ tests:
       .enter()
       .append("div")
       .attr("class", "bar")
-      // Add your code below this line
       .style("height", (d) => (d + "px"))
-
-      // Add your code above this line
   </script>
 </body>
 ```
@@ -94,9 +92,7 @@ tests:
   .bar {
     width: 25px;
     height: 100px;
-    /* Add your code below this line */
     margin: 2px;
-    /* Add your code above this line */
     display: inline-block;
     background-color: blue;
   }