Learn Basic CSS by Building a Cafe Menu - Step 40

HTML-CSS
1

Tell us what’s happening:

Hi Forum. Myself a Newbie!
Request to guide on which page (where to place the cursor event ) ‘backspace’ have to applied ? 1)index.html 2) styles.css 3) preview page ??
clueless as on the

preview page the mouse click event is not working & so could not do any event of backspace
index.html & styles.css are editors…the code is getting deleted if used ‘back space’
Kindly mention where the cursor event is to be placed & click backspace button

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>

<!-- User Editable Region -->

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

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 49%;
}
.price {
  text-align: right;
  width: 49%;
}

Your browser information:

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

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 40

2

Hello! In this case, you should be backspacing in the editable portion of the index.html document.

3

Thank you! the error does not show up.

And the p elements of class ‘flavor’ & ‘price’ are still at width 49% both(extreme left & right of page reflecting in preview)
What I have done in addition is - delete ‘width=49%’ from both the p elements within styles.css in parallel. ONLY then the elements are placed side by side.

In that case, I feel the text in step 40 needs proper sentencing - it is currently giving a incomplete picture.
I do have a recommendation for the author/guide regarding the text presented as part of step 40 - to be modified/updated to the benefit of future learners.
Hope I am in the right understanding. please correct if not!

4

The only thing you are asked to do is put both p elements on the same line in the editor. Just delete all the space between the two elements.

You change the width of the elements in the next challenge.

In the next challenge after you have set the width you can open the HTML file and put the two elements back to how they were before to see the difference.

5

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