Not understanding the wording of step 43 of Learn Typography by Building a Nutrition Label

HTML-CSS
1

The text reads:

Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

I thought Total Fat was the text inside of the element, yet this says to nest the Total Fat span element, and the text 8g.

I cannot seem to wrap my brain around what it’s asking me to do, and I’m really having trouble passing this step. I can’t seem to interpret this sentence.

Can anyone please help!

2

Look back at the previous sentences. The text “Total Fat” is supposed to have a span element around it.

3 
<span><span>text</span>8g</span>
4

Lets not “almost” write the answers for people please.

2 Likes
5 
<p><span><span class="bold"><span>Total Fat</span> <span>8g</span> 10%</span></span></p>
  1. I’ve nested the span element within the span element.
  2. I’ve nested Total Fat within in a span element
  3. I’ve nested 8g within a span element

Yet it’s still giving me a problem. It’s telling me there should be 3 span element’s within the < p >element

6

Back up for a sec. What does your code look like with only the first two span elements added?

7

It doesn’t seem to work. It tells me that 10g must also be within a span element.

<p><span><span class="bold"><span>Total Fat</span> <span>8g</span> 10%</span></span</p>

I wrapped the span element within another span element- as it instructs. I’ve given a span element to Total Fat and another one to 8g.

still nothing

8

That’s not what the instructions are asking for. Please post the version of your code with only the first 2 span elements added.

9

you dont need a span for this

10

Link to step: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-43

(It helps if you use the Ask for Help button so we can find the step easily!)

These are the first two span elements I’m talking about

Wrap the text Total Fat in a span element with the class of bold.

Wrap the text 10% in another span element with the class of bold.

1 Like
11 
<p>
<span class="bold">
<span class="bold">Total Fat</span>
 8g 
<span class="bold">10%</span>
</span>
</p>

I know i’m doing something stupid. I understand most of these steps for the most part, but I just can’t wrap my head around what I’m doing wrong here

12

Lets get rid of all the extra linebreaks here.

<p><span class="bold"><span class="bold>">Total Fat</span> 8g <span class="bold">10%</span></span></p>

and make it only the first two span elements…

<p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>

Now, lets look at this third sentence - its a bit hard to parse

Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

The thing being nested is " the Total Fat span element and the text `8g``, so lets identify that in the code so far

<span class="bold">Total Fat</span> 8g

That’s what the Step is asking you to wrap in a single new span.

13

GOT IT AND THANK YOU!

Thank you, I have no clue how I managed have missed an entire sentence repetitiously while reading the paragraph over and over.

I neither need a nap or more coffee

2 Likes
14

Thank you for your help, zaklina!

1 Like
15

Its a dense bit of writing. I’ve found breaking out the sentences one by one really is the best way to tackle this particular step.

3 Likes
16

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