curriculum/challenges/english/blocks/workshop-blog-page/669fde2081f65141ad703fe4.md
The first section on the page will be the about section. The section will introduce Mr. Whiskers and give users an idea of what this blog is about.
Inside your main element, add a section element with the id attribute set to "about".
Inside the section element, add an h2 with the text of About.
Your section element should have an opening tag.
assert.match(code, /<section.*>/);
Your section element should have a closing tag.
assert.match(code, /<\/section\>/);
Your section element should have an id set to "about".
const sectionElement = document.querySelector('section');
assert.strictEqual(sectionElement?.getAttribute("id"), "about");
Your section element should be within your main element.
const sectionElement = document.getElementById('about');
assert.strictEqual(sectionElement?.parentElement.tagName, 'MAIN');
Your h2 element should have an opening tag.
assert.match(code, /<h2\>/);
Your h2 element should have a closing tag.
assert.match(code, /<\/h2\>/);
Your h2 element should have the text of About. Double check your spelling.
const h2Element = document.querySelector('body h2');
assert.strictEqual(h2Element?.innerText.trim(), "About");
Your h2 element should be within your section element.
const h2Element = document.querySelector('#about h2');
assert.strictEqual(h2Element?.parentElement.tagName, 'SECTION');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mr. Whiskers' Blog</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Welcome to Mr. Whiskers' Blog Page!</h1>
<figure>
<figcaption>Mr. Whiskers in the Garden</figcaption>
</figure>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
--fcc-editable-region--
--fcc-editable-region--
</main>
</body>
</html>