curriculum/challenges/english/blocks/workshop-magazine/614385513d91ae5c251c2052.md
In this workshop, you will create a magazine page using a press release from a previous version of freeCodeCamp's curriculum.
Begin with adding a link element for the https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap font stylesheet, a link for the https://use.fontawesome.com/releases/v5.8.2/css/all.css FontAwesome stylesheet, and a link for your ./styles.css stylesheet.
Your font stylesheet will load three separate fonts: Anton, Baskervville, and Raleway.
Your code should have three link elements.
assert.strictEqual(document.querySelectorAll('link')?.length, 3);
Your link elements should be inside your head element.
const headContentRegex = /(?<=<head\s*>)[\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.
const links = [...document.querySelectorAll('link')];
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.
const links = [...document.querySelectorAll('link')];
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.
const links = [...document.querySelectorAll('link')];
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 the href set to styles.css.
const styleElement = document.querySelector('[data-href]');
assert.isNotNull(styleElement);
assert.strictEqual(styleElement?.getAttribute('data-href'), 'styles.css');
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magazine</title>
</head>
--fcc-editable-region--
<body>
</body>
</html>