Learn Basic CSS by Building a Cafe Menu - Step 36

HTML-CSS
1

Can someone show me an example of a class attribute? This is what I have so far.

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><p class="item"></p>
            <p class="flavor">French Vanilla</p>
            <p class="price">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>

/* 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;
}

.flavor {
  text-align: left;
}

.price {
  text-align: right;
}

Your browser information:

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

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

Link to the challenge:

2

You have a ton of examples of class attributes in your code.

3

I don’t understand what is wrong . Does anyone see an error??

          <article><p class="item"></p>
            <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>
          </article>
4

yes, you added a p element but the exercise didn’t ask for one.

Instead the exercise says

Add a class attribute with the value item to the first article element under the Coffee heading.

5

is this a correct example of a p class?

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><p class="item">
            <p class="flavor">French Vanilla</p>
            <p class="price">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>

/* 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;
}

.flavor {
  text-align: left;
}

.price {
  text-align: right;
}

Your browser information:

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

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

Link to the challenge:

6

That is a p element.
P elements are for making paragraphs.

The step you are on has different instructions unrelated to p elements.

Add a class attribute with the value item to the first article element under the Coffee heading.

7

What is a class attribute?

8 
   <h2>Coffee</h2>
      <article> <class="item">
        <p class="flavor">French Vanilla</p>
        <p class="price">3.00</p>
      </article>

Is this closer??

1 Like
9

You have already added several class attributes to elements, such as the flavor class and price class on the p elements.

1 Like
10

Please do not create duplicate topics on the forum. As I explained before, this is not considered good use of the forum (as mentioned to you before here)

I have merged the duplicates.

11

A class attribute is applied to an element, such as <p>. As many have noted, you already have multiple classes in your code. Ideally, a class attribute would be on multiple items of a similar type.

For example, in your code, you have the classes of “flavor” and “price” in the first set of menu items, but not in the rest. So all flavors should have the class of “flavor”, and all prices should have the class of “price.”

Remember, the class is added as an attribute to an element (as you have done correctly in your first two <p> elements. Your brackets after <article> that say just <class="item"> are not applying the class to anything - what you would want to do is add that “item” class to article.

Does that make more sense now?

12

same with mine also like this what could be the the problem.

13

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

14

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