feat: add more tests, simplify some regex tests, fix wording

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

@@ -24,7 +24,9 @@ First, in the `.red` CSS rule, set the `background` property to `linear-gradient
 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));
+assert(
+  __helpers.removeWhiteSpace($('style').text()).match(/\.red{.*background:linear-gradient\(90deg\).*}/g)
+);
 ```
 
 # --seed--

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

@@ -16,7 +16,9 @@ In the `linear-gradient` function, use the `rgb` function to set the first color
 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));
+assert(
+  __helpers.removeWhiteSpace($('style').text()).match(/\.red{.*background:linear-gradient\(90deg,rgb\(255,0,0\)\).*}/g)
+);
 ```
 
 # --seed--

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

@@ -13,10 +13,9 @@ In the `.green` CSS rule, change the `background-color` property to `background`
 
 # --hints--
 
-Your `.green` CSS rule should have a `background` property with the value `rgb(0, 127, 0)`.
+Your `.green` CSS rule should have a `background` property with the value `#007F00`.
 
 ```js
-console.log(new __helpers.CSSHelp(document).getStyle('.green').cssText);
 assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);');
 ```
 

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

@@ -13,10 +13,12 @@ Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And
 
 # --hints--
 
-Test 1
+Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`.
 
 ```js
-
+assert(
+  __helpers.removeWhiteSpace($('style').text()).match(/\.green{.*background:linear-gradient\(180deg,#55680D\).*}/g)
+);
 ```
 
 # --seed--

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

@@ -11,10 +11,10 @@ For the second color argument, use a hex color code with the values `71` for red
 
 # --hints--
 
-Test 1
+Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`.
 
 ```js
-
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62))');
 ```
 
 # --seed--

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

@@ -13,10 +13,10 @@ In the same `linear-gradient` function, add a hex color code with the values `11
 
 # --hints--
 
-Test 1
+Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`.
 
 ```js
-
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62), rgb(17, 108, 49))');
 ```
 
 # --seed--

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

@@ -11,14 +11,14 @@ Even without the color-stops, you might have noticed that the colors for the gre
 
 The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default.
 
-In the `red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit.
+In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit.
 
 # --hints--
 
-Test 1
+Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.
 
 ```js
-
+assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))');
 ```
 
 # --seed--

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

@@ -13,10 +13,22 @@ Clean up your code a little more by removing the `gradientDirection` argument fr
 
 # --hints--
 
-Test 1
+You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules.
 
 ```js
+assert(!code.match(/linear-gradient\s*\(\s*180deg/gi));
+```
 
+Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))');
+```
+
+Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62), rgb(17, 108, 49))');
 ```
 
 # --seed--

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

@@ -9,14 +9,14 @@ dashedName: step-66
 
 Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments.
 
-In the `blue` CSS rule, change the `background-color` property to `background`.
+In the `.blue` CSS rule, change the `background-color` property to `background`.
 
 # --hints--
 
-Test 1
+Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`.
 
 ```js
-
+assert(new __helpers.CSSHelp(document).getStyle('.blue').cssText === 'background: rgb(0, 0, 255);');
 ```
 
 # --seed--

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

@@ -11,10 +11,12 @@ Use the `linear-gradient` function, and pass in the `hsl` function with the valu
 
 # --hints--
 
-Test 1
+Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`.
 
 ```js
-
+assert(
+  __helpers.removeWhiteSpace($('style').text()).match(/\.blue{.*linear-gradient\(hsl\(186,76%,16%\)\).*}/g)
+);
 ```
 
 # --seed--

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

@@ -11,10 +11,10 @@ As the second color argument, pass in the `hsl` function with the values `223` f
 
 # --hints--
 
-Test 1
+Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`.
 
 ```js
-
+assert(new __helpers.CSSHelp(document).getStyle('.blue')?.background === 'linear-gradient(rgb(10, 66, 72), rgb(61, 113, 245))');
 ```
 
 # --seed--

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

@@ -11,10 +11,10 @@ And as the third color argument, pass in the `hsl` function with the values `240
 
 # --hints--
 
-Test 1
+Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`.
 
 ```js
-
+assert(new __helpers.CSSHelp(document).getStyle('.blue')?.background === 'linear-gradient(rgb(10, 66, 72), rgb(61, 113, 245), rgb(47, 47, 167))');
 ```
 
 # --seed--

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

@@ -9,14 +9,22 @@ dashedName: step-70
 
 Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker.
 
-Inside the red marker `div` element, create a new `div` with the `class` `sleeve`.
+Inside the `div.red` element, create a new `div` with the `class` attribute set to `sleeve`.
 
 # --hints--
 
-Test 1
+Your new `div` element should be within the `div.red` element.
 
 ```js
+const redMarkerChildren = [...document.querySelector('.red')?.children];
+assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1);
+```
 
+Your new `div` element should have a `class` attribute set to `sleeve`.
+
+```js
+const redMarkerChild = [...document.querySelector('.red')?.children][0];
+assert(redMarkerChild?.classList?.contains('sleeve'));
 ```
 
 # --seed--

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

@@ -7,16 +7,28 @@ dashedName: step-71
 
 # --description--
 
-Create a new CSS rule that targets the `sleeve` `class`.
+Create a new CSS rule that targets the `class` attribute, `sleeve`.
 
-Inside the `sleeve` rule, set the `width` property to `110px`, and the `height` property to `25px`.
+Inside the new rule, set the `width` property to `110px`, and the `height` property to `25px`.
 
 # --hints--
 
-Test 1
+You should use a class selector to target the `class` attribute, `sleeve`.
 
 ```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve'));
+```
 
+Your `.sleeve` CSS rule should have a `width` property set to `110px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px');
+```
+
+Your `.sleeve` CSS rule should have a `height` property set to `25px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px');
 ```
 
 # --seed--