Learn Basic CSS by Building a Cafe Menu - Step 31

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**
/* 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">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article>
          <p1>French Vanilla</p1>
          <p2>3.00</p2>
        </article>
      </section>
    </main>
  </div>
</body>
</html>
/* file: styles.css */
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

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

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

Hi, I’ve never saw p2 element before, that’s the issue I guess
Edit. The same can be said about p1

Forgot to add the question but the task is to add 2 “p” elements nested in the article element (French Vanilla + 3.00). I figured out that I shouldn’t number the “p” elements - what’s the impact of number the “p” elements in this example? why would that be incorrect?

HTML doesn’t know about p1 or p2. It knows only p.

It’s like using words which don’t exist when speaking

1 Like