# Learn Typography-HTML

**URL:** <https://forum.freecodecamp.org/t/learn-typography-html/661437>\
**Category:** Curriculum Help\
**Created:** [January 5, 2024, 10:16am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437 "2024-01-05T10:16:20Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 10:16am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/1 "2024-01-05T10:16:20Z")

</div>

Hello everyone. I need help with this code:

# Step 44

Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.

```auto
<div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold"></span></span> <span class="bold">10%</span></p>
      <p>Total Fat</p><span class="bold"></span>
      <p>Saturated Fat 1g 5%</p><span class="bold">10%</span></p>
    </div>

```

You should create a new `p` element below your element with the `Total Fat` text.

---

<div class="post-metadata">

**Author:** ![opudoprince](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/opudoprince/32/346454_2.png) [@opudoprince](https://forum.freecodecamp.org/u/opudoprince)\
**Post date:** [January 5, 2024, 10:29am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/2 "2024-01-05T10:29:53Z")

</div>

Kindly paste your code

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 10:32am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/3 "2024-01-05T10:32:42Z")

</div>

It’s obviously right in the text. Look for yourself.

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 10:33am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/4 "2024-01-05T10:33:14Z")

</div>

```auto
<div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold"></span></span> <span class="bold">10%</span></p>
      <p>Total Fat</p><span class="bold"></span>
      <p>Saturated Fat 1g 5%</p><span class="bold">10%</span></p>
    </div>

```

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 10:33am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/5 "2024-01-05T10:33:34Z")

</div>

It’s not letting me. My bad.

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 10:36am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/6 "2024-01-05T10:36:13Z")

</div>

![Screen Shot 2024-01-05 at 4.35.49 AM](https://global.discourse-cdn.com/freecodecamp/original/4X/7/a/8/7a815bbf8d14dd96fb1621424a52a228f24c4ad1.jpeg)

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 10:37am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/7 "2024-01-05T10:37:05Z")

</div>

This is the original code.

---

<div class="post-metadata">

**Author:** ![opudoprince](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/opudoprince/32/346454_2.png) [@opudoprince](https://forum.freecodecamp.org/u/opudoprince)\
**Post date:** [January 5, 2024, 10:44am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/8 "2024-01-05T10:44:48Z")

</div>

You have mixed your self up reset the step then after the clossing tag of the last p add your p tag with the text given in the instructions

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 11:04am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/9 "2024-01-05T11:04:03Z")

</div>

Here is another error I am receiving. Can you give me more clarity on this?

 ![Screen Shot 2024-01-05 at 4.35.49 AM](https://global.discourse-cdn.com/freecodecamp/original/4X/7/a/8/7a815bbf8d14dd96fb1621424a52a228f24c4ad1.jpeg)

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 11:04am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/10 "2024-01-05T11:04:24Z")

</div>

![Screen Shot 2024-01-05 at 5.03.28 AM](https://global.discourse-cdn.com/freecodecamp/original/4X/9/9/7/9974d2c802170fb902ab28ba105426396ec5e0ff.jpeg)

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 11:04am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/11 "2024-01-05T11:04:35Z")

</div>

Here is the right one.

---

<div class="post-metadata">

**Author:** ![opudoprince](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/opudoprince/32/346454_2.png) [@opudoprince](https://forum.freecodecamp.org/u/opudoprince)\
**Post date:** [January 5, 2024, 11:31am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/12 "2024-01-05T11:31:11Z")

</div>

You have wrapped the wrong text in the span element just wrap the 5% only the 5% leave the rest as they are then give the span a class of bold

---

<div class="post-metadata">

**Author:** ![AlecBarden23](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@AlecBarden23](https://forum.freecodecamp.org/u/AlecBarden23)\
**Post date:** [January 5, 2024, 3:16pm UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/13 "2024-01-05T15:16:15Z")

</div>

Thanks for the help!

---

<div class="post-metadata">

**Author:** ![JeremyLT](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremylt/32/291894_2.png) [@JeremyLT](https://forum.freecodecamp.org/u/JeremyLT)\
**Post date:** [January 5, 2024, 3:32pm UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/14 "2024-01-05T15:32:32Z")

</div>

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.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (').

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 6, 2024, 3:33am UTC](https://forum.freecodecamp.org/t/learn-typography-html/661437/15 "2024-07-06T03:33:01Z")

</div>

Closed on July 6, 2024, 3:33am UTC

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