fix: Wrap codes with <code> tags in css-flexbox challenge. (#38025)

curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.english.md

@@ -22,19 +22,19 @@ Add the CSS property <code>display: flex</code> to all of the following items -
 
 ```yml
 tests:
-  - text: Your <code>header</code> should have a <code>display</code> property set to flex.
+  - text: Your <code>header</code> should have a <code>display</code> property set to <code>flex</code>.
     testString: assert($('header').css('display') == 'flex');
-  - text: Your <code>footer</code> should have a <code>display</code> property set to flex.
+  - text: Your <code>footer</code> should have a <code>display</code> property set to <code>flex</code>.
     testString: assert($('footer').css('display') == 'flex');
-  - text: Your <code>h3</code> should have a <code>display</code> property set to flex.
+  - text: Your <code>h3</code> should have a <code>display</code> property set to <code>flex</code>.
     testString: assert($('h3').css('display') == 'flex');
-  - text: Your <code>h4</code> should have a <code>display</code> property set to flex.
+  - text: Your <code>h4</code> should have a <code>display</code> property set to <code>flex</code>.
     testString: assert($('h4').css('display') == 'flex');
-  - text: Your <code>.profile-name</code> should have a <code>display</code> property set to flex.
+  - text: Your <code>.profile-name</code> should have a <code>display</code> property set to <code>flex</code>.
     testString: assert($('.profile-name').css('display') == 'flex');
-  - text: Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.
+  - text: Your <code>.follow-btn</code> should have a <code>display</code> property set to <code>flex</code>.
     testString: assert($('.follow-btn').css('display') == 'flex');
-  - text: Your <code>.stats</code> should have a <code>display</code> property set to flex.
+  - text: Your <code>.stats</code> should have a <code>display</code> property set to <code>flex</code>.
     testString: assert($('.stats').css('display') == 'flex');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md

@@ -17,8 +17,8 @@ The different values available for <code>align-items</code> include:
 
 ## Instructions
 <section id='instructions'>
-An example helps show this property in action. Add the CSS property <code>align-items</code> to the <code>#box-container</code> element, and give it a value of center.
+An example helps show this property in action. Add the CSS property <code>align-items</code> to the <code>#box-container</code> element, and give it a value of <code>center</code>.
-<strong>Bonus</strong><br>Try the other options for the <code>align-items</code> property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge.
+<strong>Bonus</strong><br>Try the other options for the <code>align-items</code> property in the code editor to see their differences. But note that a value of <code>center</code> is the only one that will pass this challenge.
 </section>
 
 ## Tests
@@ -26,7 +26,7 @@ An example helps show this property in action. Add the CSS property <code>align-
 
 ```yml
 tests:
-  - text: The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.
+  - text: The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of <code>center</code>.
     testString: assert($('#box-container').css('align-items') == 'center');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md

@@ -18,8 +18,8 @@ There are several options for how to space the flex items along the line that is
 
 ## Instructions
 <section id='instructions'>
-An example helps show this property in action. Add the CSS property <code>justify-content</code> to the <code>#box-container</code> element, and give it a value of center.
+An example helps show this property in action. Add the CSS property <code>justify-content</code> to the <code>#box-container</code> element, and give it a value of <code>center</code>.
-<strong>Bonus</strong><br>Try the other options for the <code>justify-content</code> property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge.
+<strong>Bonus</strong><br>Try the other options for the <code>justify-content</code> property in the code editor to see their differences. But note that a value of <code>center</code> is the only one that will pass this challenge.
 </section>
 
 ## Tests
@@ -27,7 +27,7 @@ An example helps show this property in action. Add the CSS property <code>justif
 
 ```yml
 tests:
-  - text: The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.
+  - text: The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of <code>center</code>.
     testString: assert($('#box-container').css('justify-content') == 'center');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md

@@ -14,7 +14,7 @@ Placing the CSS property <code>display: flex;</code> on an element allows you to
 
 ## Instructions
 <section id='instructions'>
-Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to flex.
+Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to <code>flex</code>.
 </section>
 
 ## Tests
@@ -22,7 +22,7 @@ Add the CSS property <code>display</code> to <code>#box-container</code> and set
 
 ```yml
 tests:
-  - text: <code>#box-container</code> should have the <code>display</code> property set to a value of flex.
+  - text: <code>#box-container</code> should have the <code>display</code> property set to a value of <code>flex</code>.
     testString: assert($('#box-container').css('display') == 'flex');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md

@@ -21,7 +21,7 @@ Add the CSS property <code>align-items</code> to the header's <code>.follow-btn<
 
 ```yml
 tests:
-  - text: The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.
+  - text: The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of <code>center</code>.
     testString: assert($('.follow-btn').css('align-items') == 'center');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md

@@ -14,7 +14,7 @@ The final property for flex items is <code>align-self</code>. This property allo
 
 ## Instructions
 <section id='instructions'>
-Add the CSS property <code>align-self</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of center and give <code>#box-2</code> a value of flex-end.
+Add the CSS property <code>align-self</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of <code>center</code> and give <code>#box-2</code> a value of <code>flex-end</code>.
 </section>
 
 ## Tests
@@ -22,9 +22,9 @@ Add the CSS property <code>align-self</code> to both <code>#box-1</code> and <co
 
 ```yml
 tests:
-  - text: The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.
+  - text: The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of <code>center</code>.
     testString: assert($('#box-1').css('align-self') == 'center');
-  - text: The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.
+  - text: The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of <code>flex-end</code>.
     testString: assert($('#box-2').css('align-self') == 'flex-end');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md

@@ -9,12 +9,12 @@ forumTopicId: 301111
 ## Description
 <section id='description'>
 The opposite of <code>flex-shrink</code> is the <code>flex-grow</code> property. Recall that <code>flex-shrink</code> controls the size of the items when the container shrinks. The <code>flex-grow</code> property controls the size of items when the parent container expands.
-Using a similar example from the last challenge, if one item has a <code>flex-grow</code> value of 1 and the other has a <code>flex-grow</code> value of 3, the one with the value of 3 will grow three times as much as the other.
+Using a similar example from the last challenge, if one item has a <code>flex-grow</code> value of <code>1</code> and the other has a <code>flex-grow</code> value of <code>3</code>, the one with the value of <code>3</code> will grow three times as much as the other.
 </section>
 
 ## Instructions
 <section id='instructions'>
-Add the CSS property <code>flex-grow</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 1 and <code>#box-2</code> a value of 2.
+Add the CSS property <code>flex-grow</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of <code>1</code> and <code>#box-2</code> a value of <code>2</code>.
 </section>
 
 ## Tests
@@ -22,9 +22,9 @@ Add the CSS property <code>flex-grow</code> to both <code>#box-1</code> and <cod
 
 ```yml
 tests:
-  - text: The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.
+  - text: The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of <code>1</code>.
     testString: assert($('#box-1').css('flex-grow') == '1');
-  - text: The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.
+  - text: The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of <code>2</code>.
     testString: assert($('#box-2').css('flex-grow') == '2');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md

@@ -15,7 +15,7 @@ The default property settings are <code>flex: 0 1 auto;</code>.
 
 ## Instructions
 <section id='instructions'>
-Add the CSS property <code>flex</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> the values so its <code>flex-grow</code> is 2, its <code>flex-shrink</code> is 2, and its <code>flex-basis</code> is 150px. Give <code>#box-2</code> the values so its <code>flex-grow</code> is 1, its <code>flex-shrink</code> is 1, and its <code>flex-basis</code> is 150px.
+Add the CSS property <code>flex</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> the values so its <code>flex-grow</code> is <code>2</code>, its <code>flex-shrink</code> is <code>2</code>, and its <code>flex-basis</code> is <code>150px</code>. Give <code>#box-2</code> the values so its <code>flex-grow</code> is <code>1</code>, its <code>flex-shrink</code> is <code>1</code>, and its <code>flex-basis</code> is <code>150px</code>.
 These values will cause <code>#box-1</code> to grow to fill the extra space at twice the rate of <code>#box-2</code> when the container is greater than 300px and shrink at twice the rate of <code>#box-2</code> when the container is less than 300px. 300px is the combined size of the <code>flex-basis</code> values of the two boxes.
 </section>
 
@@ -24,9 +24,9 @@ These values will cause <code>#box-1</code> to grow to fill the extra space at t
 
 ```yml
 tests:
-  - text: The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.
+  - text: The <code>#box-1</code> element should have the <code>flex</code> property set to a value of <code>2 2 150px</code>.
     testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px');
-  - text: The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.
+  - text: The <code>#box-2</code> element should have the <code>flex</code> property set to a value of <code>1 1 150px</code>.
     testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px');
   - text: Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.
     testString: assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md

@@ -10,12 +10,12 @@ forumTopicId: 301113
 <section id='description'>
 So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.
 The first is the <code>flex-shrink</code> property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.
-The <code>flex-shrink</code> property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a <code>flex-shrink</code> value of 1 and the other has a <code>flex-shrink</code> value of 3, the one with the value of 3 will shrink three times as much as the other.
+The <code>flex-shrink</code> property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a <code>flex-shrink</code> value of <code>1</code> and the other has a <code>flex-shrink</code> value of <code>3</code>, the one with the value of <code>3</code> will shrink three times as much as the other.
 </section>
 
 ## Instructions
 <section id='instructions'>
-Add the CSS property <code>flex-shrink</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 1 and <code>#box-2</code> a value of 2.
+Add the CSS property <code>flex-shrink</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of <code>1</code> and <code>#box-2</code> a value of <code>2</code>.
 </section>
 
 ## Tests
@@ -23,9 +23,9 @@ Add the CSS property <code>flex-shrink</code> to both <code>#box-1</code> and <c
 
 ```yml
 tests:
-  - text: The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.
+  - text: The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of <code>1</code>.
     testString: assert($('#box-1').css('flex-shrink') == '1');
-  - text: The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.
+  - text: The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of <code>2</code>.
     testString: assert($('#box-2').css('flex-shrink') == '2');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md

@@ -16,7 +16,7 @@ CSS also has options for the direction of the wrap:
 
 ## Instructions
 <section id='instructions'>
-The current layout has too many boxes for one row. Add the CSS property <code>flex-wrap</code> to the <code>#box-container</code> element, and give it a value of wrap.
+The current layout has too many boxes for one row. Add the CSS property <code>flex-wrap</code> to the <code>#box-container</code> element, and give it a value of <code>wrap</code>.
 </section>
 
 ## Tests
@@ -24,7 +24,7 @@ The current layout has too many boxes for one row. Add the CSS property <code>fl
 
 ```yml
 tests:
-  - text: The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.
+  - text: The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of <code>wrap</code>.
     testString: assert($('#box-container').css('flex-wrap') == 'wrap');
 
 ```

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md

@@ -13,7 +13,7 @@ The <code>order</code> property is used to tell CSS the order of how flex items
 
 ## Instructions
 <section id='instructions'>
-Add the CSS property <code>order</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 2 and give <code>#box-2</code> a value of 1.
+Add the CSS property <code>order</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of <code>2</code> and give <code>#box-2</code> a value of <code>1</code>.
 </section>
 
 ## Tests
@@ -21,9 +21,9 @@ Add the CSS property <code>order</code> to both <code>#box-1</code> and <code>#b
 
 ```yml
 tests:
-  - text: The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.
+  - text: The <code>#box-1</code> element should have the <code>order</code> property set to a value of <code>2</code>.
     testString: assert($('#box-1').css('order') == '2');
-  - text: The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.
+  - text: The <code>#box-2</code> element should have the <code>order</code> property set to a value of <code>1</code>.
     testString: assert($('#box-2').css('order') == '1');
 
 ```