Learn Typography by Building a Nutrition Label - Step 33

i cant follow
guide me please

<!-- file: index.html -->
<!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>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
      </div>
    </div>
  </div>
</body>
</html>
/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info h2 {
  margin: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Learn Typography by Building a Nutrition Label - Step 33

Link to the challenge:

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

This is the instruction: Below your .small-text element, create a new p element with the text Calories . Also below the .left-container element, create a new span element with the text 230 .

i dont know what to do

Ok. Which part don’t you understand?

Do you know what an element is?

Do you know which the .small-text element is?

Do you know how to create a p element?

Do you know which the .left-container element is?

Do you know how to create a span element?

i just dont know where should i put the span element

Ok, lets find the .left-container element.

This looks like the .left-container element to me. It has the class="left-container" attribute.

i see, what should i do?

You said

The instructions say

So you should put the span after the .left-container.

   <div class="calories-info"
      <div class="left-container">
        <span>230</span>
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
    </div>

like this? its wrong

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

This is inside of the .left-container element instead of after/below it.

sorry i really cant follow
can u show me how to do this step?

No, I cannot write the answer for you.

An element has two parts, the opening tag and the closing tag. If you write something after an element, it needs to come after both the opening and closing tag.

So your span needs to come after the closing tag for the .left-container element.

1 Like

Hi Jeremy,
It makes more sense now. I was about to post a question why the span element is below the closing div tag instead of right after the left-container as per instruction. I have to say that the instruction was quite confusing at first, but this answer really make sense a lot. Thanks a lot!

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