gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add more steps, fix wording

Browse Source
This commit is contained in:
Kris Koishigawa
2021-12-17 02:38:33 +09:00
parent 9cabc1db5c
commit 2b5018324c
35 changed files with 184 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md
View File

@@ -9,7 +9,7 @@ dashedName: step-11
It's time to add some color to the page. Remember that one way to add color to an element is to use a <dfn>color keyword</dfn> like `black`, `cyan`, or `yellow`.
Use a `class` selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`:
Use a class selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`:
```css
.freecodecamp {
@@ -21,7 +21,7 @@ Create a new CSS rule that targets the `marker` `class`, and set its `background
# --hints--
You should create a `class` selector to target the `marker` `class`.
You should create a class selector to target the `marker` `class`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.marker'));

2
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md
View File

@@ -7,7 +7,7 @@ dashedName: step-12
# --description--
Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the `marker` `div` element is empty, it doesn't have any width or height by default.
Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any width or height by default.
In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`.

2
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md
View File

@@ -7,7 +7,7 @@ dashedName: step-15
# --description--
While you have three separate `marker` elements, they look like one big rectangle. You should add some space between them to make it easier to see each element.
While you have three separate marker `div` elements, they look like one big rectangle. You should add some space between them to make it easier to see each element.
When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value.

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-016.md
View File

@@ -11,18 +11,18 @@ In school, you might have learned that red, yellow, and blue are primary colors,
These days, there are two main color models: the <dfn>additive</dfn> RGB (red, green, blue) model used in electronic devices, and the <dfn>subtractive</dfn> CMYK (cyan, magenta, yellow, black) model used in print. In this project you'll work with the RGB model.
First, add the `class` `one` to the first `marker` `div` element.
First, add the `class` `one` to the first marker `div` element.
# --hints--
You should add the `class` `one` to the first `marker` `div` element in the `container` `div`.
You should add the `class` `one` to the first marker `div` element in the `container` `div`.
```js
const containerFirstChild = [...document.querySelector('.container')?.children][0];
assert(containerFirstChild?.classList?.contains('one'));
```
Your first `marker` `div` should have the classes `marker` and `one`.
Your first marker `div` should have the classes `marker` and `one`.
```js
const containerFirstChild = [...document.querySelector('.container')?.children][0];

2
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-018.md
View File

@@ -11,7 +11,7 @@ Then, create a new CSS rule that targets the `class` `one` and set its `backgrou
# --hints--
You should use a `class` selector to target the `class` `one`.
You should use a class selector to target the `class` `one`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one'));

10
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-019.md
View File

@@ -7,32 +7,32 @@ dashedName: step-19
# --description--
Add the `class` `two` to the second `marker` `div`, and the `class` `three` to the third `marker` `div`.
Add the `class` `two` to the second marker `div`, and the `class` `three` to the third marker `div`.
# --hints--
You should add the `class` `two` to the second `marker` `div` element in the `container` `div`.
You should add the `class` `two` to the second marker `div` element in the `container` `div`.
```js
const containerSecondChild = [...document.querySelector('.container')?.children][1];
assert(containerSecondChild?.classList?.contains('two'));
```
Your second `marker` `div` should have the classes `marker` and `two`.
Your second marker `div` should have the classes `marker` and `two`.
```js
const containerSecondChild = [...document.querySelector('.container')?.children][1];
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two'));
```
You should add the `class` `three` to the third `marker` `div` element in the `container` `div`.
You should add the `class` `three` to the third marker `div` element in the `container` `div`.
```js
const containerThirdChild = [...document.querySelector('.container')?.children][2];
assert(containerThirdChild?.classList?.contains('three'));
```
Your third `marker` `div` should have the classes `marker` and `three`.
Your third marker `div` should have the classes `marker` and `three`.
```js
const containerThirdChild = [...document.querySelector('.container')?.children][2];

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-020.md
View File

