diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md
index b8783b7a0b..9c7117f3fd 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md
+++ b/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
-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 tabindex
attribute to the p
tag and set its value to "0". Bonus - using tabindex
also enables the CSS pseudo-class :focus
to work on the p
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 tabindex
attribute to the p
tag and set its value to "0"
. Bonus - using tabindex
also enables the CSS pseudo-class :focus
to work on the p
tag.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.english.md
index 3baef6b7f7..ee482cb93f 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.english.md
+++ b/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
The tabindex
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 tabindex
values (2, 3, etc.), before moving to default and tabindex="0"
items.
+Setting a tabindex="1"
will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex
values (2, 3, etc.), before moving to default and tabindex="0"
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:
<div tabindex="1">I get keyboard focus, and I get it first!</div>
@@ -19,7 +19,7 @@ Here's an example:
## 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 input
and submit input
form controls to be the first two items in the tab order. Add a tabindex
attribute set to "1" to the search input
, and a tabindex
attribute set to "2" to the submit input
.
+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 input
and submit input
form controls to be the first two items in the tab order. Add a tabindex
attribute set to "1"
to the search input
, and a tabindex
attribute set to "2"
to the submit input
.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md
index b255e83705..b215cef401 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md
+++ b/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 align-items
property and gave an
## Instructions
-Add the CSS property align-items
to the header's .follow-btn
element. Set the value to center.
+Add the CSS property align-items
to the header's .follow-btn
element. Set the value to center
.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md
index 025346c29d..223aabad1f 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md
+++ b/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
-The last two challenges used the flex-direction
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 flex-direction
property set to row
. This property can also create a column by vertically stacking the children of a flex container.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md
index 6dedf7d9f8..97f737928e 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md
+++ b/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
Adding display: flex
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 flex-direction
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 flex-direction
are row-reverse and column-reverse.
+Other options for flex-direction
are row-reverse
and column-reverse
.
Note: The default value for the flex-direction
property is row
.
diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
index c1a810d63d..7ba6418af7 100644
--- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
@@ -20,7 +20,7 @@ Remember, the CSS inside the media query is applied only if the media type match
## Instructions
-Add a media query, so that the p
tag has a font-size
of 10px when the device's height is less than or equal to 800px.
+Add a media query, so that the p
tag has a font-size
of 10px
when the device's height is less than or equal to 800px
.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md
index 4b6be6825c..76a0caa09f 100644
--- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md
+++ b/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
-Set the width
and height
of the img
tag to half of their original values. In this case, both the original height
and the original width
are 200px.
+Set the width
and height
of the img
tag to half of their original values. In this case, both the original height
and the original width
are 200px
.
## Tests