diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md index e99e1e7419..e6510c819c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md @@ -11,11 +11,11 @@ dashedName: jump-straight-to-the-content-using-the-main-element HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include `main`, `header`, `footer`, `nav`, `article`, and `section`, among others. -By default, a browser renders these elements similarly to the humble `div`. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users. +By default, a browser renders these elements similar to the humble `div`. However, using them where appropriate gives additional meaning to your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users. The `main` element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners. -The `main` tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a "Jump to Main Content" link at the top of a page, using a `main` tag automatically gives assistive devices that functionality. +The `main` tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a "Jump to Main Content" link at the top of a page, using the `main` tag automatically gives assistive devices that functionality. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md index 0d555c0b7f..e3dec48008 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md @@ -9,7 +9,7 @@ dashedName: use-tabindex-to-add-keyboard-focus-to-an-element # --description-- -The HTML `tabindex` attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior. +The HTML `tabindex` attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that the element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior. Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as `div`, `span`, and `p`, by placing a `tabindex="0"` attribute on them. Here's an example: diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md index da4665201c..2720b80e4a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md @@ -11,7 +11,7 @@ dashedName: wrap-content-in-the-article-element `article` is another one of the new HTML5 elements that adds semantic meaning to your markup. `article` is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles. -Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed? +Determining whether content can stand alone is usually a judgement call, but there are a couple of simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed? Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work. diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md index 3b8248b61b..a39cc7d2c0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md @@ -9,7 +9,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility # --description-- -The next form topic covers accessibility of radio buttons. Each choice is given a `label` with a `for` attribute tying to the `id` of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set. +The next form topic covers the accessibility of radio buttons. Each choice is given a `label` with a `for` attribute tying to the `id` of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set. The `fieldset` tag surrounds the entire grouping of radio buttons to achieve this. It often uses a `legend` tag to provide a description for the grouping, which is read by screen readers for each choice in the `fieldset` element. diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md index 5884593440..a57c1732b6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md @@ -9,7 +9,7 @@ dashedName: add-flex-superpowers-to-the-tweet-embed # --description-- -To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated `display: flex`. Here you'll add it to several components in the tweet embed to start adjusting their positioning. +To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated `display: flex`. Here you'll add it to several components in the tweet embed to start adjusting their positioning. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md index ad38f48883..4a96f7fd57 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md @@ -17,7 +17,7 @@ Use `grid-gap` to introduce a `10px` gap between the rows and `20px` gap between # --hints-- -`container` class should have a `grid-gap` property that introduces `10px` gap between the rows and `20px` gap between the columns. +`container` class should have a `grid-gap` property that introduces a `10px` gap between the rows and a `20px` gap between the columns. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md index 6bd5fbbfec..80cc7894d3 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md @@ -9,7 +9,7 @@ dashedName: add-rows-with-grid-template-rows # --description-- -The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in previous challenge. +The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in the previous challenge. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md index 2edee89c30..89449f45de 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md @@ -19,7 +19,7 @@ In the second grid, use `auto-fit` with `repeat` to fill the grid with columns t # --hints-- -`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. +`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and a maximum of `1fr`. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md index 10405b6f4c..61f66cc3bf 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md @@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property # --description-- -After creating an area's template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this: +After creating an area template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this: ```css .item1 { diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md index a1d7c30a70..42a72dcd35 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md @@ -17,7 +17,7 @@ This is what the lines look like for a 3x3 grid:

column lines

1

2

3

4

row lines

1

2

3

4

-To control the amount of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at. +To control the number of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at. Here's an example: