# Learn Basic CSS by Building a Cafe Menu - Step 33

**URL:** <https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [September 30, 2022, 10:59pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154 "2022-09-30T22:59:32Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheRealPharaohFresh](https://avatars.discourse-cdn.com/v4/letter/t/8e7dd6/32.png) [@TheRealPharaohFresh](https://forum.freecodecamp.org/u/TheRealPharaohFresh)\
**Post date:** [September 30, 2022, 10:59pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/1 "2022-09-30T22:59:33Z")

</div>

**Tell us what’s happening:**  
Describe your issue in detail here.  
I am totally confused as to how to add the class inside the p element, check my code to see my thought of what that ment

**Your code so far**

```html
<!-- 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>
            <p>class=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>

```

```css
/* 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/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15`

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

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-33)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [September 30, 2022, 11:14pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/2 "2022-09-30T23:14:18Z")

</div>

> [@TheRealPharaohFresh](#):
>
> `<div class="menu">`

just do it the same way you did here

---

<div class="post-metadata">

**Author:** ![TheRealPharaohFresh](https://avatars.discourse-cdn.com/v4/letter/t/8e7dd6/32.png) [@TheRealPharaohFresh](https://forum.freecodecamp.org/u/TheRealPharaohFresh)\
**Post date:** [October 2, 2022, 6:21pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/3 "2022-10-02T18:21:03Z")

</div>

**Tell us what’s happening:**  
Describe your issue in detail here.  
what did I do wrong, I’ve looked through a bunch of forums none with details I could really use, please help  
**Your code so far**

```html
<!-- 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>
            <p 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>

```

```css
/* 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/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15`

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

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-33)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [October 2, 2022, 6:24pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/4 "2022-10-02T18:24:23Z")

</div>

> [@TheRealPharaohFresh](#):
>
> ```auto
> <div class="menu">
> <header>
> <h1>CAMPER CAFE</h1>
> <p>Est. 2020</p>
> </header>
> <main>
> <section>
> <h2>Coffee</h2>
> <article>
> <p flavor="French Vanilla"</p>
> 
> ```

the top line of the quoted code block shows the proper way to create a class attribute.  
There is no such thing as a ‘flavor’ attribute which is what you are trying to make.

---

<div class="post-metadata">

**Author:** ![TheRealPharaohFresh](https://avatars.discourse-cdn.com/v4/letter/t/8e7dd6/32.png) [@TheRealPharaohFresh](https://forum.freecodecamp.org/u/TheRealPharaohFresh)\
**Post date:** [October 2, 2022, 6:53pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/5 "2022-10-02T18:53:01Z")

</div>

**Tell us what’s happening:**  
Describe your issue in detail here.  
I feel like I’m close but I’m missing something, please give me some good details, thank you so much

**Your code so far**

```html
<!-- 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>
           <div class="flavor" <p>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>

```

```css
/* 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/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15`

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

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-33)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![admit8490](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/admit8490/32/240085_2.png) [@admit8490](https://forum.freecodecamp.org/u/admit8490)\
**Post date:** [October 2, 2022, 7:00pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/6 "2022-10-02T19:00:12Z")

</div>

Your task:

Add the class name `flavor` to the `French Vanilla` `p` element.

You are trying to add class to the `div` in your code.

---

<div class="post-metadata">

**Author:** ![TheRealPharaohFresh](https://avatars.discourse-cdn.com/v4/letter/t/8e7dd6/32.png) [@TheRealPharaohFresh](https://forum.freecodecamp.org/u/TheRealPharaohFresh)\
**Post date:** [October 3, 2022, 12:15am UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/7 "2022-10-03T00:15:26Z")

</div>

**Tell us what’s happening:**  
Describe your issue in detail here.  
3x I’ve asked for help and I feel im following down a rabbit whole of confusion, I’ve tried putting

 inside the p outside the p and etc  
**Your code so far**

```html
<!-- 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>
            <p><div 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>

```

```css
/* 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/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15`

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

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-33)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [October 3, 2022, 12:21am UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/8 "2022-10-03T00:21:24Z")

</div>

please do not create duplicate topics for the same question. Just follow-up by posting a new reply to your own topic. All topics have been merged.

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [October 3, 2022, 12:37am UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/9 "2022-10-03T00:37:39Z")

</div>

i don’t understand why you added a whole new element?  
They just want you to add the class attribute to the p element.  
That’s it.

you obviously know how to do it because you have done it before on this line:

> [@TheRealPharaohFresh](#):
>
> ` <div class="menu">`

So please, just do the same thing, but for the p element this time.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [April 3, 2023, 12:38pm UTC](https://forum.freecodecamp.org/t/learn-basic-css-by-building-a-cafe-menu-step-33/559154/10 "2023-04-03T12:38:21Z")

</div>

Closed on April 3, 2023, 12:38pm UTC

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