--description--

Inside each of the li elements, you will need to have an anchor element.

For the first anchor element, the text should be About and the href attribute value should be "#about". The hash symbol in front of about represents an id name, which will be added later in the project.

For the second anchor element, the text should be Posts and the href attribute value should be "#posts".

For the third anchor element, the text should be Contact and the href attribute value should be "#contact".

--hints--

Your first anchor element should have the text of About inside your first li element.

const anchorElement = document.querySelector("ul li:first-child a");
assert.strictEqual(anchorElement?.innerText.trim(), "About");

Your first anchor element should have an href attribute set to "#about".

const anchorElement = document.querySelector("ul li:first-child a");
const hrefAttribute = anchorElement?.getAttribute("href");
assert.strictEqual(hrefAttribute, "#about");

Your second anchor element should have the text of Posts inside your second li element.

const anchorElement = document.querySelector("ul li:nth-child(2) a");
assert.strictEqual(anchorElement?.innerText.trim(), "Posts");

Your second anchor element should have an href attribute set to "#posts".

const anchorElement = document.querySelector("ul li:nth-child(2) a");
const hrefAttribute = anchorElement?.getAttribute("href");
assert.strictEqual(hrefAttribute, "#posts");

Your third anchor element should have the text of Contact inside your third li element.

const anchorElement = document.querySelector("ul li:last-child a");
assert.strictEqual(anchorElement?.innerText.trim(), "Contact");

Your third anchor element should have an href attribute set to "#contact".

const anchorElement = document.querySelector("ul li:last-child a");
const hrefAttribute = anchorElement?.getAttribute("href");
assert.strictEqual(hrefAttribute, "#contact");

--seed--

--seed-contents--

html

<!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>
--fcc-editable-region--
          <li></li>
          <li></li>
          <li></li>
--fcc-editable-region--
        </ul>
      </nav>
    </header>
  </body>
</html>

Step 5

--description--

--hints--

--seed--

--seed-contents--