I did not see where i went wrong

Step 47

You will come back to styling the menu in a few steps, but for now, go ahead and add a second section element below the first for displaying the desserts offered by the cafe.

t <section>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        </section>

Please provide a link to the challenge.

Learn Basic CSS by Building a Cafe Menu: Step 47 | freeCodeCamp.org

IC, the instructions were:

… add a second section element below the first …

“below” is the important work. You wrapped the existing section in another section. You weren’t supposed to do that - you were supposed to add a new (empty) section below the existing one.

i have tried it this way:

<section>
          <section>
            </section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>

and another way:

 <section>
          <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        </section>

but its not working

1 Like

If we were talking about divs instead of sections, you would have this:

<div>
  <!-- stuff -->
</div>

You were asked to add below the div (section). Those three lines are the div, it dents with the closing tag, </div>,

So, your first attempt would be like doing this:

<div>
  <div>
  </div>
  <!-- stuff -->
</div>

adding the new div as a child of the old div.

And your second would be like doing this:

<div>
  <div>
    <!-- stuff -->
  </div>
</div>

which I guess would be adding the new div as a parent of the old div.

But you want it below, so that they will be siblings in the hierarchy. What would that look like?

<section>
          <section>
          
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
          </section>
    </section>

its still not working

That’s still the exact same thing you did before

Remember, most elements have both an opening and closing tag. The element starts with the opening tag, then its content follows and is closed by its closing tag. So the entire element contains all of these things. If you were going to add a new element below, or after an existing element, where would you have to place the new element?

<section>
          <section>
            </section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
      </section>

please what is not right here now

Did you place your new section element after (or below) the current one? It doesn’t look like it to me. It looks like you nested it in the current one. Remember, a section has both an opening <section> tag and a closing </section> tag. If you are going to place a new section after an existing section, where would you need to put it so that is after the section?

i put it below, like this;

<section>
   <section>
   </section>
</section>

the second section opening & closing tags is below the first section opening tag

Again, a section element has both an opening <section> tag and a closing </section> tag. The instructions are not asking you to place the new section below the opening <section> tag. They are asking you to place the new section below the entire section element. So if a section element is comprised of both an opening and closing tag, then where would you have to place a new section element so that it is after the entire existing section element?

oh! i understand it now. let me try it

thanks i got it now :heart_eyes:

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