I don't understand this simply. (Step 51) Cafe Menu

I don’t understand this, I already have these set-in places, it’s asking for dessert as the value of the 1st p element class attribute, and the value price as the 2nd elements class attribute.

Here’s my code:

<p Donut="dessert"></p> <p 1.50="price"></p>

link to the challenge:
Learn Basic CSS by Building a Cafe Menu: Step 51 | freeCodeCamp.org

You are using incorrect syntax.

To set a class in HTML you would set it like so:

<p class="example">This is a class attribute with the value of example.</p>

Still don’t understand it, it’s flooring me. I do have the attribute with the class and value set in HTML unless I’m missing one tiny detail of which I checked for a lot of times. I don’t know why it keeps giving me an error or if it’s in this case an incorrect syntax.

Is the above code still your current code? If not and you have made changes can you please post the updated changes.

 <p Donut="dessert"> </p> 
            <p 1.50="price"> </p>

I mean the only thing I did if there is a tiny detail missing is separating the last end of the closing tags. Still a no go.

You always write a css class with the word ‘class’. No other words, just class.
Never put another word in instead of ‘class’ if you are writing a css class.

<p number=“one”>Don’t do this. </p>
<p color=“red”>Or this as it won’t work.</p>

You need the word class so the code can recognise it as a css class.

<p class=“one”>Do it like this.</p>
<p class=“red”>So the code works.</p>

Adding the value means adding that word between the quote marks.

So the value of the first class in my above example is “one” and the value of the second class is “red”.

I’ve took your advice, and it’s still a no go for me, I’m probably missing a small detail but from my eyes it seems there are no details missing.

Can you please show me your current code?

 <p class="dessert"></p> 
            <p class="price"></p>
1 Like

It tells me my Donut text should have a class, so I think instead of putting class it should be Donut, but at that it’s flooring me.

Okay, the class is now written correctly. But you didn’t need to delete the text inside the p elements. That is why your code is reading as incorrect because there is no Donut text.

In your code you have:

Here you are saying that Donut="dessert". There is no attribute in HTML called Donut. The text between the p tags is supposed to read as Donut as shown below.

<p>Donut</p>

The same can be said about your price. There is no attribute called 1.50 in HTML. The 1.50 is supposed to go between the p element as well. Together they should look like this:

<p>Donut</p><p>1.50</p>

Now, as has been shown in an example by myself and @EllaGriff, a class is an attribute. You need to assign the class attribute with the value of dessert to the opening p element of Donut and assign the class attribute with the value of price to the opening p element of 1.50.

Still a no go for me, here is my current code.

<p dessert Donut></p><p price 1.50></p>

You were the closest here. You have the classes right in this. The only issue is it is missing the text that is displayed to the screen. The text displayed should be Donut between the opening and closing tags of the first p element and 1.50 between the opening and closing tags of the second p element.

Still floored. I’ve tried every possible outcome it seems.

Try it with my above comment but make sure both p elements are on the same line like so:

<p>Donut</p><p>1.50</p>
1 Like

It worked, it’s just the small details that throw me off. It’s tedious, but there’s a sense of enjoyment when the code goes through.

1 Like

this is exactly what i got and my code below but i keep on getting errors please can someone put me through on how to do it right? Something does not look right. You added the correct class attribute value to the p element with Donut as its text, but you have not defined a selector for it.
Since the flavor class selector already has the properties you want, just add the dessert class name to it.

.flavor.dessert {
text-align: left;
width: 75%;
}

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.