diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
index 200db3a4434..d697faf194e 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
@@ -24,7 +24,9 @@ Change the `margin` of the blue box to `-15px`, so it fills the entire horizonta
 Your `blue-box` class should give elements `-15px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '-15px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)["margin-top"]; 
+assert.strictEqual(marginTop, "-15px"); 
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
index 425dcfade1b..4d395b07e01 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
@@ -38,35 +38,38 @@ Remember that you can apply multiple classes to an element using its `class` att
 Your `img` element should have the class `smaller-image`.
 
 ```js
-assert($('img').hasClass('smaller-image'));
+assert.isTrue(document.querySelector('img').classList.contains('smaller-image'));
 ```
 
 Your `img` element should have the class `thick-green-border`.
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 Your image should have a border width of `10px`.
 
 ```js
-assert(
-  $('img').hasClass('thick-green-border') &&
-    parseInt($('img').css('border-top-width'), 10) >= 8 &&
-    parseInt($('img').css('border-top-width'), 10) <= 12
-);
+const image = document.querySelector('img'); 
+const imageBorderTopWidth = window.getComputedStyle(image)["border-top-width"]; 
+
+assert.strictEqual(imageBorderTopWidth, "10px")
 ```
 
 Your image should have a border style of `solid`.
 
 ```js
-assert($('img').css('border-right-style') === 'solid');
+const image = document.querySelector('img'); 
+const borderRightStyle = window.getComputedStyle(image)["border-right-style"]; 
+assert.strictEqual(borderRightStyle, 'solid');
 ```
 
 The border around your `img` element should be green.
 
 ```js
-assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
+const image = document.querySelector('img'); 
+const borderLeftColor = window.getComputedStyle(image)["border-left-color"]; 
+assert.strictEqual(borderLeftColor, 'rgb(0, 128, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
index f73e198f201..dca46c2d729 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
@@ -22,25 +22,33 @@ Give the blue box a `margin` of `40px` on its top and left side, but only `20px`
 Your `blue-box` class should give the top of elements `40px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '40px');
 ```
 
 Your `blue-box` class should give the right of elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginRight = window.getComputedStyle(blueBox)['margin-right'];
+assert.strictEqual(marginRight, '20px');
 ```
 
 Your `blue-box` class should give the bottom of elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
+assert.strictEqual(marginBottom, '20px');
 ```
 
 Your `blue-box` class should give the left of elements `40px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
+assert.strictEqual(marginLeft,'40px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
index b0699d0fc87..2dec6f8f849 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
@@ -22,25 +22,33 @@ Give the blue box a `padding` of `40px` on its top and left side, but only `20px
 Your `blue-box` class should give the top of the elements `40px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '40px');
 ```
 
 Your `blue-box` class should give the right of the elements `20px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
+assert.strictEqual(paddingRight, '20px');
 ```
 
 Your `blue-box` class should give the bottom of the elements `20px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
+assert.strictEqual(paddingBottom, '20px');
 ```
 
 Your `blue-box` class should give the left of the elements `40px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
+assert.strictEqual(paddingLeft, '40px');
 ```
 
 # --seed--
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 2d3899fc209..2dc240ab5a9 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
@@ -22,18 +22,23 @@ You can specify a `border-radius` with pixels. Give your cat photo a `border-rad
 Your image element should have the class `thick-green-border`.
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 Your image should have a border radius of `10px`.
 
 ```js
-assert(
-  $('img').css('border-top-left-radius') === '10px' &&
-    $('img').css('border-top-right-radius') === '10px' &&
-    $('img').css('border-bottom-left-radius') === '10px' &&
-    $('img').css('border-bottom-right-radius') === '10px'
-);
+const image = document.querySelector('img');
+const style = window.getComputedStyle(image);  
+const borderTopLeftRadius = style['border-top-left-radius']; 
+const borderTopRightRadius = style['border-top-right-radius'];
+const borderBottomLeftRadius = style['border-bottom-left-radius'];
+const borderBottomRightRadius = style['border-bottom-right-radius'];
+
+assert.strictEqual(borderTopLeftRadius, '10px');
+assert.strictEqual(borderTopRightRadius, '10px');
+assert.strictEqual(borderBottomLeftRadius, '10px');
+assert.strictEqual(borderBottomRightRadius, '10px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
index 31a48593e00..9193efffd4c 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
@@ -24,7 +24,9 @@ Change the `margin` of the blue box to match that of the red box.
 Your `blue-box` class should give elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '20px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
index cbbd38c5d89..d9e67f8c56d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
@@ -30,7 +30,9 @@ Change the `padding` of your blue box to match that of your red box.
 Your `blue-box` class should give elements `20px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '20px');
 ```
 
 # --seed--
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 1d49492240f..a8ed8ae6c78 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
@@ -30,21 +30,13 @@ It looks like there is a problem with the variables supplied to the `.penguin-to
 The fallback value of `black` should be used in the `background` property of the `penguin-top` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
 ```
 
 The fallback value of `black` should be used in `background` property of the `penguin-bottom` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
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 f27c91041d1..c8f93ef7de1 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
@@ -22,17 +22,13 @@ Change the value of `--penguin-belly` to `white` in the `penguin` class.
 The `penguin` class should reassign the `--penguin-belly` variable to `white`.
 
 ```js
-assert(
-  code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
-);
+assert.match(__helpers.removeCssComments(code), /\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
 ```
 
 The `penguin` class should not contain the `background-color` property.
 
 ```js
-assert(
-  code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
-);
+assert.match(__helpers.removeCssComments(code), /^((?!background-color\s*?:\s*?)[\s\S])*$/g);
 ``` 
 
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md
index 1ec9e8ca660..597cd0f5dc2 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md
@@ -32,19 +32,19 @@ Change your `h2` element's style so that its text color is red.
 Your `h2` element should have a `style` declaration.
 
 ```js
-assert($('h2').attr('style'));
+assert.exists(document.querySelector('h2').getAttribute('style'));
 ```
 
 Your `h2` element should have color set to `red`.
 
 ```js
-assert($('h2')[0].style.color === 'red');
+assert.strictEqual(document.querySelector('h2').style.color, 'red');
 ```
 
 Your `style` declaration should end with a `;` .
 
 ```js
-assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
+assert.isTrue(document.querySelector('h2').getAttribute('style').endsWith(';'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
index afb836e7614..aab7db5eaa7 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
@@ -26,7 +26,7 @@ Inside the same `<style>` tag that contains your `red-text` class, create an ent
 Between the `style` tags, give the `p` elements `font-size` of `16px`. Browser and Text zoom should be at 100%.
 
 ```js
-assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
+assert.match(__helpers.removeCssComments(code), /p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i);
 ```
 
 # --seed--
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 e23df3927a3..d8b5f8a55c0 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
@@ -26,9 +26,7 @@ In the `penguin` class, create a variable name `--penguin-skin` and give it a va
 `penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
 
 ```js
-assert(
-  code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
-);
+assert.match(__helpers.removeHtmlComments(code), /\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi);
 ```
 
 # --seed--
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 b7b6171a119..bec6f5b5db3 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
@@ -28,19 +28,21 @@ Create a class called `silver-background` with the `background-color` of `silver
 Your`div` element should have the class `silver-background`.
 
 ```js
-assert($('div').hasClass('silver-background'));
+assert.isTrue(document.querySelector('div').classList.contains('silver-background'));
 ```
 
 Your `div` element should have a silver background.
 
 ```js
-assert($('div').css('background-color') === 'rgb(192, 192, 192)');
+const div = document.querySelector('div');
+const backgroundColor = window.getComputedStyle(div)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(192, 192, 192)');
 ```
 
 A class named `silver-background` should be defined within the `style` element and the value of `silver` should be assigned to the `background-color` property.
 
 ```js
-assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
+assert.match(__helpers.removeHtmlComments(code), /\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/);
 ```
 
 # --seed--
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 a909ea63fc0..315b59f3f86 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
@@ -40,37 +40,29 @@ Import the `Lobster` font to your web page. Then, use an element selector to set
 You should import the `Lobster` font.
 
 ```js
-assert($('link[href*="googleapis" i]').length);
+assert.exists(document.querySelector('link[href*="googleapis" i]'));
 ```
 
 Your `h2` element should use the font `Lobster`.
 
 ```js
-assert(
-  $('h2')
-    .css('font-family')
-    .match(/lobster/i)
-);
+const h2 = document.querySelector('h2'); 
+const fontFamily = window.getComputedStyle(h2)['font-family']; 
+assert.match(fontFamily, /lobster/i);
 ```
 
 You should only use an `h2` element selector to change the font.
 
 ```js
-assert(
-  /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
-    code
-  )
-);
+assert.match(__helpers.removeHtmlComments(code), /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi);
 ```
 
 Your `p` element should still use the font `monospace`.
 
 ```js
-assert(
-  $('p')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const paragraphElement = document.querySelector('p');
+const fontFamily = window.getComputedStyle(paragraphElement)['font-family']; 
+assert.match(fontFamily, /monospace/i);
 ```
 
 # --seed--
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 c95407712b3..126faaa5b69 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
@@ -23,12 +23,10 @@ It looks like a variable is being used to set the background color of the `.red-
 Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
-    )
+const spacelessCode = __helpers.removeWhiteSpace(__helpers.removeCssComments(code));
+assert.match(
+  spacelessCode,
+  /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
 );
 ```
 
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.md
index 5bc6b580ab8..11ded71f854 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.md
@@ -24,8 +24,9 @@ Define a variable named `--penguin-belly` in the `:root` selector and give it th
 The `--penguin-belly` variable should be declared in the `:root` and assigned the value `pink`.
 
 ```js
-assert(
-  code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
+assert.match(
+  __helpers.removeCssComments(code),
+  /:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi
 );
 ```
 
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 55c06fff332..2cf0df6f668 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
@@ -26,61 +26,57 @@ Finally, give your `body` element the font-family of `monospace` by adding `font
 You should create an `h1` element.
 
 ```js
-assert($('h1').length > 0);
+assert.isNotEmpty(document.querySelectorAll('h1'));
 ```
 
 Your `h1` element should have the text `Hello World`.
 
 ```js
-assert(
-  $('h1').length > 0 &&
-    $('h1')
-      .text()
-      .match(/hello world/i)
+assert.match(
+  document.querySelector('h1').textContent,
+  /hello world/i
 );
 ```
 
 Your `h1` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/h1>/g) &&
-    code.match(/<h1/g) &&
-    code.match(/<\/h1>/g).length === code.match(/<h1/g).length
-);
+const commentlessCode = __helpers.removeHtmlComments(code);
+assert.match(commentlessCode, /<\/h1>/g);
+assert.match(commentlessCode, /<h1/g);
+assert.lengthOf(commentlessCode.match(/<\/h1>/g), commentlessCode.match(/<h1/g).length);
 ```
 
 Your `body` element should have the `color` property of `green`.
 
 ```js
