minor <code> tag fixes (#39046)

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md

@@ -17,7 +17,7 @@ Certain elements, such as links and form controls, automatically receive keyboar
 
 ## Instructions
 <section id='instructions'>
-Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a <code>tabindex</code> attribute to the <code>p</code> tag and set its value to "0". Bonus - using <code>tabindex</code> also enables the CSS pseudo-class <code>:focus</code> to work on the <code>p</code> tag.
+Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a <code>tabindex</code> attribute to the <code>p</code> tag and set its value to <code>"0"</code>. Bonus - using <code>tabindex</code> also enables the CSS pseudo-class <code>:focus</code> to work on the <code>p</code> tag.
 </section>
 
 ## Tests

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.english.md

@@ -10,7 +10,7 @@ forumTopicId: 301028
 ## Description
 <section id='description'>
 The <code>tabindex</code> attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.
-Setting a tabindex="1" will bring keyboard focus to that element first. Then it cycles through the sequence of specified <code>tabindex</code> values (2, 3, etc.), before moving to default and <code>tabindex="0"</code> items.
+Setting a <code>tabindex="1"</code> will bring keyboard focus to that element first. Then it cycles through the sequence of specified <code>tabindex</code> values (2, 3, etc.), before moving to default and <code>tabindex="0"</code> items.
 It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it.
 Here's an example:
 <code>&lt;div tabindex=&quot;1&quot;&gt;I get keyboard focus, and I get it first!&lt;/div&gt;</code>
@@ -19,7 +19,7 @@ Here's an example:
 
 ## Instructions
 <section id='instructions'>
-Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search <code>input</code> and submit <code>input</code> form controls to be the first two items in the tab order. Add a <code>tabindex</code> attribute set to "1" to the search <code>input</code>, and a <code>tabindex</code> attribute set to "2" to the submit <code>input</code>.
+Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search <code>input</code> and submit <code>input</code> form controls to be the first two items in the tab order. Add a <code>tabindex</code> attribute set to <code>"1"</code> to the search <code>input</code>, and a <code>tabindex</code> attribute set to <code>"2"</code> to the submit <code>input</code>.
 </section>
 
 ## Tests

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

@@ -14,7 +14,7 @@ The last challenge introduced the <code>align-items</code> property and gave an
 
 ## Instructions
 <section id='instructions'>
-Add the CSS property <code>align-items</code> to the header's <code>.follow-btn</code> element. Set the value to center.
+Add the CSS property <code>align-items</code> to the header's <code>.follow-btn</code> element. Set the value to <code>center</code>.
 </section>
 
 ## Tests

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

@@ -9,7 +9,7 @@ forumTopicId: 301109
 
 ## Description
 <section id='description'>
-The last two challenges used the <code>flex-direction</code> property set to row. This property can also create a column by vertically stacking the children of a flex container.
+The last two challenges used the <code>flex-direction</code> property set to <code>row</code>. This property can also create a column by vertically stacking the children of a flex container.
 </section>
 
 ## Instructions

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

@@ -10,7 +10,7 @@ forumTopicId: 301110
 ## Description
 <section id='description'>
 Adding <code>display: flex</code> to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the <code>flex-direction</code> property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.
-Other options for <code>flex-direction</code> are row-reverse and column-reverse.
+Other options for <code>flex-direction</code> are <code>row-reverse</code> and <code>column-reverse</code>.
 <strong>Note:</strong> The default value for the <code>flex-direction</code> property is <code>row</code>.
 </section>
 

curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md

@@ -20,7 +20,7 @@ Remember, the CSS inside the media query is applied only if the media type match
 
 ## Instructions
 <section id='instructions'>
-Add a media query, so that the <code>p</code> tag has a <code>font-size</code> of 10px when the device's height is less than or equal to 800px.
+Add a media query, so that the <code>p</code> tag has a <code>font-size</code> of <code>10px</code> when the device's height is less than or equal to <code>800px</code>.
 </section>
 
 ## Tests

curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md

@@ -25,7 +25,7 @@ Here is an example of an image that is only using half of the original height an
 
 ## Instructions
 <section id='instructions'>
-Set the <code>width</code> and <code>height</code> of the <code>img</code> tag to half of their original values. In this case, both the original <code>height</code> and the original <code>width</code> are 200px.
+Set the <code>width</code> and <code>height</code> of the <code>img</code> tag to half of their original values. In this case, both the original <code>height</code> and the original <code>width</code> are <code>200px</code>.
 </section>
 
 ## Tests