Learn Basic CSS by Building a Cafe Menu - Step 64

Step 64
Inside the footer, add a p element. Then, nest an anchor (a) element in the p that links to https://www.freecodecamp.org and has the text Visit our website.

    </section>
  </main>
  <footer>
    <p <a="https://www.freecodecamp.org"></p>
    
  </footer>
</div>
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>

<!-- User Editable Region -->

      <footer>
        <p <a="https://www.freecodecamp.org"></p>
        
      </footer>

<!-- User Editable Region -->

    </div>
  </body>
</html>
/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%
}

Your browser information:

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

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 64

Link to the challenge:

Remember, a tag always starts with < and ends with >. Does your opening p tag have both?

You need to use the href attribute on the opening a tag to tell it where to link to.

A link needs both an opening a tag and a closing a tag.

The text for the link goes between the opening and closing a tags.

You might want to revisit the final step of the Cat Photo App and look at the HTML to see how you created the links in that course if you are still having issues.

Hello @nelcowara !

I think there is a bit of misunderstanding of the instructions.

We are not to place the anchor within the opening p element tag.
Both the opening and closing anchor tags need to go between the p element tags.

Then, do not forget to place the text between the anchor tags, as instructed. Do not leave any space between the text and the anchor tags.

Example:

[quote="nelcowara, post:1, topic:645066"]
` <h2>Desserts</h2>`
[/quote]

See how the h2 tags are touching the text on both side. This is how the anchor should touch the text in this step. Do not leave any spaces between the tags, nor the text.

Example: 
<h2><p>text<p><h2>

Suggestion:
Reset the step and copy and paste as much of the instruction as you can for the step to avoid any typing errors.
Do not place a period at the end of the text.

I hope this helps you on your coding journey.

Hey buddy you give a good trial Well Done for it but kindly change some little things.

First, Complete your p tag with text as given in instructions.

<p>Hello World</p>

Second, just convert this given text into a link by just wrapping this into an anchor tag.

<p><a href="link">Hello World</a></p>

See how simple is this now my text Hello World will convert into a link.

Hope you understand.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.