Step 60 Learn Typography by Building a Nutrition Label

Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

Amount per serving

Calories 230

% Daily Value *

Total Fat 8g10%

Saturated Fat 1g 5%

Trans Fat 0g

Cholesterol 0mg 0%

Sodium 160mg 7%

Total Carbohydrate 37g 13%

Dietary Fiber 4g

Total Sugars 12g

Protein 3g

Here is my code and here is the question that is listed for step 60.

This is different from the forum help options and I’m lost and frustrated. I come back to it every so often but its been weeks and I’m starting to give up on coding.

Post your html code and a link to the challenge…

If you click on the </> icon and paste all of your HTML code where indicated, we can see what you might be doing wrong.

Below this element <div class="divider double-indent"></div>" (there is only one such element in the given code) you should add a new ā€˜p’ element with class set to ā€œdouble-indent no-dividerā€ and the text ā€œIncludes 10g Added Sugars 20%ā€:

<p class="smth">Text</p>      

The next step is to wrap only ā€œ20%ā€ in span tags: <span>X%</span>. Nothing else should be changed.
The last step is to add a div element <div class="smth"></div> with a class set to a value of ā€œdividerā€.

1 Like

Ive updated the code accordingly and was able to understand the corrections. However, i’m still receiving the same error message.

Hint

You should create a new p and div element at the end of your .daily-value element.

Always post your updated code here with the last revision.

How should I repost it? I added the link to it. Is there another way to add it?

In your editor click on the marked button in the picture and you will get two groups of three backticks ```. Within them paste your code. Never make another post on the same topic.

1 Like
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="label">
      <header>
        <h1 class="bold">Nutrition Facts</h1>
        <div class="divider"></div>
        <p>8 servings per container</p>
        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value sm-text">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
        <div class="divider"></div>
        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
        <div class="divider"></div>
        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
        <p class="indent no-divider">Dietary Fiber 4g</p>
        <div class="divider"></div>
        <p class="indent no-divider">Total Sugars 12g</p>
        <div class="divider dbl-indent"></div>
        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="bold right aligned">20%</span></p>
        <div class="divider"></div>
        <p class="indent no-divider"><span class="bold">Protein</span> 3g</p>
<p class="no-divider"></p>
<div class="indent lg"></div>
      </div>
    </div>
  </body>
</html>

Restart the step.
Below your .double-indent element:

means below the div element with a class set to a value of ā€œdouble-indentā€, add what you have already done in your code but at the wrong place and with the small corrections:

<p class="two classes">Includes 10g Added Sugars <span class="bold right aligned">20%</span></p> .... without the word "aligned"!
        <div class="divider"></div>

The instruction: " Your new p element should also be double indented (double-indent), and have no bottom border (no-divider)".

Sorry if i’m coming across as an idiot… but it looks like it’s below the double indented div to me. Im not sure why I keep getting the same error. Ive tried it with and without the protein step.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="label">
      <header>
        <h1 class="bold">Nutrition Facts</h1>
        <div class="divider"></div>
        <p>8 servings per container</p>
        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value sm-text">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
        <div class="divider"></div>
        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
        <div class="divider"></div>
        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
        <p class="indent no-divider">Dietary Fiber 4g</p>
        <div class="divider"></div>
        <p class="indent no-divider">Total Sugars 12g</p>
        <div class="divider dbl-indent"></div>
         <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="bold right">20%</span></p>
        <div class="divider"></div><p class="indent no-divider"><span class="bold">Protein</span> 3g</p>
<div class="divider lg"></div>
      </div>
    </div>
  </body>
</html>

Are you doing step 60 still?
Why did you add two paragraph elements and two .dividers?

If you are still in step 60, please reset the step and add only what was requested. (One p and one div)

And they must be added exactly in the order requested.

If you are in a different step, then please open a new topic and mark this one as solved.

I am still on this step. I’ve seen that this step is listed as step 59 but for me it’s 60. I wasn’t sure if it wanted me to complete what everyone else sees as 60 which is the protein step. Here is my code…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="label">
      <header>
        <h1 class="bold">Nutrition Facts</h1>
        <div class="divider"></div>
        <p>8 servings per container</p>
        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value sm-text">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
        <div class="divider"></div>
        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
        <div class="divider"></div>
        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
        <p class="indent no-divider">Dietary Fiber 4g</p>
        <div class="divider"></div>
        <p class="indent no-divider">Total Sugars 12g</p>
        <div class="divider double-indent"></div>
        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="bold right">20%</span></p>
        <div class="divider"></div>
      
      </div>
    </div>
  </body>
</html>

It said the new p should be double indented so you added the classes above.
What is the correct class name though?
double-indent or dbl-indent?

Not sure, I’ve tried both ways. I saw that people have used both classes in solution vids and forums. Both have been successful for others. Is there a reason this is showing as step 60 for me and not others?

Yes there is probably a reason. You are doing step 60 in fCC while everyone else you are talking about is not. :smiley: The curriculum changes sometimes and the live experience is not always exactly the same as someone else who is not doing this live with you.

I am right here and I am seeing what you are seeing. Please don’t copy code and just read the given instructions and react to them as they are.

Well i’m not copying anyone’s code, but I am reviewing, to see if i’m missing any steps, misspellings or placements and I can’t seem to find it. Are you seeing the issue?

Yes . Your last code has the wrong class name. Check the instructions. Is it dbl or double?

The step uses .double-indent
Even with this correction nothing changes for me.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="label">
      <header>
        <h1 class="bold">Nutrition Facts</h1>
        <div class="divider"></div>
        <p>8 servings per container</p>
        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value sm-text">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
        <div class="divider"></div>
        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
        <div class="divider"></div>
        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
        <p class="indent no-divider">Dietary Fiber 4g</p>
        <div class="divider"></div>
        <p class="indent no-divider">Total Sugars 12g</p>
        <div class="divider double-indent"></div>
        <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold right">20%</span></p>
        <div class="divider"></div>
      
      </div>
    </div>
  </body>
</html>