@@ -13,7 +13,7 @@ Also, create a separate CSS rule that targets the `class` `three` and set its `b
# --hints--
You should use a `class` selector to target the `class` `two`.
You should use a class selector to target the `class` `two`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two'));
@@ -25,7 +25,7 @@ Your `.two` CSS rule should have a `background-color` property set to `green`.
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green');
```
You should use a `class` selector to target the `class` `three`.
You should use a class selector to target the `class` `three`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three'));

2
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-021.md
View File

@@ -15,7 +15,7 @@ Create a new CSS rule that targets the `container` `class` and set its `backgrou
# --hints--
You should use a `class` selector to target the `container` `class`.
You should use a class selector to target the `container` `class`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.container'));

2
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-024.md
View File

@@ -9,7 +9,7 @@ dashedName: step-24
While the red and blue markers look the same, the green one is much lighter than it was before. This is because the `green` color keyword is actually a darker shade, and is about halfway between black and the maximum value for green.
In the `two` CSS rule, set the green value in the `rgb` function to `128` to lower its intensity.
In the `two` CSS rule, set the green value in the `rgb` function to `127` to lower its intensity.
# --hints--

16
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-035.md
View File

@@ -9,14 +9,26 @@ dashedName: step-35
Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design.
First, in the `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black.
First, in the rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. Remember that the `rgb` function uses the additive color model, where colors start as black and change as the values of red, green, and blue increase.
# --hints--
Test 1
Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)');
```
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)');
```
Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)');
```
# --seed--

12
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-036.md
View File

@@ -7,18 +7,24 @@ dashedName: step-36
# --description--
A color wheel is a circle where similar colors, or hues, are near each other, and different ones are further apart. For example, pure red is between the hues rose and orange.
A color wheel is a circle where similar colors, or <dfn>hues</dfn>, are near each other, and different ones are further apart. For example, pure red is between the hues rose and orange.
Two colors that are opposite from each other on the color wheel are called <dfn>complementary colors</dfn>. If two complementary colors are combined, they produce gray. But when they are placed side-by-side, these colors produce strong visual contrast and appear brighter.
Set `one` and `two` to the complementary colors red and cyan. In the `rgb` function for `one` set the red value to the max of `255`. In the `rgb` function for two, set the values for green and blue to the max of `255`.
In the `rgb` function for the `.one` CSS rule, set the red value to the max of `255` to produce pure red. In the `rgb` function for `.two` CSS rule, set the values for green and blue to the max of `255` to produce cyan.
# --hints--
Test 1
Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)');
```
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)');
```
# --seed--

14
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-037.md
View File

@@ -7,18 +7,24 @@ dashedName: step-37
# --description--
Notice that the red and cyan colors are very bright right next to each other. But this contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background.
Notice that the red and cyan colors are very bright right next to each other. This contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background.
It's better practice to choose one color as the dominant color, and use its complementary color as an accent color to bring attention to certain content on the page.
It's better practice to choose one color as the dominant color, and use its complementary color as an accent to bring attention to certain content on the page.
First, in the `h1` rule, use the `rbg` function to set the background color to cyan.
First, in the `h1` rule, use the `rbg` function to set its background color to cyan.
# --hints--
Test 1
You should not remove or modify the `text-align` property or its value.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
```
Your `h1` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)');
```
# --seed--

10
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-038.md
View File

@@ -7,14 +7,20 @@ dashedName: step-38
# --description--
Next, in `one`, use the `rgb` function to set the `background-color` to black. And in `two`, use the `rgb` function to set the `background-color` to red.
Next, in the `.one` rule, use the `rgb` function to set the `background-color` to black. And in the `.two` rule, use the `rgb` function to set the `background-color` to red.
# --hints--
Test 1
Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)');
```
Your `.two` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)');
```
# --seed--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-039.md
View File

@@ -11,14 +11,14 @@ Notice how your eyes are naturally drawn to the red color in the center? When de
There are several other important color combinations outside of complementary colors, but you'll learn those a bit later.
For now, use the `rgb` function in `two` to set the `background-color` to black.
For now, use the `rgb` function in the `.two` rule to set the `background-color` to black.
# --hints--
Test 1
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)');
```
# --seed--

5
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-040.md
View File

