Learn-typography-by-building-a-nutrition-label - Step 43

HTML-CSS
1

Hopefully this will help because the topics I read did not help. Instructions should be:

  1. Create a paragraph containing the text “Total Fat 8g 10%”
  2. Create a span around the text “Total Fat 8g”
  3. Create a span with the class bold around the text “10%”
  4. Create a span with the class bold around the text “Total Fat”

So you end up with:
|paragraph|span start|span bold start|Total Fat|span end| 8g|span end| |span bold start|10%|span end|paragraph end|

Please rewrite this step to be clearer.

4 Likes
2

Then the user might do this:

|paragraph|span bold start|span start|Total Fat|span end| 8g|span end| |span bold start|10%|span end|paragraph end|
Which would cause an error.

3

Definitely open to suggestions on wording… the current wording did not make sense at all for that step.

3 Likes
4

Hello and welcome.

I give you an exampe of use in this step:

  • create a p element and give it the text Text 12 34

You need write <p>Text 12 34</p>

  • Wrap the text Text in a span element.

You need write <p><span>Text</span> 12 34</p>

  • Wrap the text 34 in another span element.

You need write <p><span>Text</span> 12 <span>34</span</p>

  • Finally, nest the Text span element and the text 12 in an additional span element for alignment.

You need write <p><span><span>Text</span> 12 </span><span>34</span</p>

Look this example. Adjust your code and don´t forget to apply the corresponding class to the span

Grets.

3 Likes
6

Mod edit: removed solution

7

I hope this helps you out

8

@king.shafin.2011

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

3 Likes
9

Hey,
great explanation here, but I did write the code correctly straight away and still was getting an error. Wasted quite some time thinking about what was wrong with it. What worked for me was splitting all the span elements but I still did not understand what changed, because the code line was the same. Well, long story short, it was really not clear to me that i had to do a space before 8g, as I did not have to do it on any other text.

3 Likes
10

This is the best explanation, i tried it and it worked, so just check your code again if you got an error. Thnak you for the advice.

11

hey thanks for making this more simple and understanding .

12

I did end up figuring out, I just felt that wording of the step seemed really confusing for what they were actually asking for.
Thank you.

2 Likes
13

Sometimes I question if the task questions are just poorly worded or if I’m just staring at the screen and words are just losing meaning or something.

15

Hi,
I encountered the same issue and initially struggled to find the solution. After some research, I discovered that including spacing between elements improves readability and consistency in HTML code. I’ll make sure to incorporate spacing in similar situations moving forward.