Make Cafe Menu Step 37 instructions a little clearer

Describe the Issue

Most of the description for step 37 is about styling p elements. It even states that “you need to apply some styling to the p elements”. But then suddenly the last line instructs the user to add a class to an article, which seems a little confusing and out of place. This caused a least one camper to add a new p element in this step and apply the class attribute to that element.

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-37

Your code

Campers code:

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

Expected behavior

Even though the last line is clear that the class should be added to the article, I think it could be made less confusing if we explained that this is in preparation for styling the p elements. Perhaps change the last sentence to something like:

To help with styling the p elements, you will first add a class attribute with the value item to the first article element under the Coffee heading.

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[mehdibouaziz]

I think that what’s missing is explaining shortly why we add the class to the parent element and not directly to the p elements. Like you said, the confusion comes from why we are suddently targeting the article element, when the focus of the lesson was styling the p elements.

i.e we don’t need to target the parent element, it’s just cleaner.

To get them on the same line, you need to apply some styling to the p elements, so they behave more like inline elements. To avoid repetition by adding a class to each individual p element we will use their parent element instead. Add a class attribute with the value item to the first article element under the Coffee heading.

@Sboonny what do you think ?

[sidemt]

How about:

To get them on the same line, you need to apply some styling to the p elements, so they behave more like inline elements. To do that, start by adding a class attribute with the value item to their parent article element.