@@ -11,10 +11,11 @@ And in the `h1` rule, remove the `background-color` property and value to go bac
# --hints--
Test 1
Your `h1` CSS rule should not have a `background-color` property or value.
```js
const backgroundColorInstances = code.match(/background-color:.*;/gi);
assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor);
```
# --seed--

12
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-041.md
View File

@@ -9,14 +9,22 @@ dashedName: step-41
Now it's time time to add other details to the markers, starting with the first one.
First, change the class of the first marker `div` element from `one` to `red`.
First, change the `class` attribute of the first marker `div` element from `one` to `red`.
# --hints--
Test 1
Your first marker `div` should not have the `class` `one`.
```js
const containerFirstChild = [...document.querySelector('.container')?.children][0];
assert(!containerFirstChild?.classList?.contains('one'));
```
Your first marker `div` should have the classes `marker` and `red`.
```js
const containerFirstChild = [...document.querySelector('.container')?.children][0];
assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('red'));
```
# --seed--

16
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-042.md
View File

@@ -7,14 +7,26 @@ dashedName: step-42
# --description--
Update the `one` class selector to target the new `red` `class`.
Update the `.one` class selector to target the new `red` `class`.
# --hints--
Test 1
Your code should no longer have a `.one` class selector.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.one'));
```
You should use a class selector to target the `class` `red`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red'));
```
Your `.red` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)');
```
# --seed--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-043.md
View File

@@ -7,14 +7,14 @@ dashedName: step-43
# --description--
And update the `rgb` function in `red` so that the red value is at the max.
And update the `rgb` function in the `.red` rule so that the red value is at the max.
# --hints--
Test 1
Your `.red` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(255, 0, 0)');
```
# --seed--

26
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-044.md
View File

@@ -7,14 +7,36 @@ dashedName: step-44
# --description--
Next, change the `class` of the second marker element from `two` to `green`, and the `class` of the third marker element from `three` to `blue`.
Next, change the `class` of the second marker `div` from `two` to `green`, and the `class` of the third marker `div` from `three` to `blue`.
# --hints--
Test 1
Your second marker `div` should not have the `class` `two`.
```js
const containerSecondChild = [...document.querySelector('.container')?.children][1];
assert(!containerSecondChild?.classList?.contains('two'));
```
Your second marker `div` should have the classes `marker` and `green`.
```js
const containerSecondChild = [...document.querySelector('.container')?.children][1];
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green'));
```
Your third marker `div` should not have the `class` `three`.
```js
const containerThirdChild = [...document.querySelector('.container')?.children][2];
assert(!containerThirdChild?.classList?.contains('three'));
```
Your third marker `div` should have the classes `marker` and `blue`.
```js
const containerThirdChild = [...document.querySelector('.container')?.children][2];
assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue'));
```
# --seed--

34
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-045.md
View File

@@ -7,14 +7,44 @@ dashedName: step-45
# --description--
Update the CSS class selector `two` so it targets the new `green` `class`. And update `three` so it targets `blue`.
Update the CSS class selector `.two` so it targets the new `green` `class`. And update the `.three` selector so it targets the new `blue` `class`.
# --hints--
Test 1
Your code should no longer have a `.two` class selector.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.two'));
```
You should use a class selector to target the `class` `green`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.green'));
```
Your `.green` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)');
```
Your code should no longer have a `.three` class selector.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.three'));
```
You should use a class selector to target the `class` `blue`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.blue'));
```
Your `.blue` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)');
```
# --seed--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-046.md
View File

@@ -11,14 +11,14 @@ A very common way to apply color to an element with CSS is with <dfn>hexadecimal
Hex color values start with a `#` character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, `#4B5320`.
In the `green` CSS rule, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue.
In the `.green` CSS rule, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue.
# --hints--
Test 1
Your `.green` CSS rule should have a `background-color` property set to `#00FF00`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)');
```
# --seed--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-047.md
View File

@@ -13,16 +13,16 @@ You may already be familiar with decimal, or base 10 values, which go from 0 - 1
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
```
With hex colors, 00 is 0% of that color, and FF is 100%. So `#00FF00` translates to 0% red, 100% green, and 0% blue, and is the same as `rgb(0, 255, 0)`.
With hex colors, `00` is 0% of that color, and `FF` is 100%. So `#00FF00` translates to 0% red, 100% green, and 0% blue, and is the same as `rgb(0, 255, 0)`.
Lower the intensity of green by setting green value of the hex color to `7F`.
# --hints--
Test 1
Your `.green` CSS rule should have a `background-color` property set to `#007F00`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-048.md
View File

