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.

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>
 

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">

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>
 

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>
 

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>
 

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;}

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;}

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>
 

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>
 

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;
   }

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;
   }

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 {

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>
 

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>
 

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;
   }

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 {

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;
   }

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>

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 {

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 {

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 {

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>