diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md index dd0f3b6027..7879b89c2c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md @@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element The `box-shadow` property applies one or more shadows to an element. -The `box-shadow` property takes values for +The `box-shadow` property takes the following values, in order: The `blur-radius` and `spread-radius` values are optional. 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 9af8149dca..f03b86883e 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 @@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color # --description-- -Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` property as an alternative way to pick a color by directly stating these characteristics. +Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` function as an alternative way to pick a color by directly stating these characteristics. **Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360. @@ -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()` function to declare the color `green`. ```js assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -Your code should use the `hsl()` property to declare the color `cyan`. +Your code should use the `hsl()` function to declare the color `cyan`. ```js assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -Your code should use the `hsl()` property to declare the color `blue`. +Your code should use the `hsl()` function to declare the color `blue`. ```js assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi)); 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 7b46659742..b3162a0453 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 @@ -15,11 +15,11 @@ You will create a round, transparent object with a crisp shadow that is slightly In order to create a round object, the `border-radius` property should be set to a value of 50%. -You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a color value in that order. The `blur-radius` and `spread-radius` values are optional. +You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a `color` value in that order. The `blur-radius` and `spread-radius` values are optional. # --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 56e9e3df57..8c8b5c1e5e 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 @@ -28,15 +28,15 @@ For the `::before` and `::after` pseudo-elements to function properly, they must # --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. -Finally, in the `heart::before` selector, set its `content` property to an empty string. +Finally, in the `.heart::before` selector, set its `content` property to an empty string. # --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]; @@ -45,7 +45,7 @@ assert( ); ``` -The `border-radius` of the `heart::after` selector should be 50%. +The `border-radius` of the `.heart::after` selector should be 50%. ```js assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2); @@ -57,7 +57,7 @@ The `transform` property for the `heart` class should use a `rotate()` function assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi)); ``` -The `content` of the `heart::before` selector should be an empty string. +The `content` of the `.heart::before` selector should be an empty string. ```js assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi)); 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 63d9325115..8e28985203 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 @@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic A previous challenge discussed the `ease-out` keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the `ease-out` keyword (for the blue element) and `linear` keyword (for the red element) is demonstrated. Similar animation progressions to the `ease-out` keyword can be achieved by using a custom cubic Bezier curve function. -In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style: +In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the `ease-out` style: ```css animation-timing-function: cubic-bezier(0, 0, 0.58, 1); diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md index 60907efc65..f2c9c9efef 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md @@ -47,7 +47,7 @@ The color stop at 0 pixels should be `yellow`. assert(code.match(/yellow\s+?0(px)?/gi)); ``` -One color stop at 40 pixels should be `yellow`. +The first color stop at 40 pixels should be `yellow`. ```js assert(code.match(/yellow\s+?40px/gi)); diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md index 33646c3e90..5565b52747 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md @@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area When you create your variables in `:root` they will set the value of that variable for the whole page. -You can then over-write these variables by setting them again within a specific element. +You can then over-write these variables by setting them again within a specific selector. # --instructions-- @@ -27,7 +27,7 @@ assert( ); ``` -The `penguin` class should not contain the `background-color` property +The `penguin` class should not contain the `background-color` property. ```js assert( diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.md index 59c863ab23..e23df3927a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.md @@ -15,7 +15,7 @@ To create a CSS variable, you just need to give it a name with two hyphens in fr --penguin-skin: gray; ``` -This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other elements to gray. +This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other properties to gray. # --instructions-- diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md index 8a7b1baba4..fbb294a03a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md @@ -77,7 +77,7 @@ assert( ); ``` -Your `h1` element should inherit the color green from your `body` element. +Your `h1` element should inherit the color `green` from your `body` element. ```js assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'); 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 55ccdf3c48..5659ee4199 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 @@ -27,7 +27,7 @@ class="class1 class2" **Note:** It doesn't matter which order the classes are listed in the HTML element. -However, the order of the `class` declarations in the `