@@ -21,10 +21,10 @@ In the `blue` CSS rule, use the `hsl` function to change the `background-color`
# --hints--
Test 1
Your `.blue` CSS rule should have a `background-color` property set to `hsl(240, 100%, 50%)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)');
```
# --seed--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-049.md
View File

@@ -13,14 +13,14 @@ A gradient is when one color transitions into another. The CSS `linear-gradient`
One thing to remember is that the `linear-gradient` function actually creates an `image` element, and is usually paired with the `background` property which can accept an image as a value.
In the `red` CSS rule, change the `background-color` property to `background`.
In the `.red` CSS rule, change the `background-color` property to `background`.
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property with the value `rgb(255, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red').cssText === 'background: rgb(255, 0, 0);');
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-050.md
View File

@@ -7,7 +7,7 @@ dashedName: step-50
# --description--
The `linear-gradient` function is very flexible, but here is the basic syntax you'll use in this tutorial:
The `linear-gradient` function is very flexible -- here is the basic syntax you'll use in this tutorial:
```css
linear-gradient(gradientDirection, color1, color2, ...);
@@ -17,14 +17,14 @@ linear-gradient(gradientDirection, color1, color2, ...);
Now you'll apply a red-to-green gradient along a 90 degree line to the first marker.
First, in the `red` CSS rule, set the `background` property to `linear-gradient()`, and pass it the value `90deg` as the `gradientDirection`.
First, in the `.red` CSS rule, set the `background` property to `linear-gradient()`, and pass it the value `90deg` as the `gradientDirection`.
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`.
```js
assert(code.match(/background\s*:\s*linear-gradient\(\s*90deg\s*\);?/g));
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-051.md
View File

@@ -13,10 +13,10 @@ In the `linear-gradient` function, use the `rgb` function to set the first color
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`.
```js
assert(code.match(/background\s*:\s*linear-gradient\(\s*90deg\,\s*rgb\(255\,?\s*0\,\s*0\)\s*\);?/g));
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-052.md
View File

@@ -13,10 +13,10 @@ In the same `linear-gradient` function, use the `rgb` function to set the second
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-053.md
View File

@@ -13,10 +13,10 @@ Use the `rgb` function to add pure blue as the third color argument to the `line
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-054.md
View File

@@ -19,10 +19,10 @@ In the `linear-gradient` function, add a `75%` color stop after the first red co
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-055.md
View File

@@ -13,10 +13,10 @@ In the `linear-gradient` function, set `gradientDirection` to `180deg`.
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-056.md
View File

@@ -11,10 +11,10 @@ Next, set the color-stop for red to `0%`, the color-stop for green to `50%`, and
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-057.md
View File

@@ -13,10 +13,10 @@ For the first color argument, which is currently pure red, update the `rgb` func
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-058.md
View File

@@ -13,10 +13,10 @@ Update the `rgb` function so the value for red is `245`, the value of green is `
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-059.md
View File

@@ -13,10 +13,10 @@ Update the `rgb` function so the value for red is `162`, the value of green is `
# --hints--
Test 1
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)');
```
# --seed--

7
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-060.md
View File

@@ -9,14 +9,15 @@ dashedName: step-60
The red marker is looking much more realistic. Now you'll do the same for the green marker, using a combination of the `linear-gradient` function and hex colors.
In the `green` CSS rule, change the `background-color` property to `background`.
In the `.green` CSS rule, change the `background-color` property to `background`.
# --hints--
Test 1
Your `.green` CSS rule should have a `background` property with the value `rgb(0, 127, 0)`.
```js
console.log(new __helpers.CSSHelp(document).getStyle('.green').cssText);
assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);');
```
# --seed--