Learn Basic CSS by Building a Cafe Menu - Step 32

HTML-CSS
1

Tell us what’s happening:

I need help checking my code for the class element because I’ve done exactly what it asks and it still says its wrong. Thank you!

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 (X11; Ubuntu; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 32

Screenshot from 2025-04-01 23-14-22
Screenshot from 2025-04-01 23-14-221085×939 89.1 KB

2

Hi @pit6564 !

Welcome to the forum!

It is incorrect because you have syntax errors here

Refer back to earlier places where you had to add a class to an element and compare that with that you are trying to do here. That will help you see your issue.

You can also review classes in this video here

Once you fix that, then it will pass

3

I am to this very day still stuck, i can’t see the error that you see

4

Hey,
the class attribute should be added inside the opening tag of an element. Look at your div element and see if you can spot the difference.
If you’re still facing errors, you can share your code and we’ll help.
Good luck!

5

your opening tag is <p> the class attribute is after that, so it’s not inside the opening tag and is not being applied, it must be inside the opening tag, that means before the >

6

Screenshot from 2025-04-13 23-10-13
Screenshot from 2025-04-13 23-10-131085×939 88.3 KB

i tried deleting that > and it still wont take it

7

Hi again,
It looks like you’ve edited the orginal code. There is supposed to be an opening article tag above the coffee h2 tag. Reset your code to get it back and just add the class to your p element.

8

Screenshot from 2025-04-15 23-28-19
Screenshot from 2025-04-15 23-28-191085×939 92 KB

i reset it and added, it still won’t go through. i have the article code up above before the prompt. i appreciate all your help.

9

Hi again,
Can you share the code with us? You can add the code in the editor, select it and press Ctrl + e to make it readable.
If everything is correct and it’s still not passing, then I suggest using a different browser or hard refreshing the page.

1 Like
12 
<!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>
            <p class="flavor">French Vanilla</p>
            <p>3.00</p>
          </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>
13

Okay, so this passes for me.
Please try one of the following steps to move forward.

Force a refresh of your page with CTRL + F5.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers).

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

14

what happens when you click “Check your code”? what error do you get?