Build a Cat Blog Page - Step 9

HTML-CSS
1

Tell us what’s happening:

I Did what i was told to do in the errors but still my code has errors

Your code so far

<!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>
        <img
          src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
          alt="a cat peacefully sleeping"
        />
        <figcaption>Mr. Whiskers Sleeping</figcaption>
      </figure>

<!-- User Editable Region -->

      <nav>
        <ul>
          <li><a href="#about"</a></li>
          <li><a href="#posts"</a></li>
          <li><a href="#contact"</a></li>
        </ul>
      </nav>

<!-- User Editable Region -->

    </header>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Cat Blog Page - Step 9

1 Like
2

Hi,
The opening a tags need a >. You’re also missing the text that should be added inside each anchor element.

3

it is still giving me same errors

4 
type or paste code here
```    <nav>
        <ul>
          <li> <a> about href="#about"</a> </li>
          <li> <a> href="#posts"</a> </li>
          <li> <a> href="#contact"</a> </li>

        </ul>
      </nav>
5

The href attribute goes inside the opening anchor tag. You need to add some text between the opening and closing tags as well. Give it another try.
Good luck!

6

Hii you need to use texts About, Posts, Contact in between your anchor tags.

And the href tag should be in opening anchor tag.


<li><a href="#text">Text</a></li>

See this how you need to use it.

Hope you understand.

1 Like
7

Tell us what’s happening:

i have followed the instructions but still my code has errors

Your code so far

<!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>
        <img
          src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
          alt="a cat peacefully sleeping"
        />
        <figcaption>Mr. Whiskers Sleeping</figcaption>
      </figure>

<!-- User Editable Region -->

      <nav>
        <ul>
          <li> About <a> about href="#about"</a> </li>
          <li> <a> href="#posts"</a> </li>
          <li> <a> href="#contact"</a> </li>

        </ul>
      </nav>

<!-- User Editable Region -->

    </header>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Cat Blog Page - Step 9

8

Hi. I suggest you reset the step to get the code back.

As a hint, the text in the instructions is in uppercase. The attribute value for the href attribute are in lowercase. Attributes should be inside the opening anchor element tags.

The anchor elements themselves need to wrap about the text to make it clickable to the link in the href attribute. Have a look at the preview window to see if you do this, if not you need to still work on it.

If you are having problems please post your updated code back to this thread.

1 Like
9

Tell us what’s happening:

I wrote my code exactly how I am told to but there are still errors

Your code so far

<!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>
        <img
          src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
          alt="a cat peacefully sleeping"
        />
        <figcaption>Mr. Whiskers Sleeping</figcaption>
      </figure>

<!-- User Editable Region -->

      <nav>
        <ul>
          <li><a href="#about"</a>About</li>
          <li><a href="#posts"</a>Posts</li>
          <li><a href="#contact"</a>Contact</li>

        </ul>
      </nav>

<!-- User Editable Region -->

    </header>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Cat Blog Page - Step 9

10

Are your anchor tags properly closed?

Check your anchor tags. [ the <a> tags]

11

image
image507×102 10.5 KB

image
image832×249 11.7 KB

Your text should be nested in the anchor elements so the texts will be a link

12

Also the closing tags of your anchor elements are missed
image

13

Tell us what’s happening:

these are the errors im getting when i run my code
// running tests
3. Your second anchor element should have the text of Posts inside your second li element.
4. Your second anchor element should have an href attribute set to “#posts”.
5. Your third anchor element should have the text of Contact inside your third li element.
6. Your third anchor element should have an href attribute set to “#contact”.
// tests completed

Your code so far

<!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>
        <img
          src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
          alt="a cat peacefully sleeping"
        />
        <figcaption>Mr. Whiskers Sleeping</figcaption>
      </figure>

<!-- User Editable Region -->

      <nav>
        <ul>
          <li><a href="#about"</a>About</li>
          <li><a href="#posts"</a>Posts</li>
          <li><a href="#contact"</a>Contact</li>

        </ul>
      </nav>

<!-- User Editable Region -->

    </header>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Cat Blog Page - Step 9

14

this is your anchor element, you may notice it does not have text inside

15

You have created 4 topics for step 9, do not open multiple topics for the same challenge. This time I am going to merge them all together, but keep it in mind,

16

I did its still giving me errors

17

I need help im lost I did what i was instructed but still my code us incorrect

18

Can you share your updated code please?

19

you can continue posting in this same topic, do not open a new topic

20

Tell us what’s happening:

I AM CONFUSED ON HOW MY CODE IS INNCORRECT HELP!!!

Your code so far

<!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>
        <img
          src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
          alt="a cat peacefully sleeping"
        />
        <figcaption>Mr. Whiskers Sleeping</figcaption>
      </figure>

<!-- User Editable Region -->

      <nav>
        <ul>
          <li><a href="#about"</a>About</li>
          <li><a href="#posts"</a>Posts</li>
          <li><a href="#contact"</a>Contact</li>

        </ul>
      </nav>

<!-- User Editable Region -->

    </header>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Cat Blog Page - Step 9