fix(curriculum): update tests, remove self-closing (freeCodeCamp#55544)

Author: lasjorg

curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md

@@ -13,60 +13,78 @@ Your font stylesheet will load three separate fonts: `Anton`, `Baskervville`, an
 
 # --hints--
 
-Your code should have three self-closing `link` elements.
+Your code should have three `link` elements.
 
 ```js
-assert(document.querySelectorAll('link').length === 3);
+assert.strictEqual(document.querySelectorAll('link')?.length, 3);
 ```
 
-Your `link` element should be within your `head` element.
+Your `link` elements should be inside your `head` element.
 
 ```js
-assert(document.querySelectorAll('head > link').length === 3);
+const headContentRegex = /(?<=<head\s*>)(?:.|\s*)*?(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.strictEqual(headElement.querySelectorAll('link')?.length, 3);
 ```
 
 Your three `link` elements should have a `rel` attribute with the value `stylesheet`.
 
 ```js
 const links = [...document.querySelectorAll('link')];
-assert(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
 ```
 
 One of your link elements should have the `href` set to `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap`.
 
 ```js
 const links = [...document.querySelectorAll('link')];
-assert(links.find(link => link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap'));
+assert.exists(links.find(link => link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap'));
 ```
 
 One of your link elements should have the `href` set to `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
 
 ```js
 const links = [...document.querySelectorAll('link')];
-assert(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css'));
+assert.exists(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css'));
 ```
 
-One of your `link` elements should have an `href` attribute with the value `styles.css`.
+One of your `link` elements should have the `href` set to `styles.css`.
 
 ```js
-assert.match(code, /<link[\s\S]*?href\s*=\s*('|"|`)(\.\/)?styles\.css\1/)
+const styleElement = document.querySelector('[data-href]');
+assert.isNotNull(styleElement);
+assert.strictEqual(styleElement?.getAttribute('data-href'), 'styles.css');
 ```
 
 Your code should have a `title` element.
 
 ```js
 const title = document.querySelector('title');
-assert.exists(title);
+assert.isNotNull(title);
 ```
 
-Your project should have a title of `Magazine`.
+Your code should have one `title` element.
 
 ```js
-const title = document.querySelector('title');
-assert.equal(title?.text?.trim()?.toLowerCase(), 'magazine')
+const title = document.querySelectorAll('title');
+assert.strictEqual(title?.length, 1);
+```
+
+Your `title` element should be inside your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)(?:.|\s*)*?(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('title'));
 ```
 
-Remember, the casing and spelling matter for the title.
+Your project should have a title of `Magazine`. Remember, the casing and spelling matter for the title.
 
 ```js
 const title = document.querySelector('title');