Build a Cat Blog Page - Step 18

HTML-CSS
1

Tell us what’s happening:

[01-12-2025 13:38] bala ajaykumar63: Step 18
To improve user experience, you will want to enhance the phone number so that users tap on it and initiate a call.

Here is how you can make phone numbers clickable:

Example Code
234-567-8912
Wrap the text 555-555-5555 in an anchor element and use tel: to make it a clickable phone number.

        quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
      </p>
      <p>
        Lorem ipsum dolor

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 in the garden"
        />
        <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>
      <section id="about">
        <h2>About</h2>
        <p>
          Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers.
        </p>
        <p>
          His playful nature and boundless energy keeps me on my toes. I love him so much.
        </p>
      </section>
      <section id="posts">
        <h2>Posts</h2>

        <article>
          <h3>Mr. Whiskers' First Day Home</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
        </article>
        <article>
          <h3>Mr. Whiskers' First Bath</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
        </article>
        <article>
          <h3>Mr. Whiskers' First Birthday Party</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
        </article>
      </section>

<!-- User Editable Region -->

     <footer>
      <section id="contact">
        <h2>Contact</h2>
        <address>
          <a href="tel:5555555555">555-555-5555</a>
        </address>
      </section>
    </footer>


<!-- User Editable Region -->

  </body>
</html>

Your browser information:

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

Challenge Information:

Build a Cat Blog Page - Step 18

2

Hi.

You have changed the seed code. I suggest you reset and try again. You only need to add an anchor element around the phone number as in the instructions. Don’t delete anything else.

3 
<footer>
      <section id="contact">
        <h2>Contact</h2>
        <address>   
          <a href="tel:5555555555">555-555-5555</a>
        </address>
      </section>
    </footer>

this 18 step not excuted out put

4

Your anchor element and attribute is right but your issue you have deleted the code already there. If you reset the step and compare with the above you will see what you have deleted. That won’t pass because of this.

5 
<footer>
      <section id="contact">
        <h2>Contact</h2>
        <address>
          <a href="tel:5555555555">555-555-5555</a>
        </address>
      </section>
    </footer>
6

If your question is to ask why this code hasn’t passed please see my replies above.

If you have another question please set this out.

<footer>
      <section id="contact">
        <h2>Contact</h2>
        <address>
          <a href="tel:5555555555">555-555-5555</a>
        </address>
      </section>
    </footer>
7

Screenshot 2025-12-01 135604
Screenshot 2025-12-01 1356041889×743 299 KB
<footer> <section id="contact"> <h2>Contact</h2> <address> <a href="tel:5555555555">555-555-5555</a> </address> </section> </footer>

8

I have got your code, no need to keep posting it or posting pictures of it.

Can you please reset the step and input into the forum what the code was that was originally there in the edit window before you started this step.

Bear with me, this is another way for you to try and see where you have gone wrong