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 210f85dd430..16be4f16f22 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 9ca4ffc351e..31dec120397 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 4008c02f2f6..ce899c3abea 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 e32652665a4..9672430a676 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 ce91822384c..82e1e9feccc 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 1416bbf20a3..56460b605f8 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 acb8b29039f..625c8aad45a 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 b7f9a23a42d..40bbf548edf 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 21d3339abd0..99031aa26cb 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 0ad22267346..002c8f24831 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 09629ad6d35..69ecdfd4f5a 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 d350717fdf8..5a4b1833bd6 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 d3ff3a82f57..80d93e91e03 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 035514d57e7..2665d0c58fd 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 19585b86253..0328a112db5 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 56c95c9683b..97da48e4a5e 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 819f3dbaa6e..f15f9c0cca1 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 18693eb7107..566a00db949 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 901450bbff1..7dcf2a8eabf 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 aca0521f8a8..9992a31a9d9 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 a334363e7b5..6d4d62611ce 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 f968ddff02d..5435075a70c 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 8a4f840e650..c22f9e24a29 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 750038c0de1..cd80a8d21b0 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 816850f7c6b..2ddd36a22f5 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 b1d07df4941..0373a9e41a6 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 2131d1ede2a..bcdf652bf4a 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 ec4bd280da2..2bf2fc8e817 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 502021390a5..ce6bfc6ebe8 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 923df245f50..ca4edea083d 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 1441ecd4a3b..0ed8fe8f93c 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 4228e016006..e03467c94d1 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 219084e31a2..203a4852bea 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 3804d98f5b2..d497eed5714 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 8068742ca82..a9382da834e 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 454188b1e8c..b3628d9478d 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 82e55cf4267..e773411c16b 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;
   }