-assert($('body').css('color') === 'rgb(0, 128, 0)');
+const bodyElement = document.querySelector('body');
+const color = window.getComputedStyle(bodyElement)['color']; 
+assert.strictEqual(color, 'rgb(0, 128, 0)');
 ```
 
 Your `body` element should have the `font-family` property of `monospace`.
 
 ```js
-assert(
-  $('body')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const bodyElement = document.querySelector('body');
+const fontFamily = window.getComputedStyle(bodyElement)['font-family'];
+assert.include(fontFamily.toLowerCase(), "monospace");
 ```
 
 Your `h1` element should inherit the font `monospace` from your `body` element.
 
 ```js
-assert(
-  $('h1').length > 0 &&
-    $('h1')
-      .css('font-family')
-      .match(/monospace/i)
-);
+const h1Element = document.querySelector('h1');
+const fontFamily = window.getComputedStyle(h1Element)['font-family'];
+assert.include(fontFamily.toLowerCase(), "monospace");
 ```
 
 Your `h1` element should inherit the color `green` from your `body` element.
 
 ```js
-assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color'];
+assert.strictEqual(color, 'rgb(0, 128, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
index da0755abb7a..62d8fbb86a0 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
@@ -20,13 +20,15 @@ Give your cat photo a `border-radius` of `50%`.
 Your image should have a border radius of `50%`, making it perfectly circular.
 
 ```js
-assert(parseInt($('img').css('border-top-left-radius')) > 48);
+const image = document.querySelector('img');
+const borderTopLeftRadius = window.getComputedStyle(image)['border-top-left-radius'];
+assert.strictEqual(parseInt(borderTopLeftRadius), 50);
 ```
 
 The `border-radius` value should use a percentage value of `50%`.
 
 ```js
-assert(code.match(/50%/g));
+assert.match(__helpers.removeCssComments(code), /50%/g);
 ```
 
 # --seed--
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 4c4c24d79d9..695e4f9186f 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
@@ -32,39 +32,41 @@ color: red !important;
 Your `h1` element should have the class `pink-text`.
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 Your `h1` element should have the class `blue-text`.
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 Your `h1` element should have the `id` of `orange-text`.
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text');
 ```
 
 Your `h1` element should have the inline style of `color: white`.
 
 ```js
-assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
+const commentessCode = __helpers.removeHtmlComments(code);
+assert.match(commentessCode, /<h1.*style/gi);
+assert.match(commentessCode, /<h1.*style.*color\s*?:/gi);
 ```
 
 Your `pink-text` class declaration should have the `!important` keyword to override all other declarations.
 
 ```js
-assert(
-  code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
-);
+assert.match(__helpers.removeCssComments(code), /\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g);
 ```
 
 Your `h1` element should be pink.
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 192, 203)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color'];
+assert.strictEqual(color, 'rgb(255, 192, 203)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
index 5ab79faf828..588b0226de5 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
@@ -40,43 +40,45 @@ Create a CSS declaration for your `orange-text` id in your `style` element. Here
 Your `h1` element should have the class `pink-text`.
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 Your `h1` element should have the class `blue-text`.
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 Your `h1` element should have the id of `orange-text`.
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'),'orange-text');
 ```
 
 There should be only one `h1` element.
 
 ```js
-assert($('h1').length === 1);
+assert.lengthOf(document.querySelectorAll('h1'), 1);
 ```
 
 Your `orange-text` id should have a CSS declaration.
 
 ```js
-assert(code.match(/#orange-text\s*{/gi));
+assert.match(__helpers.removeCssComments(code), /#orange-text\s*{/gi);
 ```
 
 Your `h1` should not have any `style` attributes.
 
 ```js
-assert(!code.match(/<h1.*style.*>/gi));
+assert.notMatch(__helpers.removeHtmlComments(code), /<h1.*style.*>/gi);
 ```
 
 Your `h1` element should be orange.
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 165, 0)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 165, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
index b74bc03043a..963d0fe3fd5 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
@@ -28,31 +28,33 @@ Leave the `blue-text` and `pink-text` classes on your `h1` element.
 Your `h1` element should have the class `pink-text`.
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 Your `h1` element should have the class `blue-text`.
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 Your `h1` element should have the id of `orange-text`.
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text');
 ```
 
 Your `h1` element should have an inline style.
 
 ```js
-assert(document.querySelector('h1[style]'));
+assert.exists(document.querySelector('h1[style]'));
 ```
 
 Your `h1` element should be white.
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 255, 255)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 255, 255)');
 ```
 
 # --seed--
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 bc4d64c2e5a..dbf10c107a6 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
@@ -34,25 +34,27 @@ However, the order of the `class` declarations in the `<style>` section is what
 Your `h1` element should have the class `pink-text`.
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 Your `h1` element should have the class `blue-text`.
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 Both `blue-text` and `pink-text` should belong to the same `h1` element.
 
 ```js
-assert($('.pink-text').hasClass('blue-text'));
+assert.isTrue(document.querySelector('.pink-text').classList.contains('blue-text'));
 ```
 
 Your `h1` element should be blue.
 
 ```js
-assert($('h1').css('color') === 'rgb(0, 0, 255)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
index 2f040b7d6a6..a7202c7543d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
@@ -26,19 +26,21 @@ Give your `h1` element the class of `pink-text`.
 Your `h1` element should have the class `pink-text`.
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 Your `<style>` should have a `pink-text` CSS class that changes the `color`.
 
 ```js
-assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
+assert.match(__helpers.removeCssComments(code), /\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g);
 ```
 
 Your `h1` element should be pink.
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 192, 203)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 192, 203)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
index 1cc82af559e..a0f54bef00b 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
@@ -28,12 +28,9 @@ Make all of your `p` elements use the `monospace` font.
 Your `p` elements should use the font `monospace`.
 
 ```js
-assert(
-  $('p')
-    .not('.red-text')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const notRed = document.querySelector('p:not(.red-text)');
+const fontFamily = window.getComputedStyle(notRed)['font-family']; 
+assert.match(fontFamily, /monospace/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
index d4507f03b7c..c93fbcc0c92 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
@@ -30,7 +30,7 @@ Give your `form` element the id `cat-photo-form`.
 Your `form` element should have the id of `cat-photo-form`.
 
 ```js
-assert($('form').attr('id') === 'cat-photo-form');
+assert.strictEqual(document.querySelector('form').getAttribute('id'), 'cat-photo-form');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md
index 2b6a48cbeea..6a9b563d573 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md
@@ -29,19 +29,18 @@ Create a class called `smaller-image` and use it to resize the image so that it'
 Your `img` element should have the class `smaller-image`.
 
 ```js
-assert(
-  $("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']").attr('class')
-    .trim().split(/\s+/g).includes('smaller-image')
-);
+const relaxingCatImage = document.querySelector("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']");
+const catImageClass = relaxingCatImage.getAttribute('class').trim().split(/\s+/g);
+assert.include(catImageClass, 'smaller-image');
 ```
 
 Your image should be 100 pixels wide.
 
 ```js
-assert(
-  $('img').width() < 200 &&
-    code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
-);
+const image = document.querySelector('img');
+const width = image.getBoundingClientRect().width;
+assert.isBelow(width, 200); 
+assert.match(__helpers.removeCssComments(code), /\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i);
 ```
 
 # --seed--
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 7d716bd6aba..517c91624a3 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
@@ -36,33 +36,27 @@ In the last challenge, you imported the `Lobster` font using the `link` tag. Now
 Your h2 element should use the font `Lobster`.
 
 ```js
-assert(
-  $('h2')
-    .css('font-family')
-    .match(/^"?lobster/i)
-);
+const h2Element = document.querySelector('h2');
+const fontFamily = window.getComputedStyle(h2Element)['font-family']; 
+assert.match(fontFamily, /^"?lobster/i);
 ```
 
 Your h2 element should degrade to the font `monospace` when `Lobster` is not available.
 
 ```js
-assert(
-  /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
-    code
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi);
 ```
 
 You should comment out your call to Google for the `Lobster` font by putting `<!--` in front of it.
 
 ```js
-assert(new RegExp('<!--[^fc]', 'gi').test(code));
+assert.match(code, /<!--[^fc]/gi);
 ```
 
 You should close your comment by adding `-->`.
 
 ```js
-assert(new RegExp('[^fc]-->', 'gi').test(code));
+assert.match(code, /[^fc]-->/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
index 7671518f002..a5e35535b22 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
@@ -16,34 +16,42 @@ Classes allow you to use the same CSS styles on multiple HTML elements. You can
 Your `h2` element should be red.
 
 ```js
-assert($('h2').css('color') === 'rgb(255, 0, 0)');
+const h2Element = document.querySelector('h2');
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 Your `h2` element should have the class `red-text`.
 
 ```js
-assert($('h2').hasClass('red-text'));
+assert.isTrue(document.querySelector('h2').classList.contains('red-text'));
 ```
 
 Your first `p` element should be red.
 
 ```js
-assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
+const paragraph = document.querySelectorAll('p')[0];
+const color = window.getComputedStyle(paragraph )['color'];
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 Your second and third `p` elements should not be red.
 
 ```js
-assert(
-  !($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
-    !($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
-);
+const paragraph2 = document.querySelectorAll('p')[1];
+const paragraph3 = document.querySelectorAll('p')[2];
+
+const color2 = window.getComputedStyle(paragraph2)['color'];
+const color3 = window.getComputedStyle(paragraph3)['color'];
+
+assert.notStrictEqual(color2, 'rgb(255, 0, 0)');
+assert.notStrictEqual(color3, 'rgb(255, 0, 0)');
 ```
 
 Your first `p` element should have the class `red-text`.
 
 ```js
-assert($('p:eq(0)').hasClass('red-text'));
+assert.isTrue(document.querySelectorAll('p')[0].classList.contains('red-text'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.md
index 96338530377..7d7a86e7abd 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.md
@@ -30,23 +30,22 @@ body {
 Your `body` element should have the `background-color` of black.
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color'];
+
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 Your CSS rule should be properly formatted with both opening and closing curly brackets.
 
 ```js
-assert(
-  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
-);
+assert.match(code, /<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i);
 ```
 
 Your CSS rule should end with a semicolon.
 
 ```js
-assert(
-  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
-);
+assert.match(code, /<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
index f9e32b8b401..76b7e9004ec 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
@@ -26,18 +26,19 @@ Add a `padding` property to the element with class `red-box` and set it to `1.5e
 Your `red-box` class should have a `padding` property.
 
 ```js
-assert(
-  $('.red-box').css('padding-top') != '0px' &&
-    $('.red-box').css('padding-right') != '0px' &&
-    $('.red-box').css('padding-bottom') != '0px' &&
-    $('.red-box').css('padding-left') != '0px'
-);
+const redBox =document.querySelector('.red-box'); 
+const style = window.getComputedStyle(redBox); 
+
+assert.notEqual(style['padding-top'], '0px');
+assert.notEqual(style['padding-right'], '0px');
+assert.notEqual(style['padding-bottom'], '0px');
+assert.notEqual(style['padding-left'], '0px');
 ```
 
 Your `red-box` class should give elements 1.5em of `padding`.
 
 ```js
-assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
+assert.match(__helpers.removeCssComments(code), /\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi);
 ```
 
 # --seed--
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 3cb7fdf0147..8748a3ac9e0 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
@@ -34,25 +34,27 @@ Give your `h2` element the `class` attribute with a value of `red-text`.
 Your `h2` element should be red.
 
 ```js
-assert($('h2').css('color') === 'rgb(255, 0, 0)');
+const h2Element = document.querySelector('h2'); 
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 Your `h2` element should have the class `red-text`.
 
 ```js
-assert($('h2').hasClass('red-text'));
+assert.isTrue(document.querySelector('h2').classList.contains('red-text'));
 ```
 
 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));
+assert.match(__helpers.removeCssComments(code), /\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g);
 ```
 
 You should not use inline style declarations like `style="color: red"` in your `h2` element.
 
 ```js
-assert($('h2').attr('style') === undefined);
+assert.notExists(document.querySelector('h2').getAttribute('style'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
index fca17c44c68..9cb079769a9 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
@@ -26,41 +26,25 @@ Apply the `--penguin-skin` variable to the `background` property of the `penguin
 The `--penguin-skin` variable should be applied to the `background` property of the `penguin-top` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `penguin-bottom` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `right-hand` class.
 
 ```js
-assert(
-  code.match(
-    /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `left-hand` class.
 
 ```js
-assert(
-  code.match(
-    /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
index 0402ad0782c..65618f279d8 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
@@ -22,21 +22,13 @@ In the `:root` selector of the media query, change it so `--penguin-size` is red
 `:root` should reassign the `--penguin-size` variable to `200px`.
 
 ```js
-assert(
-  code.match(
-    /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi);
 ```
 
 `:root` should reassign the `--penguin-skin` variable to `black`.
 
 ```js
-assert(
-  code.match(
-    /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
index 7b12f11f092..ee96352ea76 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
@@ -26,49 +26,57 @@ Go ahead, try using the abbreviated hex codes to color the correct elements.
 Your `h1` element with the text `I am red!` should be given the `color` red.
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 The abbreviated hex code for the color red should be used instead of the hex code `#FF0000`.
 
 ```js
-assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
+assert.match(code,/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi);
 ```
 
 Your `h1` element with the text `I am green!` should be given the `color` green.
 
 ```js
-assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+const greenText = document.querySelector('.green-text');
+const color = window.getComputedStyle(greenText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 0)');
 ```
 
 The abbreviated hex code for the color green should be used instead of the hex code `#00FF00`.
 
 ```js
-assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi);
 ```
 
 Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
 
 ```js
-assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
+const cyanText = document.querySelector('.cyan-text');
+const color = window.getComputedStyle(cyanText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 255)');
 ```
 
 The abbreviated hex code for the color cyan should be used instead of the hex code `#00FFFF`.
 
 ```js
-assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi);
 ```
 
 Your `h1` element with the text `I am fuchsia!` should be given the `color` fuchsia.
 
 ```js
-assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
+const fuchsiaText = document.querySelector('.fuchsia-text');
+const color = window.getComputedStyle(fuchsiaText)['color']; 
+assert.strictEqual(color,'rgb(255, 0, 255)');
 ```
 
 The abbreviated hex code for the color fuchsia should be used instead of the hex code `#FF00FF`.
 
 ```js
-assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
index 330d732d872..ad51751e867 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
@@ -32,28 +32,29 @@ Try giving your form, which now has the `id` attribute of `cat-photo-form`, a gr
 Your `form` element should have the id of `cat-photo-form`.
 
 ```js
-assert($('form').attr('id') === 'cat-photo-form');
+assert.strictEqual(document.querySelector('form').getAttribute('id'), 'cat-photo-form');
 ```
 
 Your `form` element should have the `background-color` of green.
 
 ```js
-assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
+const catPhotoForm = document.querySelector('#cat-photo-form');
+const backgroundColor = window.getComputedStyle(catPhotoForm)['background-color'];
+assert.strictEqual(backgroundColor, 'rgb(0, 128, 0)');
 ```
 
 Your `form` element should have an `id` attribute.
 
 ```js
-assert(
-  code.match(/<form.*cat-photo-form.*>/gi) &&
-    code.match(/<form.*cat-photo-form.*>/gi).length > 0
-);
+assert.match(__helpers.removeHtmlComments(code), /<form.*cat-photo-form.*>/gi);
+assert.lengthOf(__helpers.removeHtmlComments(code).match(/<form.*cat-photo-form.*>/gi), 1)
 ```
 
 You should not give your `form` any `class` or `style` attributes.
 
 ```js
-assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
+assert.notMatch(__helpers.removeHtmlComments(code), /<form.*style.*>/gi);
+assert.notMatch(__helpers.removeHtmlComments(code), /<form.*class.*>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
index c9d398139fb..7913d60cf06 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
@@ -30,43 +30,29 @@ Using the `type` attribute selector, try to give the checkboxes in CatPhotoApp a
 The `type` attribute selector should be used to select the checkboxes.
 
 ```js
-assert(
-  code.match(
-    /<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
-  )
-);
+assert.match(__helpers.removeHtmlComments(code), /<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi);
 ```
 
 The top margins of the checkboxes should be 10px.
 
 ```js
-assert(
-  (function () {
-    var count = 0;
-    $("[type='checkbox']").each(function () {
-      if ($(this).css('marginTop') === '10px') {
-        count++;
-      }
-    });
-    return count === 3;
-  })()
-);
+const checkboxes = document.querySelectorAll("[type='checkbox']");
+assert.isNotEmpty(checkboxes);
+checkboxes.forEach(function(checkbox) {
+  const marginTop = window.getComputedStyle(checkbox)['margin-top']; 
+  assert.strictEqual(marginTop, '10px');
+});
 ```
 
 The bottom margins of the checkboxes should be 15px.
 
 ```js
-assert(
-  (function () {
-    var count = 0;
-    $("[type='checkbox']").each(function () {
-      if ($(this).css('marginBottom') === '15px') {
-        count++;
-      }
-    });
-    return count === 3;
-  })()
-);
+const checkboxes = document.querySelectorAll("[type='checkbox']");
+assert.isNotEmpty(checkboxes);
+checkboxes.forEach(function(checkbox) {
+  const marginBottom = window.getComputedStyle(checkbox)['margin-bottom']; 
+  assert.strictEqual(marginBottom, '15px');
+});
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
index 00c60af5418..8c85bcc8556 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
@@ -28,35 +28,40 @@ Use Clockwise Notation to give the element with the `blue-box` class a margin of
 Your `blue-box` class should give the top of elements `40px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '40px');
 ```
 
 Your `blue-box` class should give the right of elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginRight = window.getComputedStyle(blueBox)['margin-right'];
+assert.strictEqual(marginRight, '20px');
 ```
 
 Your `blue-box` class should give the bottom of elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
+assert.strictEqual(marginBottom, '20px');
 ```
 
 Your `blue-box` class should give the left of elements `40px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
+assert.strictEqual(marginLeft, '40px');
 ```
 
 You should use the clockwise notation to set the margin of `blue-box` class.
 
 ```js
-assert(
-  /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
-    __helpers.removeCssComments($('style').text())
-  )
-);
+const cssCode = __helpers.removeCssComments(document.querySelector('style:not(.fcc-hide-header)').textContent);
+assert.match(cssCode, /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/);
 ```
 
 # --seed--
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 569d65f3b98..467cbf334cf 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
@@ -26,35 +26,40 @@ Use Clockwise Notation to give the `.blue-box` class a `padding` of `40px` on it
 Your `blue-box` class should give the top of elements `40px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '40px');
 ```
 
 Your `blue-box` class should give the right of elements `20px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
+assert.strictEqual(paddingRight, '20px');
 ```
 
 Your `blue-box` class should give the bottom of elements `20px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
+assert.strictEqual(paddingBottom, '20px');
 ```
 
 Your `blue-box` class should give the left of elements `40px` of `padding`.
 
 ```js
-assert($('.blue-box').css('padding-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
+assert.strictEqual(paddingLeft, '40px');
 ```
 
 You should use the clockwise notation to set the padding of `blue-box` class.
 
 ```js
-assert(
-  /\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
-    __helpers.removeCssComments($('style').text())
-  )
-);
+const css =  __helpers.removeCssComments(document.querySelector('style:not(.fcc-hide-header)').textContent);
+assert.match(css, /\.blue-box\s*{[\s\S]*padding\s*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/);
 ```
 
 # --seed--
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 d32b43c5714..c05e737c2d1 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
@@ -43,39 +43,38 @@ Delete your `h2` element's style attribute, and instead create a CSS `style` blo
 The `style` attribute should be removed from your `h2` element.
 
 ```js
-assert(!$('h2').attr('style'));
+assert.notExists(document.querySelector('h2').getAttribute('style'));
 ```
 
 You should create a `style` element.
 
 ```js
-assert($('style') && $('style').length >= 1);
+assert.exists(document.querySelector('style:not(.fcc-hide-header)'));
+assert.isAtLeast(document.querySelectorAll('style:not(.fcc-hide-header)').length, 1);
 ```
 
 Your `h2` element should be blue.
 
 ```js
-assert($('h2').css('color') === 'rgb(0, 0, 255)');
+const h2Element = document.querySelector('h2');
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 Your stylesheet `h2` declaration should be valid with a semicolon and closing brace.
 
 ```js
-assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
+assert.match(__helpers.removeCssComments(code), /h2\s*\{\s*color\s*:.*;\s*\}/g);
 ```
 
 All your `style` elements should be valid and have closing tags.
 
 ```js
-assert(
-  code.match(/<\/style>/g) &&
-    code.match(/<\/style>/g).length ===
-      (
-        code.match(
-          /<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
-        ) || []
-      ).length
-);
+assert.match(__helpers.removeHtmlComments(code), /<\/style>/g);
+
+const closingElementLength = __helpers.removeHtmlComments(code).match(/<\/style>/g).length;
+const openingElementsLength = __helpers.removeHtmlComments(code).match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g).length;
+assert.strictEqual(closingElementLength, openingElementsLength);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
index 61f62132c6f..834725d09cb 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
@@ -22,25 +22,19 @@ In the `penguin` class, change the `black` value to `gray`, the `gray` value to
 `penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
-);
+assert.match(__helpers.removeHtmlComments(code), /.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` class should declare the `--penguin-belly` variable and assign it to `white`.
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
-);
+assert.match(code, /.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` class should declare the `--penguin-beak` variable and assign it to `orange`.
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
-);
+assert.match(code, /.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
index 5e66a0543dd..8270e5544e0 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
@@ -30,17 +30,15 @@ Replace the word `black` in our `body` element's background-color with its hex c
 Your `body` element should have the `background-color` of black.
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 The hex code for the color black should be used instead of the word `black`.
 
 ```js
-assert(
-  code.match(
-    /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
-  )
-);
+assert.match(code, /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
index d2a93e41223..09d025eeaa7 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
@@ -30,49 +30,58 @@ Replace the color words in our `style` element with their correct hex codes.
 Your `h1` element with the text `I am red!` should be given the `color` red.
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 The `hex code` for the color red should be used instead of the word `red`.
 
 ```js
-assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
+assert.match(code, /\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi);
 ```
 
 Your `h1` element with the text `I am green!` should be given the `color` green.
 
 ```js
-assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+const greenText = document.querySelector('.green-text');
+const color = window.getComputedStyle(greenText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 0)');
 ```
 
 The `hex code` for the color green should be used instead of the word `green`.
 
 ```js
-assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
+assert.match(code, /\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi);
 ```
 
 Your `h1` element with the text `I am dodger blue!` should be given the `color` dodger blue.
 
 ```js
-assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
+const blueText = document.querySelector('.dodger-blue-text');
+const color = window.getComputedStyle(blueText)['color']; 
+assert.strictEqual(color, 'rgb(30, 144, 255)');
 ```
 
 The `hex code` for the color dodger blue should be used instead of the word `dodgerblue`.
 
 ```js
-assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
+assert.match(code, /\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi);
 ```
 
 Your `h1` element with the text `I am orange!` should be given the `color` orange.
 
 ```js
-assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
+const orangeText = document.querySelector('.orange-text');
+const color = window.getComputedStyle(orangeText)['color']; 
+
+assert.strictEqual(color, 'rgb(255, 165, 0)');
 ```
 
 The `hex code` for the color orange should be used instead of the word `orange`.
 
 ```js
-assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
+assert.match(code, /\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
index c8e3a6e16de..07f2433ce19 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
@@ -22,65 +22,57 @@ Replace the hex codes in our `style` element with their correct RGB values.
 Your `h1` element with the text `I am red!` should have the `color` red.
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 You should use `rgb` for the color red.
 
 ```js
-assert(
-  code.match(
-    /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(code, /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi);
 ```
 
 Your `h1` element with the text `I am orchid!` should have the `color` orchid.
 
 ```js
-assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
+const orchidText = document.querySelector('.orchid-text');
+const color = window.getComputedStyle(orchidText)['color']; 
+assert.strictEqual(color, 'rgb(218, 112, 214)');
 ```
 
 You should use `rgb` for the color orchid.
 
 ```js
-assert(
-  code.match(
-    /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi);
 ```
 
 Your `h1` element with the text `I am blue!` should have the `color` blue.
 
 ```js
-assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
+const blueText = document.querySelector('.blue-text');
+const color = window.getComputedStyle(blueText)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 You should use `rgb` for the color blue.
 
 ```js
-assert(
-  code.match(
-    /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi);
 ```
 
 Your `h1` element with the text `I am sienna!` should have the `color` sienna.
 
 ```js
-assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
+const siennaText = document.querySelector('.sienna-text');
+const color = window.getComputedStyle(siennaText)['color']; 
+assert.strictEqual(color, 'rgb(160, 82, 45)');
 ```
 
 You should use `rgb` for the color sienna.
 
 ```js
-assert(
-  code.match(
-    /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi);
 ```
 
 # --seed--
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 a280b1cfad0..3bf8e3d2f9b 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
@@ -44,13 +44,15 @@ Let's replace the hex code in our `body` element's background color with the RGB
 Your `body` element should have a black background.
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 You should use `rgb` to give your `body` element a background of black.
 
 ```js
-assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
+assert.match(__helpers.removeCssComments(code), /rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi);
 ```
 
 # --seed--