fix(curriculum): replace self-closing with void element, update tests (#55430)

curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md

@@ -9,26 +9,32 @@ dashedName: step-3
 
 The `title` is one of several elements that provide extra information not visible on the web page, but it is useful for search engines or how the page gets displayed.
 
-Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing.
+Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page.
 
 # --hints--
 
 You should have a `meta` tag.
 
 ```js
-assert(code.match(/<meta.*?\/?>/is));
+assert.match(code, /<meta.*?\/?>/is);
+```
+
+The `meta` element is a void element, it should not have an end tag `</meta>`.
+
+```js
+assert.notMatch(code, /<\/meta>/i);
 ```
 
 Your `meta` tag should have a `charset` attribute.
 
 ```js
-assert(code.match(/<meta\s+charset\s*=/i));
+assert.match(code, /<meta\s+charset\s*/i);
 ```
 
 Your `charset` attribute should have a value of `utf-8`.
 
 ```js
-assert(code.match(/charset\s*=\s*('|")utf-8\1/i));
+assert.match(code, /charset\s*=\s*('|")utf-8\1/i);
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md

@@ -15,42 +15,48 @@ Your code should have a `link` element.
 
 ```js
 const link = document.querySelector('link');
-assert(link);
+assert.isNotNull(link);
+```
+
+The `link` element is a void element, it should not have an end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/i);
 ```
 
 You should not change your existing `head` element. Make sure you did not delete the closing tag.
 
 ```js
-assert($('head').length === 1);
+const headElementCount = document.querySelectorAll('head')?.length;
+assert.strictEqual(headElementCount, 1);
 ```
 
-You should have one self-closing `link` element.
+You should have one `link` element.
 
 ```js
-const link = document.querySelectorAll('link');
-assert(link.length === 1);
+const linkElementCount = document.querySelectorAll('link')?.length;
+assert.strictEqual(linkElementCount, 1);
 ```
 
 Your `link` element should be within your `head` element.
 
 ```js
 const link = document.querySelector('head > link');
-assert(link);
+assert.isNotNull(link);
 ```
 
 Your `link` element should have a `rel` attribute with the value `stylesheet`.
 
 ```js
-const link = document.querySelector('link')
-const rel = link.getAttribute('rel')
-assert(rel == `stylesheet`)
+const linkRelValue = document.querySelector('link')?.getAttribute('rel');
+assert.strictEqual(linkRelValue, 'stylesheet');
 ```
 
 Your `link` element should have an `href` attribute with the value `styles.css`.
 
 ```js
-const link = document.querySelector('link')
-assert(link.dataset.href == 'styles.css')
+const linkHrefValue = document.querySelector('link')?.dataset?.href;
+assert.strictEqual(linkHrefValue, 'styles.css');
 
 ```
 

curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md

@@ -9,34 +9,42 @@ dashedName: step-66
 
 You can use an `hr` element to display a divider between sections of different content.
 
-First, add an `hr` element between the `p` element with the class `established` and the first `section` element. Note that `hr` elements are self closing.
+First, add an `hr` element between the `p` element with the class `established` and the first `section` element.
 
 # --hints--
 
-You should add an `hr` element. `hr` elements are self-closing.
+You should add an `hr` element.
 
 ```js
-assert(code.match(/<hr\s?\/?>/i));
-assert(!code.match(/<\/hr>/i));
+assert.match(code, /<hr\s?\/?>/i);
+```
+
+The `hr` element is a void element, it should not have an end tag `</hr>`.
+
+```js
+assert.notMatch(code, /<\/hr>/i);
 ```
 
 You should not change your existing `p` element with the class `established`.
 
 ```js
-assert($('p.established').length === 1);
+const pElementCount = document.querySelectorAll('p.established')?.length;
+assert.strictEqual(pElementCount, 1);
 ```
 
 You should not change your existing `main` element.
 
 ```js
-assert($('main').length === 1);
+const mainElementCount = document.querySelectorAll('main')?.length;
+assert.strictEqual(mainElementCount, 1);
 ```
 
 Your `hr` element should be between your `p` element and your `section` element.
 
 ```js
-assert($('hr')[0].previousElementSibling.tagName === 'P');
-assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+const hrElement = document.querySelector('hr');
+assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P');
+assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md

@@ -13,22 +13,31 @@ Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp
 
 # --hints--
 
-You should have an `<img>` tag. Remember that `img` elements are self-closing.
+You should have an `<img>` tag.
 
 ```js
-assert($('img').length === 1);
+const imageElementCount = document.querySelectorAll('img')?.length;
+assert.strictEqual(imageElementCount, 1);
 ```
 
-Your `img` element should have a `src` attribute of `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+The `img` element is a void element, it should not have an end tag `</img>`.
 
 ```js
-assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+assert.notMatch(code, /<\/img>/i);
 ```
 
-Your `img` element should have an `alt` attribute of `coffee icon`.
+Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`.
 
 ```js
-assert($('img').attr('alt').match(/coffee icon/i));
+const imageSrcValue = document.querySelector('img')?.getAttribute('src');
+assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+Your `img` element should have an `alt` attribute, with the value `"coffee icon"`.
+
+```js
+const imageAltValue = document.querySelector('img')?.getAttribute('alt');
+assert.match(imageAltValue, /coffee icon/i);
 ```
 
 # --seed--