Learn Basic CSS by Building a Cafe Menu - Step 32

HTML-CSS
1

Tell us what’s happening:

I have gone through several previous posts looking for what I am doing wrong. I am supposed to add the class name flavor to the French Vanilla “p” element. I keep getting the same error, “You should add the flavor class to your “p” element.” <p>class="flavor" French Vanilla</p>

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">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article>

<!-- User Editable Region -->

            <p>class="flavor" French Vanilla </p>
            <p>3.00</p>

<!-- User Editable Region -->

          </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 32

2

Hi there! Look at the example:

<div class="first"></div>
1 Like
3

put the class inside the opening of the p element
Ex:

<p class="flavor" > ..... </p>
1 Like
4

Where you are going wrong is that when you add classes (or any other times when you have a something=“something”, it needs to be within the <>.

Your code of

class=“flavor” French Vanilla

would display “class=“flavor” French Vanilla”

The correct code would be:

French Vanilla

1 Like
5

hi @jwhoisfondofit

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
6

Thank y’all for the help!

2 Likes
7

Gotcha. Sorry for causing a problem. I still don’t quite understand where my mistake was though. You did not reply with the same message to PauloRodrigues and I can’t see a real difference between what he posted and what I posted. I don’t mean that to be argumentative; I fully accept that my post was detrimental to what the forums are for. I am asking for help in understanding the difference between ours posts and what makes for an acceptable vs unacceptable post.

1 Like
8

Hi there @jwhoisfondofit !

You should not post the original code. You added exact line of code and @PauloRodrigues only added an empty paragraph with required class attribute and it’s value.

1 Like
9

your code is not formatted so it doesn’t appear, but here you wrote the exact code to write, please avoid doing that

1 Like
10

That makes sense. Thanks for the follow up, I really appreciate it.

11

I appreciate the help. I think I understand better what’s acceptable here, and I’ll try to do better in the future.