Learn Typography by Building a Nutrition Label - Step 3

HTML-CSS
1

Tell us what’s happening:

There is a typo in the task’s text. There should be a space between the number and the unit. Imperial units are separated from number (2/3 cup) while metric are not (55g). The task demand you to make a typo in order to pass to the next step.

Your code so far

<!-- file: index.html -->

<!-- User Editable Region -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
</head>

<body>
  <h1>Nutrition Facts</h1>
  <p>8 servings per container</p>
  <p>Serving size 2/3 cup (55 g) </p>
</body>
</html>

<!-- User Editable Region -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 3

1 Like
2

The instructions I am seeing say

Add a second p element with the text Serving size 2/3 cup (55g).

You need to write exactly what the instructions ask for to pass.

In the US, nutrition labels do not put a space between the number and the SI unit.

3

I just checked and here (in Canada) there is a space. That does seem to be a standard: https://physics.nist.gov/cuu/Units/checklist.html

15 Unit spacing There is a space between the numerical value and unit symbol

Kind of makes sense US might not follow this metric convention.

4

Yea, compared to https://www.fda.gov/food/nutrition-education-resources-materials/nutrition-facts-label

image
image272×619 45.7 KB

(the final result for this project is a nice replica of the official FDA example nutrition label)

1 Like
5

Yes, an image search shows almost only this example, with no space.

The only example I found with a space had both English and French so probably Canadian.

Everything I can find physically does have a space (which frankly looks nicer and is easier to read imo)

1 Like
6

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