question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make Cafe Menu Step 37 instructions a little clearer

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:2
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
mehdibouazizcommented, Oct 11, 2022

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 ?

0reactions
sidemtcommented, Oct 12, 2022

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 addingclass attribute with the value item to their parent article element.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Learn Basic CSS by Building a Cafe Menu - Step 37
The instructions state: Add a class attribute with the value item to the first article element under the Coffee heading.
Read more >
Learn Basic CSS by Building a Cafe Menu - Steps 61-70
Playlist with all steps : https://youtube.com/playlist?list=PLa-0Y08VoGnq_ODrLMRdZkkwByzkCM-qzWalk through steps 61-70 of the Basic CSS by ...
Read more >
Learn Basic CSS by Building a Cafe Menu - Steps 31-40
Playlist with all steps : https://youtube.com/playlist?list=PLa-0Y08VoGnq_ODrLMRdZkkwByzkCM-qzWalk through steps 31-40 of the Basic CSS by ...
Read more >
Learn Basic CSS by Building a Cafe Menu - Steps 21-30
Playlist with all steps : https://youtube.com/playlist?list=PLa-0Y08VoGnq_ODrLMRdZkkwByzkCM-qzWalk through steps 21-30 of the Basic CSS by ...
Read more >
Writing Menus in Java
Display all students in id. number order. Exit the program. 3. Flowcharting Menu Application. Prior to writing any code, create a ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found