Step 60 Learn Typography by Building a Nutrition Label

Chris_code · February 13, 2023, 4:40pm

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.

DobarBREND · February 13, 2023, 4:43pm

Post your html code and a link to the challenge…

Chris_code · February 13, 2023, 4:45pm

igorgetmeabrain · February 13, 2023, 4:51pm

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

DobarBREND · February 13, 2023, 4:59pm

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”.

Chris_code · February 13, 2023, 5:47pm

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.

DobarBREND · February 13, 2023, 5:53pm

Always post your updated code here with the last revision.

Chris_code · February 13, 2023, 5:57pm

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

DobarBREND · February 13, 2023, 6:15pm

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.

Chris_code · February 13, 2023, 6:48pm

<!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>

DobarBREND · February 13, 2023, 7:02pm

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)".

Chris_code · February 14, 2023, 4:00am

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>

hbar1st · February 14, 2023, 5:32am

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.

Chris_code · February 14, 2023, 5:35am

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>

hbar1st · February 14, 2023, 5:38am

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?

Chris_code · February 14, 2023, 5:40am

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?

hbar1st · February 14, 2023, 5:42am

Yes there is probably a reason. You are doing step 60 in fCC while everyone else you are talking about is not. 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.

Chris_code · February 14, 2023, 5:45am

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?

hbar1st · February 14, 2023, 5:46am

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

Chris_code · February 14, 2023, 5:47am

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>

Topic		Replies	Views
Learn Typography by Building a Nutrition Label - Step 60 HTML-CSS	2	131	July 23, 2023
Learn Typography by Building a Nutrition Label - Step 60 HTML-CSS	3	196	July 22, 2023
Learn Typography by Building a Nutrition Label - Step 60 HTML-CSS	2	166	October 30, 2023
Learn Typography by Building a Nutrition Label - Step 60 HTML-CSS	3	320	March 13, 2024
Learn Typography by Building a Nutrition Label - Step 60 HTML-CSS	3	176	August 8, 2023

Step 60 Learn Typography by Building a Nutrition Label

Nutrition Facts

Calories 230

Hint

Related topics