fix: consolidated comments for use with translation dictionary (#39578)

curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md

@@ -10,7 +10,7 @@ forumTopicId: 18347
 When we start using jQuery, we will modify HTML elements without needing to actually change them in HTML.
 Let's make sure that everyone knows they shouldn't actually modify any of this code directly.
 Remember that you can start a comment with <code>&#60;!--</code> and end a comment with <code>--&#62;</code>
-Add a comment at the top of your HTML that says <code>Only change code above this line.</code>
+Add a comment at the top of your HTML that says <code>Code below this line should not be changed</code>
 </section>
 
 ## Instructions
@@ -25,7 +25,7 @@ Add a comment at the top of your HTML that says <code>Only change code above thi
 tests:
   - text: You should start a comment with <code>&#60;!--</code> at the top of your HTML.
     testString: assert(code.match(/^\s*<!--/));
-  - text: Your comment should have the text <code>Only change code above this line</code>.
+  - text: Your comment should have the text <code>Code below this line should not be changed</code>.
     testString: assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
   - text: You should close your comment with <code>--&#62;</code>.
     testString: assert(code.match(/-->.*\n+.+/g));
@@ -75,7 +75,7 @@ tests:
 <section id='solution'>
 
 ```html
-<!-- Only change code above this line. -->
+<!-- Code below this line should not be changed -->
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
   <div class="row">

curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.english.md

@@ -55,7 +55,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md

@@ -53,7 +53,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -98,7 +98,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
   <div class="row">

curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md

@@ -52,7 +52,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -97,7 +97,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md

@@ -53,7 +53,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -94,7 +94,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.english.md

@@ -49,7 +49,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -92,7 +92,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.english.md

@@ -43,7 +43,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -82,7 +82,7 @@ tests:
   $(document).ready(function() {
   });
 </script>
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/remove-an-element-using-jquery.english.md

@@ -45,7 +45,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -88,7 +88,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.english.md

@@ -51,7 +51,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -95,7 +95,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.english.md

@@ -59,7 +59,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -107,7 +107,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.english.md

@@ -49,7 +49,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -91,7 +91,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.english.md

@@ -52,7 +52,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -95,7 +95,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.english.md

@@ -58,7 +58,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -108,7 +108,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.english.md

@@ -49,7 +49,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -90,7 +90,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.english.md

@@ -52,7 +52,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -99,7 +99,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.english.md

@@ -55,7 +55,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <body>
   <div class="container-fluid">
@@ -103,7 +103,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <body>
   <div class="container-fluid">

curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.english.md

@@ -57,7 +57,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -100,7 +100,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md

@@ -50,7 +50,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -94,7 +94,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.english.md

@@ -54,7 +54,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>
@@ -105,7 +105,7 @@ tests:
   });
 </script>
 
-<!-- Only change code above this line. -->
+<!-- Only change code above this line -->
 
 <div class="container-fluid">
   <h3 class="text-primary text-center">jQuery Playground</h3>

curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.english.md

@@ -72,7 +72,7 @@ class Presentational extends React.Component {
 };
 
 const connect = ReactRedux.connect;
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -139,7 +139,7 @@ class Presentational extends React.Component {
 };
 
 const connect = ReactRedux.connect;
-// change code below this line
+// Change code below this line
 
 const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);
 

curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.english.md

@@ -129,7 +129,7 @@ const mapDispatchToProps = (dispatch) => {
 const Provider = ReactRedux.Provider;
 const connect = ReactRedux.connect;
 
-// define the Container component here:
+// Define the Container component here:
 
 
 class AppWrapper extends React.Component {
@@ -137,7 +137,7 @@ class AppWrapper extends React.Component {
     super(props);
   }
   render() {
-    // complete the return statement:
+    // Complete the return statement:
     return (null);
   }
 };
@@ -248,7 +248,6 @@ const mapDispatchToProps = (dispatch) => {
 const Provider = ReactRedux.Provider;
 const connect = ReactRedux.connect;
 
-// define the Container component here:
 const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
 
 class AppWrapper extends React.Component {
@@ -256,7 +255,6 @@ class AppWrapper extends React.Component {
     super(props);
   }
   render() {
-    // complete the return statement:
     return (
       <Provider store={store}>
         <Container/>

curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.english.md

@@ -45,7 +45,7 @@ tests:
 <div id='jsx-seed'>
 
 ```jsx
-// define ADD, addMessage(), messageReducer(), and store here:
+// Define ADD, addMessage(), messageReducer(), and store here:
 
 ```
 

curriculum/challenges/english/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.english.md

@@ -41,9 +41,9 @@ tests:
 
 ```jsx
 class DisplayMessages extends React.Component {
-  // change code below this line
+  // Change code below this line
 
-  // change code above this line
+  // Change code above this line
   render() {
     return <div />
   }

curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md

@@ -56,15 +56,15 @@ class DisplayMessages extends React.Component {
       messages: []
     }
   }
-  // add handleChange() and submitMessage() methods here
+  // Add handleChange() and submitMessage() methods here
 
   render() {
     return (
       <div>
         <h2>Type in a new Message:</h2>
-        { /* render an input, button, and ul here */ }
+        { /* Render an input, button, and ul below this line */ }
 
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md

@@ -57,7 +57,7 @@ const addMessage = (message) => {
   }
 };
 
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -79,7 +79,7 @@ const addMessage = (message) => {
   }
 };
 
-// change code below this line
+// Change code below this line
 
 const mapDispatchToProps = (dispatch) => {
   return {

curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-state-to-props.english.md

@@ -44,7 +44,7 @@ tests:
 ```jsx
 const state = [];
 
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -61,7 +61,7 @@ const state = [];
 ```js
 const state = [];
 
-// change code below this line
+// Change code below this line
 
 const mapStateToProps = (state) => {
   return {

curriculum/challenges/english/03-front-end-libraries/react-and-redux/moving-forward-from-here.english.md

@@ -37,28 +37,28 @@ tests:
 <div id='jsx-seed'>
 
 ```jsx
-// import React from 'react'
+/*
-// import ReactDOM from 'react-dom'
+import React from 'react'
-// import { Provider, connect } from 'react-redux'
+import ReactDOM from 'react-dom'
-// import { createStore, combineReducers, applyMiddleware } from 'redux'
+import { Provider, connect } from 'react-redux'
-// import thunk from 'redux-thunk'
+import { createStore, combineReducers, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk'
 
-// import rootReducer from './redux/reducers'
+import rootReducer from './redux/reducers'
-// import App from './components/App'
+import App from './components/App'
 
-// const store = createStore(
+const store = createStore(
-//   rootReducer,
+  rootReducer,
-//   applyMiddleware(thunk)
+  applyMiddleware(thunk)
-// );
+);
 
-// ReactDOM.render(
+ReactDOM.render(
-//   <Provider store={store}>
+  <Provider store={store}>
-//     <App/>
+    <App/>
-//   </Provider>,
+  </Provider>,
-//   document.getElementById('root')
+  document.getElementById('root')
-// );
+);
-
+*/
-// change code below this line
 
 ```
 

curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md

@@ -49,7 +49,7 @@ tests:
 <div id='jsx-seed'>
 
 ```jsx
-// Redux Code:
+// Redux:
 const ADD = 'ADD';
 
 const addMessage = (message) => {
@@ -75,7 +75,7 @@ const messageReducer = (state = [], action) => {
 
 const store = Redux.createStore(messageReducer);
 
-// React Code:
+// React:
 
 class DisplayMessages extends React.Component {
   constructor(props) {
@@ -125,9 +125,9 @@ class DisplayMessages extends React.Component {
 const Provider = ReactRedux.Provider;
 
 class AppWrapper extends React.Component {
-  // render the Provider here
+  // Render the Provider below this line
 
-  // change code above this line
+  // Change code above this line
 };
 ```
 
@@ -150,7 +150,7 @@ ReactDOM.render(<AppWrapper />, document.getElementById('root'))
 
 
 ```js
-// Redux Code:
+// Redux:
 const ADD = 'ADD';
 
 const addMessage = (message) => {
@@ -174,7 +174,7 @@ const messageReducer = (state = [], action) => {
 
 const store = Redux.createStore(messageReducer);
 
-// React Code:
+// React:
 
 class DisplayMessages extends React.Component {
   constructor(props) {
@@ -224,7 +224,7 @@ class DisplayMessages extends React.Component {
 const Provider = ReactRedux.Provider;
 
 class AppWrapper extends React.Component {
-  // change code below this line
+  // Change code below this line
   render() {
     return (
       <Provider store = {store}>
@@ -232,7 +232,7 @@ class AppWrapper extends React.Component {
       </Provider>
     );
   }
-  // change code above this line
+  // Change code above this line
 };
 ```
 

curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md

@@ -51,9 +51,9 @@ class ReturnTempPassword extends React.Component {
   render() {
     return (
         <div>
-            { /* change code below this line */ }
+            { /* Change code below this line */ }
             <p>Your temporary password is: <strong></strong></p>
-            { /* change code above this line */ }
+            { /* Change code above this line */ }
         </div>
     );
   }
@@ -70,9 +70,9 @@ class ResetPassword extends React.Component {
           <h2>Reset Password</h2>
           <h3>We've generated a new temporary password for you.</h3>
           <h3>Please reset this password from your account settings ASAP.</h3>
-          { /* change code below this line */ }
+          { /* Change code below this line */ }
 
-          { /* change code above this line */ }
+          { /* Change code above this line */ }
         </div>
     );
   }
@@ -123,9 +123,9 @@ class ResetPassword extends React.Component {
           <h2>Reset Password</h2>
           <h3>We've generated a new temporary password for you.</h3>
           <h3>Please reset this password from your account settings ASAP.</h3>
-          { /* change code below this line */ }
+          { /* Change code below this line */ }
           <ReturnTempPassword tempPassword="serrPbqrPnzc" />
-          { /* change code above this line */ }
+          { /* Change code above this line */ }
         </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md

@@ -51,14 +51,14 @@ class MyComponent extends React.Component {
     this.handleEnter = this.handleEnter.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
   }
-  // change code below this line
+  // Change code below this line
   componentDidMount() {
 
   }
   componentWillUnmount() {
 
   }
-  // change code above this line
+  // Change code above this line
   handleEnter() {
     this.setState((state) => ({
       message: state.message + 'You pressed the enter key! '
@@ -107,14 +107,14 @@ class MyComponent extends React.Component {
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handleEnter = this.handleEnter.bind(this);  }
   componentDidMount() {
-    // change code below this line
+    // Change code below this line
     document.addEventListener('keydown', this.handleKeyPress);
-    // change code above this line
+    // Change code above this line
   }
   componentWillUnmount() {
-    // change code below this line
+    // Change code below this line
     document.removeEventListener('keydown', this.handleKeyPress);
-    // change code above this line
+    // Change code above this line
   }
   handleEnter() {
     this.setState((state) => ({

curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md

@@ -14,7 +14,7 @@ All property value length units (like <code>height</code>, <code>width</code>, a
 
 ## Instructions
 <section id='instructions'>
-If you have a large set of styles, you can assign a style <code>object</code> to a constant to keep your code organized. Uncomment the <code>styles</code> constant and declare an <code>object</code> with three style properties and their values. Give the <code>div</code> a color of <code>"purple"</code>, a font-size of <code>40</code>, and a border of <code>"2px solid purple"</code>. Then set the <code>style</code> attribute equal to the <code>styles</code> constant.
+If you have a large set of styles, you can assign a style <code>object</code> to a constant to keep your code organized. Initialize a <code>styles</code> constant and assign an <code>object</code> with three style properties and their values to it. Give the <code>div</code> a color of <code>"purple"</code>, a font-size of <code>40</code>, and a border of <code>"2px solid purple"</code>. Then set the <code>style</code> attribute equal to the <code>styles</code> constant.
 </section>
 
 ## Tests
@@ -46,15 +46,15 @@ tests:
 
 ```jsx
 
-// const styles =
+
-// change code above this line
+// Change code above this line
 class Colorful extends React.Component {
   render() {
-    // change code below this line
+    // Change code below this line
     return (
       <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
     );
-    // change code above this line
+    // Change code above this line
   }
 };
 
@@ -84,14 +84,14 @@ const styles = {
   fontSize: 40,
   border: "2px solid purple"
 };
-// change code above this line
+// Change code above this line
 class Colorful extends React.Component {
   render() {
-    // change code below this line
+    // Change code below this line
     return (
       <div style={styles}>Style Me!</div>
-  // change code above this line
     );
+    // Change code above this line
   }
 };
 

curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md

@@ -48,9 +48,9 @@ class MyComponent extends React.Component {
     this.state = {
       text: "Hello"
     };
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
   }
   handleClick() {
     this.setState({
@@ -60,9 +60,9 @@ class MyComponent extends React.Component {
   render() {
     return (
       <div>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <button>Click Me</button>
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
         <h1>{this.state.text}</h1>
       </div>
     );

curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md

@@ -59,9 +59,9 @@ class GateKeeper extends React.Component {
     let inputStyle = {
       border: '1px solid black'
     };
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
     return (
       <div>
         <h3>Don't Type Too Much:</h3>

curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md

@@ -49,9 +49,9 @@ class Fruits extends React.Component {
     return (
       <div>
         <h2>Fruits:</h2>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
 
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }
@@ -65,9 +65,9 @@ class TypesOfFood extends React.Component {
     return (
       <div>
         <h1>Types of Food:</h1>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
 
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
         <Vegetables />
       </div>
     );
@@ -153,10 +153,10 @@ class Fruits extends React.Component {
     return (
       <div>
         <h2>Fruits:</h2>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <NonCitrus />
         <Citrus />
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     )
   }
@@ -170,9 +170,9 @@ class TypesOfFood extends React.Component {
       return (
         <div>
         <h1>Types of Food:</h1>
-          { /* change code below this line */ }
+          { /* Change code below this line */ }
           <Fruits />
-          { /* change code above this line */ }
+          { /* Change code above this line */ }
           <Vegetables />
         </div>
       );

curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md

@@ -66,7 +66,7 @@ tests:
 <div id='jsx-seed'>
 
 ```jsx
-// write your code here
+
 
 ```
 

curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md

@@ -68,10 +68,10 @@ class ParentComponent extends React.Component {
     return (
       <div>
         <h1>I am the parent</h1>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
 
 
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }
@@ -113,9 +113,9 @@ class ParentComponent extends React.Component {
     return (
       <div>
         <h1>I am the parent</h1>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <ChildComponent />
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md

@@ -124,22 +124,22 @@ class MyForm extends React.Component {
     });
   }
   handleSubmit(event) {
-    // change code below this line
+    // Change code below this line
     
-    // change code above this line
+    // Change code above this line
   }
   render() {
     return (
       <div>
         <form onSubmit={this.handleSubmit}>
-          {/* change code below this line */}
+          {/* Change code below this line */}
 
-          {/* change code above this line */}
+          {/* Change code above this line */}
           <button type='submit'>Submit!</button>
         </form>
-        {/* change code below this line */}
+        {/* Change code below this line */}
 
-        {/* change code above this line */}
+        {/* Change code above this line */}
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md

@@ -48,19 +48,19 @@ class ControlledInput extends React.Component {
     this.state = {
       input: ''
     };
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
   }
-  // change code below this line
+  // Change code below this line
 
-  // change code above this line
+  // Change code above this line
   render() {
     return (
       <div>
-        { /* change code below this line */}
+        { /* Change code below this line */}
 
-        { /* change code above this line */}
+        { /* Change code above this line */}
         <h4>Controlled Input:</h4>
         <p>{this.state.input}</p>
       </div>

curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md

@@ -61,11 +61,11 @@ class MyComponent extends React.Component {
     super(props);
   }
   render() {
-    // change code below this line
+    // Change code below this line
 
 
 
-    // change code above this line
+    // Change code above this line
   }
 };
 ```
@@ -94,13 +94,13 @@ class MyComponent extends React.Component {
     super(props);
   }
   render() {
-    // change code below this line
+    // Change code below this line
     return (
       <div>
         <h1>Hello React!</h1>
       </div>
     );
-    // change code above this line
+    // Change code above this line
   }
 };
 ```

curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md

@@ -53,8 +53,9 @@ tests:
 class StatefulComponent extends React.Component {
   constructor(props) {
     super(props);
-    // initialize state here
+    // Only change code below this line
 
+    // Only change code above this line
   }
   render() {
     return (

curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md

@@ -53,11 +53,11 @@ tests:
 
 ```jsx
 const MyComponent = function() {
-  // change code below this line
+  // Change code below this line
 
 
 
-  // change code above this line
+  // Change code above this line
 }
 ```
 
@@ -81,13 +81,13 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 
 ```js
 const MyComponent = function() {
-  // change code below this line
+  // Change code below this line
   return (
     <div>
       Demo Solution
     </div>
   );
-  // change code above this line
+  // Change code above this line
 }
 ```
 

curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md

@@ -56,7 +56,7 @@ const frontEndFrameworks = [
 ];
 
 function Frameworks() {
-  const renderFrameworks = null; // change code here
+  const renderFrameworks = null; // Change this line
   return (
     <div>
       <h1>Popular Front End JavaScript Frameworks</h1>

curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md

@@ -44,11 +44,9 @@ tests:
 ```jsx
 const JSX = (
   <div>
-    {/* remove comment and change code below this line
     <h2>Welcome to React!</h2> <br >
     <p>Be sure to close all tags!</p>
     <hr >
-    remove comment and change code above this line */}
   </div>
 );
 
@@ -75,11 +73,9 @@ ReactDOM.render(JSX, document.getElementById('root'))
 ```js
 const JSX = (
 <div>
-  {/* change code below this line */}
   <h2>Welcome to React!</h2> <br />
   <p>Be sure to close all tags!</p>
   <hr />
-  {/* change code above this line */}
 </div>
 );
 ```

curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md

@@ -84,9 +84,9 @@ class OnlyEvens extends React.Component {
   }
   shouldComponentUpdate(nextProps, nextState) {
     console.log('Should I update?');
-    // change code below this line
+    // Change code below this line
     return true;
-    // change code above this line
+    // Change code above this line
   }
   componentDidUpdate() {
     console.log('Component re-rendered.');
@@ -145,9 +145,9 @@ class OnlyEvens extends React.Component {
   }
   shouldComponentUpdate(nextProps, nextState) {
     console.log('Should I update?');
-    // change code below this line
+    // Change code below this line
     return nextProps.value % 2 === 0;
-    // change code above this line
+    // Change code above this line
   }
   componentDidUpdate() {
     console.log('Component re-rendered.');

curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md

@@ -52,9 +52,9 @@ class ShoppingCart extends React.Component {
     super(props);
   }
   render() {
-    { /* change code below this line */ }
+    { /* Change code below this line */ }
     return <Items />
-    { /* change code above this line */ }
+    { /* Change code above this line */ }
   }
 };
 ```
@@ -91,9 +91,9 @@ class ShoppingCart extends React.Component {
     super(props);
   }
   render() {
-    { /* change code below this line */ }
+    { /* Change code below this line */ }
     return <Items quantity = {10} />
-    { /* change code above this line */ }
+    { /* Change code above this line */ }
   }
 };
 ```

curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md

@@ -59,9 +59,9 @@ class MyApp extends React.Component {
   render() {
     return (
        <div>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
 
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
        </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md

@@ -66,9 +66,9 @@ tests:
 
 ```jsx
 const List = (props) => {
-  { /* change code below this line */ }
+  { /* Change code below this line */ }
   return <p>{}</p>
-  { /* change code above this line */ }
+  { /* Change code above this line */ }
 };
 
 class ToDo extends React.Component {
@@ -80,11 +80,11 @@ class ToDo extends React.Component {
       <div>
         <h1>To Do Lists</h1>
         <h2>Today</h2>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <List/>
         <h2>Tomorrow</h2>
         <List/>
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md

@@ -63,9 +63,9 @@ tests:
 const CurrentDate = (props) => {
   return (
     <div>
-      { /* change code below this line */ }
+      { /* Change code below this line */ }
       <p>The current date is: </p>
-      { /* change code above this line */ }
+      { /* Change code above this line */ }
     </div>
   );
 };
@@ -78,9 +78,9 @@ class Calendar extends React.Component {
     return (
       <div>
         <h3>What date is it?</h3>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <CurrentDate />
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }
@@ -109,9 +109,9 @@ ReactDOM.render(<Calendar />, document.getElementById('root'))
 const CurrentDate = (props) => {
   return (
     <div>
-      { /* change code below this line */ }
+      { /* Change code below this line */ }
       <p>The current date is: {props.date}</p>
-      { /* change code above this line */ }
+      { /* Change code above this line */ }
     </div>
   );
 };
@@ -124,9 +124,9 @@ class Calendar extends React.Component {
     return (
       <div>
         <h3>What date is it?</h3>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <CurrentDate date={Date()} />
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md

@@ -15,7 +15,7 @@ This pattern illustrates some important paradigms in React. The first is <em>uni
 
 ## Instructions
 <section id='instructions'>
-The <code>MyApp</code> component is stateful and renders a <code>Navbar</code> component as a child. Pass the <code>name</code> property in its <code>state</code> down to the child component, then show the <code>name</code> in the <code>h1</code> tag that's part of the <code>Navbar</code> render method.
+The <code>MyApp</code> component is stateful and renders a <code>Navbar</code> component as a child. Pass the <code>name</code> property in its <code>state</code> down to the child component, then show the <code>name</code> in the <code>h1</code> tag that's part of the <code>Navbar</code> render method. <code>name</code> should appear after the text <code>Hello, my name is: </code>.
 </section>
 
 ## Tests
@@ -50,7 +50,9 @@ class MyApp extends React.Component {
   render() {
     return (
        <div>
-         <Navbar /* your code here */ />
+         {/* Change code below this line */}
+         <Navbar />
+         {/* Change code above this line */}
        </div>
     );
   }
@@ -63,7 +65,9 @@ class Navbar extends React.Component {
   render() {
     return (
     <div>
-      <h1>Hello, my name is: {/* your code here */} </h1>
+      {/* Change code below this line */}
+      <h1>Hello, my name is: </h1>
+      {/* Change code above this line */}
     </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md

@@ -51,15 +51,15 @@ class TypesOfFood extends React.Component {
     return (
       <div>
         <h1>Types of Food:</h1>
-        {/* change code below this line */}
+        {/* Change code below this line */}
 
-        {/* change code above this line */}
+        {/* Change code above this line */}
       </div>
     );
   }
 };
 
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -124,16 +124,16 @@ class TypesOfFood extends React.Component {
     return (
       <div>
         <h1>Types of Food:</h1>
-        {/* change code below this line */}
+        {/* Change code below this line */}
           <Fruits />
            <Vegetables />
-         {/* change code above this line */}
+         {/* Change code above this line */}
       </div>
     );
   }
 };
 
-// change code below this line
+// Change code below this line
 ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));
 ```
 

curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md

@@ -18,7 +18,7 @@ In this challenge, you'll set up a child component to make rendering decisions b
 <section id='instructions'>
 The code editor has two components that are partially defined for you: a parent called <code>GameOfChance</code>, and a child called <code>Results</code>. They are used to create a simple game where the user presses a button to see if they win or lose.
 First, you'll need a simple expression that randomly returns a different value every time it is run. You can use <code>Math.random()</code>. This method returns a value between <code>0</code> (inclusive) and <code>1</code> (exclusive) each time it is called. So for 50/50 odds, use <code>Math.random() >= .5</code> in your expression. Statistically speaking, this expression will return <code>true</code> 50% of the time, and <code>false</code> the other 50%. On line 30, replace the comment with this expression to complete the variable declaration.
-Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the <code>Results</code> component as a child of <code>GameOfChance</code>, and pass in <code>expression</code> as a prop called <code>fiftyFifty</code>. In the <code>Results</code> component, write a ternary expression to render the text <code>"You Win!"</code> or <code>"You Lose!"</code> based on the <code>fiftyFifty</code> prop that's being passed in from <code>GameOfChance</code>. Finally, make sure the <code>handleClick()</code> method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.
+Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the <code>Results</code> component as a child of <code>GameOfChance</code>, and pass in <code>expression</code> as a prop called <code>fiftyFifty</code>. In the <code>Results</code> component, write a ternary expression to render the <code>h1</code> element with the text <code>"You Win!"</code> or <code>"You Lose!"</code> based on the <code>fiftyFifty</code> prop that's being passed in from <code>GameOfChance</code>. Finally, make sure the <code>handleClick()</code> method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.
 </section>
 
 ## Tests
@@ -186,7 +186,9 @@ class Results extends React.Component {
     super(props);
   }
   render() {
-    return <h1>{/* change code here */}</h1>;
+    {/* Change code below this line */}
+    return <h1></h1>;
+    {/* Change code above this line */}
   }
 }
 
@@ -200,17 +202,17 @@ class GameOfChance extends React.Component {
   }
   handleClick() {
     this.setState({
-      counter: 0 // change code here
+      counter: 0 // Change this line
     });
   }
   render() {
-    const expression = null; // change code here
+    const expression = null; // Change this line
     return (
       <div>
         <button onClick={this.handleClick}>Play Again</button>
-        {/* change code below this line */}
+        {/* Change code below this line */}
 
-        {/* change code above this line */}
+        {/* Change code above this line */}
         <p>{'Turn: ' + this.state.counter}</p>
       </div>
     );

curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md

@@ -48,7 +48,7 @@ const JSX = (
     <p>Lets render this to the DOM</p>
   </div>
 );
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -69,7 +69,7 @@ const JSX = (
   <p>Lets render this to the DOM</p>
 </div>
 );
-// change code below this line
+// Change code below this line
 ReactDOM.render(JSX, document.getElementById('challenge-node'));
 ```
 

curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md

@@ -45,7 +45,7 @@ class App extends React.Component {
   }
 };
 
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -85,7 +85,7 @@ class App extends React.Component {
   }
 };
 
-// change code below this line
+// Change code below this line
 ReactDOMServer.renderToString(<App/>);
 ```
 

curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md

@@ -49,14 +49,14 @@ class MyComponent extends React.Component {
     }
   }
   render() {
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
     return (
       <div>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
 
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }
@@ -90,14 +90,14 @@ class MyComponent extends React.Component {
     }
   }
   render() {
-    // change code below this line
+    // Change code below this line
     const name = this.state.name;
-    // change code above this line
+    // Change code above this line
     return (
       <div>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <h1>{name}</h1>
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md

@@ -53,9 +53,9 @@ class MyComponent extends React.Component {
   render() {
     return (
       <div>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
 
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }
@@ -91,9 +91,9 @@ class MyComponent extends React.Component {
   render() {
     return (
       <div>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <h1>{this.state.name}</h1>
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md

@@ -55,7 +55,7 @@ class MyComponent extends React.Component {
     }));
   }
   render() {
-    // change code below this line
+    // Change code below this line
 
     return (
        <div>
@@ -100,7 +100,7 @@ class MyComponent extends React.Component {
     }));
   }
   render() {
-    // change code below this line
+    // Change code below this line
     if (this.state.display) {
       return (
          <div>

curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md

@@ -56,7 +56,7 @@ class CampSite extends React.Component {
     );
   }
 };
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -101,7 +101,7 @@ class CampSite extends React.Component {
     );
   }
 };
-// change code below this line
+// Change code below this line
 
 const Camper = (props) => {
    return (

curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md

@@ -58,9 +58,9 @@ class MyComponent extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
   handleClick() {
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
   }
   render() {
     return (
@@ -101,11 +101,11 @@ class MyComponent extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
   handleClick() {
-     // change code below this line
+     // Change code below this line
     this.setState({
       name: 'React Rocks!'
     });
-    // change code above this line
+    // Change code above this line
   }
   render() {
     return (

curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md

@@ -56,7 +56,7 @@ class MyComponent extends React.Component {
     }));
   }
   render() {
-    // change code below this line
+    // Change code below this line
     return (
        <div>
          <button onClick={this.toggleDisplay}>Toggle Display</button>
@@ -100,7 +100,7 @@ class MyComponent extends React.Component {
     }));
   }
   render() {
-    // change code below this line
+    // Change code below this line
     return (
        <div>
          <button onClick={this.toggleDisplay}>Toggle Display</button>

curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md

@@ -154,9 +154,9 @@ const inputStyle = {
 class CheckUserAge extends React.Component {
   constructor(props) {
     super(props);
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
     this.submit = this.submit.bind(this);
     this.handleChange = this.handleChange.bind(this);
   }
@@ -185,7 +185,9 @@ class CheckUserAge extends React.Component {
           onChange={this.handleChange}
         />
         <br />
-        {/* change code here */}
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md

@@ -175,7 +175,7 @@ class MagicEightBall extends React.Component {
       'Outlook not so good',
       'Very doubtful'
     ];
-    const answer = 'change me!'; // << change code here
+    const answer = 'change me!'; // Change this line
     return (
       <div>
         <input
@@ -189,9 +189,9 @@ class MagicEightBall extends React.Component {
         <br />
         <h3>Answer:</h3>
         <p>
-          {/* change code below this line */}
+          {/* Change code below this line */}
 
-          {/* change code above this line */}
+          {/* Change code above this line */}
         </p>
       </div>
     );

curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md

@@ -139,8 +139,8 @@ class MyComponent extends React.Component {
     };
   }
   render() {
-    const usersOnline = null; // change code here
+    const usersOnline = null; // Change this line
-    const renderOnline = null; // change code here
+    const renderOnline = null; // Change this line
     return (
       <div>
         <h1>Current Online Users:</h1>

curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md

@@ -109,9 +109,9 @@ const textAreaStyles = {
 class MyToDoList extends React.Component {
   constructor(props) {
     super(props);
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleChange = this.handleChange.bind(this);
   }
@@ -127,7 +127,7 @@ class MyToDoList extends React.Component {
     });
   }
   render() {
-    const items = null; // change code here
+    const items = null; // Change this line
     return (
       <div>
         <textarea

curriculum/challenges/english/03-front-end-libraries/react/use-default-props.english.md

@@ -43,7 +43,7 @@ const ShoppingCart = (props) => {
     </div>
   )
 };
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -74,7 +74,7 @@ const ShoppingCart = (props) => {
   )
 };
 
-// change code below this line
+// Change code below this line
 ShoppingCart.defaultProps = {
   items: 0
 }

curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.english.md

@@ -49,9 +49,9 @@ const Items = (props) => {
   return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
 };
 
-// change code below this line
+// Change code below this line
 
-// change code above this line
+// Change code above this line
 
 Items.defaultProps = {
   quantity: 0
@@ -101,11 +101,11 @@ const Items = (props) => {
   return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
 };
 
-// change code below this line
+// Change code below this line
 Items.propTypes = {
   quantity: PropTypes.number.isRequired
 };
-// change code above this line
+// Change code above this line
 
 Items.defaultProps = {
   quantity: 0

curriculum/challenges/english/03-front-end-libraries/react/use-react-to-render-nested-components.english.md

@@ -58,9 +58,9 @@ const TypesOfFruit = () => {
 const Fruits = () => {
   return (
     <div>
-      { /* change code below this line */ }
+      { /* Change code below this line */ }
 
-      { /* change code above this line */ }
+      { /* Change code above this line */ }
     </div>
   );
 };
@@ -74,9 +74,9 @@ class TypesOfFood extends React.Component {
     return (
       <div>
         <h1>Types of Food:</h1>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
 
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }
@@ -119,9 +119,9 @@ const TypesOfFruit = () => {
 const Fruits = () => {
   return (
     <div>
-      { /* change code below this line */ }
+      { /* Change code below this line */ }
         <TypesOfFruit />
-      { /* change code above this line */ }
+      { /* Change code above this line */ }
     </div>
   );
 };
@@ -135,9 +135,9 @@ class TypesOfFood extends React.Component {
     return (
       <div>
         <h1>Types of Food:</h1>
-        { /* change code below this line */ }
+        { /* Change code below this line */ }
         <Fruits />
-        { /* change code above this line */ }
+        { /* Change code above this line */ }
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.english.md

@@ -97,13 +97,13 @@ class MyComponent extends React.Component {
     this.state = {
       visibility: false
     };
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
   }
-  // change code below this line
+  // Change code below this line
 
-  // change code above this line
+  // Change code above this line
   render() {
     if (this.state.visibility) {
       return (

curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.english.md

@@ -16,7 +16,7 @@ The best practice with React is to place API calls or any calls to your server i
 ## Instructions
 
 <section id='instructions'>
-There is a mock API call in <code>componentDidMount()</code>. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of <code>activeUsers</code> in the <code>h1</code>. Watch what happens in the preview, and feel free to change the timeout to see the different effects.
+There is a mock API call in <code>componentDidMount()</code>. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of <code>activeUsers</code> in the <code>h1</code> after the text <code>Active Users: </code>. Watch what happens in the preview, and feel free to change the timeout to see the different effects.
 </section>
 
 ## Tests
@@ -71,7 +71,9 @@ class MyComponent extends React.Component {
   render() {
     return (
       <div>
-        <h1>Active Users: {/* change code here */}</h1>
+        {/* Change code below this line */}
+        <h1>Active Users: </h1>
+        {/* Change code below this line */}
       </div>
     );
   }

curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md

@@ -52,9 +52,9 @@ class MyComponent extends React.Component {
     super(props);
   }
   componentWillMount() {
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
   }
   render() {
     return <div />
@@ -86,9 +86,9 @@ class MyComponent extends React.Component {
     super(props);
   }
   componentWillMount() {
-    // change code below this line
+    // Change code below this line
     console.log('Component is mounting...');
-    // change code above this line
+    // Change code above this line
   }
   render() {
     return <div />

curriculum/challenges/english/03-front-end-libraries/react/write-a-react-component-from-scratch.english.md

@@ -40,7 +40,7 @@ tests:
 <div id='jsx-seed'>
 
 ```jsx
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -55,7 +55,7 @@ tests:
 
 
 ```js
-// change code below this line
+// Change code below this line
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.english.md

@@ -49,13 +49,13 @@ class Counter extends React.Component {
     this.state = {
       count: 0
     };
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
   }
-  // change code below this line
+  // Change code below this line
 
-  // change code above this line
+  // Change code above this line
   render() {
     return (
       <div>

curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md

@@ -83,7 +83,7 @@ const authReducer = (state = {authenticated: false}, action) => {
   }
 };
 
-const rootReducer = // define the root reducer here
+const rootReducer = // Define the root reducer here
 
 const store = Redux.createStore(rootReducer);
 

curriculum/challenges/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.english.md

@@ -52,7 +52,7 @@ const defaultState = {
 const immutableReducer = (state = defaultState, action) => {
   switch(action.type) {
     case 'ONLINE':
-      // don't mutate state here or the tests will fail
+      // Don't mutate state here or the tests will fail
       return
     default:
       return state;

curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.english.md

@@ -48,7 +48,6 @@ const reducer = (state = 5) => {
 // For example: Redux.createStore()
 // Define the store here:
 
-
 ```
 
 </div>
@@ -66,10 +65,6 @@ const reducer = (state = 5) => {
   return state;
 }
 
-// Redux methods are available from a Redux object
-// For example: Redux.createStore()
-// Define the store here:
-
 const store = Redux.createStore(reducer);
 ```
 

curriculum/challenges/english/03-front-end-libraries/redux/define-an-action-creator.english.md

@@ -59,7 +59,6 @@ const action = {
 const action = {
   type: 'LOGIN'
 }
-// Define an action creator here:
 const actionCreator = () => {
   return action;
 };

curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md

@@ -80,7 +80,6 @@ const loginAction = () => {
   }
 };
 
-// Dispatch the action here:
 store.dispatch(loginAction());
 ```
 

curriculum/challenges/english/03-front-end-libraries/redux/get-state-from-the-redux-store.english.md

@@ -40,7 +40,7 @@ const store = Redux.createStore(
   (state = 5) => state
 );
 
-// change code below this line
+// Change code below this line
 
 ```
 
@@ -59,7 +59,7 @@ const store = Redux.createStore(
   (state = 5) => state
 );
 
-// change code below this line
+// Change code below this line
 const currentState = store.getState();
 ```
 

curriculum/challenges/english/03-front-end-libraries/redux/handle-an-action-in-the-store.english.md

@@ -46,9 +46,9 @@ const defaultState = {
 };
 
 const reducer = (state = defaultState, action) => {
-  // change code below this line
+  // Change code below this line
 
-  // change code above this line
+  // Change code above this line
 };
 
 const store = Redux.createStore(reducer);

curriculum/challenges/english/03-front-end-libraries/redux/never-mutate-state.english.md

@@ -53,14 +53,13 @@ const todos = [
 const immutableReducer = (state = todos, action) => {
   switch(action.type) {
     case ADD_TO_DO:
-      // don't mutate state here or the tests will fail
+      // Don't mutate state here or the tests will fail
       return
     default:
       return state;
   }
 };
 
-// an example todo argument would be 'Learn React',
 const addToDo = (todo) => {
   return {
     type: ADD_TO_DO,
@@ -84,7 +83,6 @@ const store = Redux.createStore(immutableReducer);
 ```js
 const ADD_TO_DO = 'ADD_TO_DO';
 
-// A list of strings representing tasks to do:
 const todos = [
   'Go to the store',
   'Clean the house',
@@ -101,7 +99,6 @@ const immutableReducer = (state = todos, action) => {
   }
 };
 
-// an example todo argument would be 'Learn React',
 const addToDo = (todo) => {
   return {
     type: ADD_TO_DO,

curriculum/challenges/english/03-front-end-libraries/redux/register-a-store-listener.english.md

@@ -51,12 +51,12 @@ const reducer = (state = 0, action) => {
 
 const store = Redux.createStore(reducer);
 
-// global count variable:
+// Global count variable:
 let count = 0;
 
-// change code below this line
+// Change code below this line
 
-// change code above this line
+// Change code above this line
 
 store.dispatch({type: ADD});
 console.log(count);
@@ -98,7 +98,7 @@ const reducer = (state = 0, action) => {
 
 const store = Redux.createStore(reducer);
  let count = 0;
-// change code below this line
+// Change code below this line
 
 store.subscribe( () =>
  {
@@ -106,7 +106,7 @@ store.subscribe( () =>
  }
 );
 
-// change code above this line
+// Change code above this line
 
 store.dispatch({type: ADD});
 store.dispatch({type: ADD});

curriculum/challenges/english/03-front-end-libraries/redux/remove-an-item-from-an-array.english.md

@@ -41,7 +41,7 @@ tests:
 const immutableReducer = (state = [0,1,2,3,4,5], action) => {
   switch(action.type) {
     case 'REMOVE_ITEM':
-      // don't mutate state here or the tests will fail
+      // Don't mutate state here or the tests will fail
       return
     default:
       return state;

curriculum/challenges/english/03-front-end-libraries/redux/send-action-data-to-the-store.english.md

@@ -42,18 +42,18 @@ const ADD_NOTE = 'ADD_NOTE';
 
 const notesReducer = (state = 'Initial State', action) => {
   switch(action.type) {
-    // change code below this line
+    // Change code below this line
 
-    // change code above this line
+    // Change code above this line
     default:
       return state;
   }
 };
 
 const addNoteText = (note) => {
-  // change code below this line
+  // Change code below this line
 
-  // change code above this line
+  // Change code above this line
 };
 
 const store = Redux.createStore(notesReducer);
@@ -78,22 +78,22 @@ const ADD_NOTE = 'ADD_NOTE';
 
 const notesReducer = (state = 'Initial State', action) => {
   switch(action.type) {
-    // change code below this line
+    // Change code below this line
     case ADD_NOTE:
       return action.text;
-    // change code above this line
+    // Change code above this line
     default:
       return state;
   }
 };
 
 const addNoteText = (note) => {
-  // change code below this line
+  // Change code below this line
   return {
     type: ADD_NOTE,
     text: note
   }
-  // change code above this line
+  // Change code above this line
 };
 
 const store = Redux.createStore(notesReducer);

curriculum/challenges/english/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.english.md

@@ -50,9 +50,9 @@ const defaultState = {
 };
 
 const authReducer = (state = defaultState, action) => {
-  // change code below this line
+  // Change code below this line
 
-  // change code above this line
+  // Change code above this line
 };
 
 const store = Redux.createStore(authReducer);

curriculum/challenges/english/03-front-end-libraries/redux/use-const-for-action-types.english.md

@@ -49,9 +49,9 @@ tests:
 <div id='jsx-seed'>
 
 ```jsx
-// change code below this line
+// Change code below this line
 
-// change code above this line
+// Change code above this line
 
 const defaultState = {
   authenticated: false

curriculum/challenges/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.english.md

@@ -53,13 +53,13 @@ const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users}
 
 const handleAsync = () => {
   return function(dispatch) {
-    // dispatch request action here
+    // Dispatch request action here
 
     setTimeout(function() {
       let data = {
         users: ['Jeff', 'William', 'Alice']
       }
-      // dispatch received data action here
+      // Dispatch received data action here
 
     }, 2500);
   }

curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.english.md

@@ -45,7 +45,7 @@ tests:
 const immutableReducer = (state = ['Do not mutate state!'], action) => {
   switch(action.type) {
     case 'ADD_TO_DO':
-      // don't mutate state here or the tests will fail
+      // Don't mutate state here or the tests will fail
       return
     default:
       return state;

curriculum/challenges/english/03-front-end-libraries/redux/write-a-counter-with-redux.english.md

@@ -44,16 +44,16 @@ tests:
 <div id='jsx-seed'>
 
 ```jsx
-const INCREMENT = null; // define a constant for increment action types
+const INCREMENT = null; // Define a constant for increment action types
-const DECREMENT = null; // define a constant for decrement action types
+const DECREMENT = null; // Define a constant for decrement action types
 
-const counterReducer = null; // define the counter reducer which will increment or decrement the state based on the action it receives
+const counterReducer = null; // Define the counter reducer which will increment or decrement the state based on the action it receives
 
-const incAction = null; // define an action creator for incrementing
+const incAction = null; // Define an action creator for incrementing
 
-const decAction = null; // define an action creator for decrementing
+const decAction = null; // Define an action creator for decrementing
 
-const store = null; // define the Redux store here, passing in your reducers
+const store = null; // Define the Redux store here, passing in your reducers
 ```
 
 </div>