diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md index 06ba5f8430..c85715a728 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md @@ -9,11 +9,11 @@ dashedName: add-an-accessible-date-picker # --description-- -Forms often include the `input` field, which can be used to create several different form controls. The `type` attribute on this element indicates what kind of input will be created. +Forms often include the `input` field, which can be used to create several different form controls. The `type` attribute on this element indicates what kind of `input` element will be created. You may have noticed the `text` and `submit` input types in prior challenges, and HTML5 introduced an option to specify a `date` field. Depending on browser support, a date picker shows up in the `input` field when it's in focus, which makes filling in a form easier for all users. -For older browsers, the type will default to `text`, so it helps to show users the expected date format in the label or as placeholder text just in case. +For older browsers, the type will default to `text`, so it helps to show users the expected date format in the `label` or `placeholder` text just in case. Here's an example: @@ -24,7 +24,7 @@ Here's an example: # --instructions-- -Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an `input` tag with a `type` attribute of "date", an `id` attribute of "pickdate", and a `name` attribute of "date". +Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an `input` tag with a `type` attribute of `date`, an `id` attribute of `pickdate`, and a `name` attribute of `date`. # --hints-- @@ -34,19 +34,19 @@ Your code should add one `input` tag for the date selector field. assert($('input').length == 2); ``` -Your `input` tag should have a `type` attribute with a value of date. +Your `input` tag should have a `type` attribute with a value of `date`. ```js assert($('input').attr('type') == 'date'); ``` -Your `input` tag should have an `id` attribute with a value of pickdate. +Your `input` tag should have an `id` attribute with a value of `pickdate`. ```js assert($('input').attr('id') == 'pickdate'); ``` -Your `input` tag should have a `name` attribute with a value of date. +Your `input` tag should have a `name` attribute with a value of `date`. ```js assert($('input').attr('name') == 'date'); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md index b0ba580a4c..839b17533d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md @@ -15,11 +15,11 @@ Screen readers do this by reading the link text, or what's between the anchor (` # --instructions-- -The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text "information about batteries" instead of "Click here". +The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text `information about batteries` instead of `Click here`. # --hints-- -Your code should move the anchor `a` tags from around the words "Click here" to wrap around the words "information about batteries". +Your code should move the anchor `a` tags from around the words `Click here` to wrap around the words `information about batteries`. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md index 75273d935f..65fc969ec5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -26,7 +26,7 @@ Here's an example: # --instructions-- -Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to "`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`" and `type` attribute set to "audio/mpeg". +Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`. **Note:** The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users. diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md index 2e59a85435..b010691d7e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md @@ -35,29 +35,29 @@ Here's an example of the CSS rules that accomplish this: # --instructions-- -Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an absolute value, the `left` a -10000px value, and the `width` and `height` both 1px values. +Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an `absolute` value, the `left` a `-10000px` value, and the `width` and `height` both `1px` values. # --hints-- -Your code should set the `position` property of the `sr-only` class to a value of absolute. +Your code should set the `position` property of the `sr-only` class to a value of `absolute`. ```js assert($('.sr-only').css('position') == 'absolute'); ``` -Your code should set the `left` property of the `sr-only` class to a value of -10000px. +Your code should set the `left` property of the `sr-only` class to a value of `-10000px`. ```js assert($('.sr-only').css('left') == '-10000px'); ``` -Your code should set the `width` property of the `sr-only` class to a value of 1 pixel. +Your code should set the `width` property of the `sr-only` class to a value of `1` pixel. ```js assert(code.match(/width:\s*?1px/gi)); ``` -Your code should set the `height` property of the `sr-only` class to a value of 1 pixel. +Your code should set the `height` property of the `sr-only` class to a value of `1` pixel. ```js assert(code.match(/height:\s*?1px/gi)); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md index a677e545fc..6793fd2963 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md @@ -19,29 +19,29 @@ Here's an example: # --instructions-- -Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an `accesskey` attribute to both links and set the first one to "g" (for Garfield) and the second one to "c" (for Chuck Norris). +Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an `accesskey` attribute to both links and set the first one to `g` (for Garfield) and the second one to `c` (for Chuck Norris). # --hints-- -Your code should add an `accesskey` attribute to the `a` tag with the `id` of "first". +Your code should add an `accesskey` attribute to the `a` tag with the `id` of `first`. ```js assert($('#first').attr('accesskey')); ``` -Your code should add an `accesskey` attribute to the `a` tag with the `id` of "second". +Your code should add an `accesskey` attribute to the `a` tag with the `id` of `second`. ```js assert($('#second').attr('accesskey')); ``` -Your code should set the `accesskey` attribute on the `a` tag with the `id` of "first" to "g". Note that case matters. +Your code should set the `accesskey` attribute on the `a` tag with the `id` of `first` to `g`. Note that case matters. ```js assert($('#first').attr('accesskey') == 'g'); ``` -Your code should set the `accesskey` attribute on the `a` tag with the `id` of "second" to "c". Note that case matters. +Your code should set the `accesskey` attribute on the `a` tag with the `id` of `second` to `c`. Note that case matters. ```js assert($('#second').attr('accesskey') == 'c'); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md index 1c6951933d..ffaf9a79e3 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md @@ -17,7 +17,7 @@ Here's an example: # --instructions-- -Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text "Thursday, September 15<sup>th</sup>" and add a `datetime` attribute to it set to "2016-09-15". +Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text `Thursday, September 15th` and add a `datetime` attribute to it set to `2016-09-15`. # --hints-- 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 1fdcfac175..0d555c0b7f 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 @@ -19,7 +19,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. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md index f3600a99da..6d5d096a09 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md @@ -23,29 +23,29 @@ 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`. # --hints-- -Your code should add a `tabindex` attribute to the search `input` tag. +Your code should add a `tabindex` attribute to the `search` `input` tag. ```js assert($('#search').attr('tabindex')); ``` -Your code should add a `tabindex` attribute to the submit `input` tag. +Your code should add a `tabindex` attribute to the `submit` `input` tag. ```js assert($('#submit').attr('tabindex')); ``` -Your code should set the `tabindex` attribute on the search `input` tag to a value of 1. +Your code should set the `tabindex` attribute on the `search` `input` tag to a value of 1. ```js assert($('#search').attr('tabindex') == '1'); ``` -Your code should set the `tabindex` attribute on the submit `input` tag to a value of 2. +Your code should set the `tabindex` attribute on the `submit` `input` tag to a value of 2. ```js assert($('#submit').attr('tabindex') == '2'); 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 f98fe6470e..da4665201c 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 @@ -15,14 +15,11 @@ Determining whether content can stand alone is usually a judgement call, but the Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work. -**Note about `section` and `div`** -The `section` element is also new with HTML5, and has a slightly different semantic meaning than `article`. An `article` is for standalone content, and a `section` is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the `article`, then each chapter is a `section`. When there's no relationship between groups of content, then use a `div`. +**Note:** The `section` element is also new with HTML5, and has a slightly different semantic meaning than `article`. An `article` is for standalone content, and a `section` is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the `article`, then each chapter is a `section`. When there's no relationship between groups of content, then use a `div`. -```html -
- groups content -
- groups related content -
- groups independent, self-contained content -``` +`
` - groups content +`
` - groups related content +`
` - groups independent, self-contained content # --instructions-- 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 1aa081f983..3b8248b61b 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 @@ -33,7 +33,7 @@ Here's an example: # --instructions-- -Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use label tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`. +Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use `label` tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md index f1859d62d8..3ff06f2003 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md @@ -27,19 +27,19 @@ Change the `background-color` of each `div` element based on the class names (`g # --hints-- -Your code should use the `hsl()` property to declare the color green. +Your code should use the `hsl()` property to declare the color `green`. ```js assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi)); ``` -Your code should use the `hsl()` property to declare the color cyan. +Your code should use the `hsl()` property to declare the color `cyan`. ```js assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi)); ``` -Your code should use the `hsl()` property to declare the color blue. +Your code should use the `hsl()` property to declare the color `blue`. ```js assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi)); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md index b2275fa79c..7ed75a1ea5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md @@ -9,7 +9,7 @@ dashedName: adjust-the-width-of-an-element-using-the-width-property # --description-- -You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px: +You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as `em`), absolute length units (such as `px`), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px: ```css img { diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md index 244d022c68..da2020f4d5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md @@ -11,7 +11,7 @@ dashedName: animate-elements-at-variable-rates There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an `animation-iteration-count` property and setting `@keyframes` rules. -To illustrate, the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates. +To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md index 5ea56292b5..c5eddca536 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md @@ -13,7 +13,7 @@ The previous challenges covered how to use some of the animation properties and `animation-iteration-count: 3;` -In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite. +In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`. # --instructions-- @@ -21,7 +21,7 @@ To keep the ball bouncing on the right on a continuous loop, change the `animati # --hints-- -The `animation-iteration-count` property should have a value of infinite. +The `animation-iteration-count` property should have a value of `infinite`. ```js assert($('#ball').css('animation-iteration-count') == 'infinite'); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md index 111c014dcd..7baaef275c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md @@ -11,7 +11,7 @@ dashedName: animate-multiple-elements-at-variable-rates In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements. -In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element. +In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md index 79a7288ac4..0fdf546832 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md @@ -11,15 +11,15 @@ dashedName: center-an-element-horizontally-using-the-margin-property Another positioning technique is to center a block element horizontally. One way to do this is to set its `margin` to a value of auto. -This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to block. +This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to `block`. # --instructions-- -Center the `div` on the page by adding a `margin` property with a value of auto. +Center the `div` on the page by adding a `margin` property with a value of `auto`. # --hints-- -The `div` should have a `margin` set to auto. +The `div` should have a `margin` set to `auto`. ```js assert(code.match(/margin:\s*?auto;/g)); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md index 2c9c8e5334..91d8545abd 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md @@ -20,7 +20,9 @@ p { } ``` -Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. **Note:** Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content. +Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. + +**Note:** Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md index 403c1b9aed..f4bc236532 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md @@ -19,7 +19,7 @@ For the elements with id of `ball1` and `ball2`, add an `animation-timing-functi # --hints-- -The value of the `animation-timing-function` property for the element with the id `ball1` should be linear. +The value of the `animation-timing-function` property for the element with the id `ball1` should be `linear`. ```js const ball1Animation = __helpers.removeWhiteSpace( @@ -28,7 +28,7 @@ const ball1Animation = __helpers.removeWhiteSpace( assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)'); ``` -The value of the `animation-timing-function` property for the element with the id `ball2` should be ease-out. +The value of the `animation-timing-function` property for the element with the id `ball2` should be `ease-out`. ```js const ball2Animation = __helpers.removeWhiteSpace( diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md index ebbe058c2e..7b46659742 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md @@ -19,7 +19,7 @@ You may recall from an earlier challenge that the `box-shadow` property takes va # --instructions-- -Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to transparent, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to blue. +Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to `transparent`, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to `blue`. # --hints-- @@ -35,7 +35,7 @@ The value of the `border-radius` property should be set to `50%`. assert(code.match(/border-radius:\s*?50%;/gi)); ``` -The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally blue for the color. +The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally `blue` for the color. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md index 7574f9464d..5cf78250d4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md @@ -24,11 +24,11 @@ One of the most popular shapes in the world is the heart shape, and in this chal } ``` -For the `::before` and `::after` pseudo-elements to function properly, they must have a defined `content` property. This property is usually used to add things like a photo or text to the selected element. When the `::before` and `::after` pseudo-elements are used to make shapes, the `content` property is still required, but it's set to an empty string. In the above example, the element with the class of `heart` has a `::before` pseudo-element that produces a yellow rectangle with `height` and `width` of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the `left` and 50px above the `top` of the element. +For the `::before` and `::after` pseudo-elements to function properly, they must have a defined `content` property. This property is usually used to add things like a photo or text to the selected element. When the `::before` and `::after` pseudo-elements are used to make shapes, the `content` property is still required, but it's set to an empty string. In the above example, the element with the class of `heart` has a `::before` pseudo-element that produces a yellow rectangle with height and width of `50px` and `70px`, respectively. This rectangle has round corners due to its 25% `border-radius` and is positioned absolutely at `5px` from the left and `50px` above the top of the element. # --instructions-- -Transform the element on the screen to a heart. In the `heart::after` selector, change the `background-color` to pink and the `border-radius` to 50%. +Transform the element on the screen to a heart. In the `heart::after` selector, change the `background-color` to `pink` and the `border-radius` to 50%. Next, target the element with the class `heart` (just `heart`) and fill in the `transform` property. Use the `rotate()` function with -45 degrees. @@ -36,7 +36,7 @@ Finally, in the `heart::before` selector, set its `content` property to an empty # --hints-- -The `background-color` property of the `heart::after` selector should be pink. +The `background-color` property of the `heart::after` selector should be `pink`. ```js const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0]; diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md index 0868c2ed99..217de2709f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md @@ -27,13 +27,13 @@ Align the `h4` tag's text, which says "Google", to the center. Then justify the # --hints-- -Your code should use the text-align property on the `h4` tag to set it to center. +Your code should use the text-align property on the `h4` tag to set it to `center`. ```js assert($('h4').css('text-align') == 'center'); ``` -Your code should use the text-align property on the `p` tag to set it to justify. +Your code should use the text-align property on the `p` tag to set it to `justify`. ```js assert($('p').css('text-align') == 'justify'); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md index 48b37cfad6..9c80077317 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md @@ -21,7 +21,7 @@ This is different than the outdated RYB color model that many of us were taught There are many color picking tools available online that have an option to find the complement of a color. -**Note:** For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges. +**Note:** Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md index 3b8574a6f0..a391aaa057 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md @@ -25,7 +25,7 @@ For the element with the id of `ball1`, change the value of the `animation-timin # --hints-- -The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent cubic-bezier function. +The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent `cubic-bezier` function. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md index 43f61d5f58..e91a65e334 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md @@ -37,11 +37,11 @@ For the element with the `anim` id, the code snippet above sets the `animation-n # --instructions-- -Create an animation for the element with the id `rect`, by setting the `animation-name` to rainbow and the `animation-duration` to 4 seconds. Next, declare a `@keyframes` rule, and set the `background-color` at the beginning of the animation (`0%`) to blue, the middle of the animation (`50%`) to green, and the end of the animation (`100%`) to yellow. +Create an animation for the element with the id `rect`, by setting the `animation-name` to `rainbow` and the `animation-duration` to 4 seconds. Next, declare a `@keyframes` rule, and set the `background-color` at the beginning of the animation (`0%`) to blue, the middle of the animation (`50%`) to green, and the end of the animation (`100%`) to yellow. # --hints-- -The element with id of `rect` should have an `animation-name` property with a value of rainbow. +The element with id of `rect` should have an `animation-name` property with a value of `rainbow`. ```js assert($('#rect').css('animation-name') == 'rainbow'); @@ -53,25 +53,25 @@ The element with id of `rect` should have an `animation-duration` property with assert($('#rect').css('animation-duration') == '4s'); ``` -The `@keyframes` rule should use the `animation-name` of rainbow. +The `@keyframes` rule should use the `animation-name` of `rainbow`. ```js assert(code.match(/@keyframes\s+?rainbow\s*?{/g)); ``` -The `@keyframes` rule for rainbow should use a `background-color` of blue at 0%. +The `@keyframes` rule for `rainbow` should use a `background-color` of `blue` at 0%. ```js assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi)); ``` -The `@keyframes` rule for rainbow should use a `background-color` of green at 50%. +The `@keyframes` rule for `rainbow` should use a `background-color` of `green` at 50%. ```js assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi)); ``` -The `@keyframes` rule for rainbow should use a `background-color` of yellow at 100%. +The `@keyframes` rule for rainbow should use a `background-color` of `yellow` at 100%. ```js assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi)); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md index 4186d10b45..0eb38a456a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md @@ -11,7 +11,7 @@ dashedName: lock-an-element-to-its-parent-with-absolute-positioning The next option for the CSS `position` property is `absolute`, which locks the element in place relative to its parent container. Unlike the `relative` position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position. -One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the body tag. +One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the `body` tag. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md index 877746ab7a..651d36a0dd 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md @@ -15,17 +15,17 @@ The one-second long heartbeat animation consists of two animated pieces. The `he # --instructions-- -Keep the heart beating by adding the `animation-iteration-count` property for both the `back` class and the `heart` class and setting the value to infinite. The `heart:before` and `heart:after` selectors do not need any animation properties. +Keep the heart beating by adding the `animation-iteration-count` property for both the `back` class and the `heart` class and setting the value to `infinite`. The `heart:before` and `heart:after` selectors do not need any animation properties. # --hints-- -The `animation-iteration-count` property for the `heart` class should have a value of infinite. +The `animation-iteration-count` property for the `heart` class should have a value of `infinite`. ```js assert($('.heart').css('animation-iteration-count') == 'infinite'); ``` -The `animation-iteration-count` property for the `back` class should have a value of infinite. +The `animation-iteration-count` property for the `back` class should have a value of `infinite`. ```js assert($('.back').css('animation-iteration-count') == 'infinite'); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md index bd44817019..1ebc81473a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md @@ -9,7 +9,7 @@ dashedName: move-a-relatively-positioned-element-with-css-offsets # --description-- -The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the `h2` downwards. Likewise, using a left offset moves an item to the right. +The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the `top` offset moved the `h2` downwards. Likewise, using a `left` offset moves an item to the right. diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md index d7e11d4f1a..443e5660dd 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md @@ -31,7 +31,7 @@ assert( ); ``` -The element with the id `red` should no longer have the `animation-timing-function` property of linear. +The element with the id `red` should no longer have the `animation-timing-function` property of `linear`. ```js assert($('#red').css('animation-timing-function') !== 'linear'); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md index 6f93217cd3..509cf6ea7d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md @@ -13,7 +13,7 @@ To strikethrough text, which is when a horizontal line cuts across the character # --instructions-- -Wrap the `s` tag around "Google" inside the `h4` tag and then add the word "Alphabet" beside it, which should not have the strikethrough formatting. +Wrap the `s` tag around `Google` inside the `h4` tag and then add the word `Alphabet` beside it, which should not have the strikethrough formatting. # --hints-- @@ -23,7 +23,7 @@ Your code should add one `s` tag to the markup. assert($('s').length == 1); ``` -A `s` tag should wrap around the Google text in the `h4` tag. It should not contain the word Alphabet. +A `s` tag should wrap around the `Google` text in the `h4` tag. It should not contain the word `Alphabet`. ```js assert( @@ -36,7 +36,7 @@ assert( ); ``` -You should include the word "Alphabet" in the `h4` tag, without strikethrough formatting. +You should include the word `Alphabet` in the `h4` tag, without strikethrough formatting. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md index 76ce21c487..d0e3d85209 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md @@ -13,7 +13,7 @@ To make text bold, you can use the `strong` tag. This is often used to draw atte # --instructions-- -Wrap a `strong` tag around "Stanford University" inside the `p` tag (do not include the period). +Wrap a `strong` tag around `Stanford University` text inside the `p` tag (do not include the period). # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md index 9323bb18b4..e5dc9362c6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md @@ -21,7 +21,7 @@ Transform the text of the `h4` to be uppercase using the `text-transform` proper # --hints-- -The `h4` text should be uppercase. +The `h4` text should be `uppercase`. ```js assert($('h4').css('text-transform') === 'uppercase'); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md index 0173882a55..a0444987da 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md @@ -13,7 +13,7 @@ To underline text, you can use the `u` tag. This is often used to signify that a # --instructions-- -Wrap the `u` tag only around the text "Ph.D. students". +Wrap the `u` tag only around the text `Ph.D. students`. **Note:** Try to avoid using the `u` tag when it could be confused for a link. Anchor tags also have a default underlined formatting. diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md index 401761ca39..aee5ef2731 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md @@ -19,13 +19,13 @@ You can specify a `border-radius` with pixels. Give your cat photo a `border-rad # --hints-- -Your image element should have the class "thick-green-border". +Your image element should have the class `thick-green-border`. ```js assert($('img').hasClass('thick-green-border')); ``` -Your image should have a border radius of `10px` +Your image should have a border radius of `10px`. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md index d310a31d8a..1d49492240 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md @@ -19,7 +19,7 @@ Here's how you do it: background: var(--penguin-skin, black); ``` -This will set background to black if your variable wasn't set. Note that this can be useful for debugging. +This will set background to `black` if your variable wasn't set. Note that this can be useful for debugging. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md index 90e93982c5..d38ed600e5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md @@ -21,7 +21,7 @@ For example, if you wanted an element's background color to be `green`, you'd pu # --instructions-- -Create a class called `silver-background` with the `background-color` of silver. Assign this class to your `div` element. +Create a class called `silver-background` with the `background-color` of `silver`. Assign this class to your `div` element. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md index 6ce6f47537..0aa2ea1fdc 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md @@ -28,7 +28,7 @@ Family names are case-sensitive and need to be wrapped in quotes if there is a s # --instructions-- -Import the Lobster font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element. +Import the `Lobster` font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md index c3f7f8b1c4..214fac94d8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md @@ -17,11 +17,11 @@ This means that if you do want to provide a browser fallback, it's as easy as pr # --instructions-- -It looks like a variable is being used to set the background color of the `.red-box` class. Let's improve our browser compatibility by adding another `background` declaration right before the existing declaration and set its value to red. +It looks like a variable is being used to set the background color of the `.red-box` class. Let's improve our browser compatibility by adding another `background` declaration right before the existing declaration and set its value to `red`. # --hints-- -Your `.red-box` rule should include a fallback with the `background` set to red immediately before the existing `background` declaration. +Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md index 4259ca8d8f..396fbb3535 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md @@ -13,7 +13,7 @@ Yay! We just proved that inline styles will override all the CSS declarations in But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS. -In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important` +In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important`. Let's go all the way back to our `pink-text` class declaration. Remember that our `pink-text` class was overridden by subsequent class declarations, id declarations, and inline styles. @@ -39,7 +39,7 @@ Your `h1` element should have the class `blue-text`. assert($('h1').hasClass('blue-text')); ``` -Your `h1` element should have the id of `orange-text`. +Your `h1` element should have the `id` of `orange-text`. ```js assert($('h1').attr('id') === 'orange-text'); diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md index 7199bbefa8..82c0ac797d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md @@ -9,7 +9,7 @@ dashedName: override-styles-in-subsequent-css # --description-- -Our "pink-text" class overrode our `body` element's CSS declaration! +Our `pink-text` class overrode our `body` element's CSS declaration! We just proved that our classes will override the `body` element's CSS. So the next logical question is, what can we do to override our `pink-text` class? diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md index cb69651c7b..313cfb81ed 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md @@ -29,7 +29,7 @@ To begin, apply the `monospace` font to the `h2` element, so that it now has two In the last challenge, you imported the `Lobster` font using the `link` tag. Now comment out that import of the `Lobster` font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your `h2` element degrades to the `monospace` font. -**Note:** If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font. +**Note:** If you have the `Lobster` font installed on your computer, you won't see the degradation because your browser is able to find the font. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md index 5d38d776d0..1f752a9b42 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md @@ -43,7 +43,7 @@ Your `h2` element should have the class `red-text`. assert($('h2').hasClass('red-text')); ``` -Your stylesheet should declare a `red-text` class and have its color set to red. +Your stylesheet should declare a `red-text` class and have its color set to `red`. ```js assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g)); diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md index d61b348779..2382567a13 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md @@ -17,7 +17,7 @@ These four values work like a clock: top, right, bottom, left, and will produce # --instructions-- -Use Clockwise Notation to give the ".blue-box" class a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side. +Use Clockwise Notation to give the `.blue-box` class a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side. # --hints-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md index ce20fe7b85..da7162df0f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md @@ -40,7 +40,7 @@ Delete your `h2` element's style attribute, and instead create a CSS `style` blo # --hints-- -The style attribute should be removed from your `h2` element. +The `style` attribute should be removed from your `h2` element. ```js assert(!$('h2').attr('style')); diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md index 8e65af52a1..a7e9f64c88 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md @@ -11,11 +11,11 @@ dashedName: use-rgb-values-to-color-elements Another way you can represent colors in CSS is by using `RGB` values. -The RGB value for black looks like this: +The `RGB` value for black looks like this: `rgb(0, 0, 0)` -The RGB value for white looks like this: +The `RGB` value for white looks like this: `rgb(255, 255, 255)` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md index d5eacc4e56..49ce2e73e3 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md @@ -17,11 +17,11 @@ Here's an example submit button: # --instructions-- -Add a button as the last element of your `form` element with a type of `submit`, and "Submit" as its text. +Add a button as the last element of your `form` element with a type of `submit`, and `Submit` as its text. # --hints-- -Your form should have a button inside it. +Your `form` should have a `button` inside it. ```js assert($('form').children('button').length > 0); diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md index 1a9a07de80..5b150b7589 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md @@ -29,7 +29,7 @@ You should add a `placeholder` attribute to the existing text `input` element. assert($('input[placeholder]').length > 0); ``` -You should set the value of your placeholder attribute to `cat photo URL`. +You should set the value of your `placeholder` attribute to `cat photo URL`. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md index 4a21affd99..1e3ec90f2e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md @@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default You can set a checkbox or radio button to be checked by default using the `checked` attribute. -To do this, just add the word "checked" to the inside of an input element. For example: +To do this, just add the word `checked` to the inside of an input element. For example: `` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md index 691add8202..23a1f7de35 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md @@ -22,7 +22,7 @@ For example: ``` -would create a bullet point style list of "milk" and "cheese". +would create a bullet point style list of `milk` and `cheese`. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md index 5ac64859d2..95b3fb19c4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md @@ -38,7 +38,7 @@ Add a pair of radio buttons to your form, each nested in its own `label` element # --hints-- -Your page should have two radio button elements. +Your page should have two `radio` button elements. ```js assert($('input[type="radio"]').length > 1); diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md index fa4e98c0e7..0eb5ab427e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md @@ -22,7 +22,7 @@ For example: ``` -would create a numbered list of "Garfield" and "Sylvester". +would create a numbered list of `Garfield` and `Sylvester`. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md index 2a33146f83..b9a9509f8e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md @@ -13,7 +13,7 @@ Web developers traditionally use lorem ipsum text as placeholder text Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web. -Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum text". +Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum" text. # --instructions-- @@ -21,7 +21,7 @@ Replace the text inside your `p` element with the first few words of this kitty # --hints-- -Your `p` element should contain the first few words of the provided `kitty ipsum text`. +Your `p` element should contain the first few words of the provided "kitty ipsum" text. ```js assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text())); diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md index 67f341fee7..09bde50db6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md @@ -17,7 +17,7 @@ You can create a paragraph element like this: # --instructions-- -Create a `p` element below your `h2` element, and give it the text "Hello Paragraph". +Create a `p` element below your `h2` element, and give it the text `Hello Paragraph`. **Note:** As a convention, all HTML tags are written in lowercase, for example `

` and not `

`. diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md index 55479f4b57..dff73e7e57 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md @@ -23,7 +23,7 @@ Create an `a` element that links to `https://freecatphotoapp.com` and has "cat p # --hints-- -Your `a` element should have the anchor text of "cat photos". +Your `a` element should have the anchor text of `cat photos`. ```js assert(/cat photos/gi.test($('a').text())); diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md index 0d0f467fca..37ad91a0a9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md @@ -21,15 +21,15 @@ Below is an example of an internal anchor link and its target element:

Contacts

``` -When users click the Contacts link, they'll be taken to the section of the webpage with the **Contacts** header element. +When users click the `Contacts` link, they'll be taken to the section of the webpage with the **Contacts** header element. # --instructions-- -Change your external link to an internal link by changing the `href` attribute to "#footer" and the text from "cat photos" to "Jump to Bottom". +Change your external link to an internal link by changing the `href` attribute to `"#footer"` and the text from `cat photos` to `Jump to Bottom`. Remove the `target="_blank"` attribute from the anchor tag since this causes the linked document to open in a new window tab. -Then add an `id` attribute with a value of "footer" to the `