Unit 1 - Lesson 3: Tables and Lists

Lab: Nutrition Facts 🍇

Directions

Your task is to create a pixel-perfect replica of this Nutritions Facts label.

This may look simple but, actually, it is a culmination of everything that we have done so far. Thus, this is a checkpoint lab, meaning your project must pass the blink test (or get really close) before you can move forward.

In order to complete this, you should expect to have to look up some things on your own. Often times, the best way to learn new material is to learn "on the job" so don't be afraid of referencing documentation on MDN.

Your goal is to leverage the power of CSS selectors. You can use no more than one ID and one class to complete this project.

Use your semantic tags, you may not use <div> or <span> to complete this project.

Now, the usual...

1. If this is a Practice Lab, fork this repo and clone down the forked repo. OR
   • If this is a Lab Assignment, just clone this repo without forking it.
2. Create your HTML and CSS files.
3. Stage, commit, and push your changes regularly.
4. If this is a Practice Lab, open a pull request into The-Marcy-Lab-School:master branch to submit. OR
   • If this is a Lab Assignment, copy the URL of this repo and submit it through Canvas.

Hints and Suggestions

Your font stack should use Libre Franklin for the main heading and Helvetica for the remaining fonts. Supply Arial as a back up.

Use description lists for nutrient names and quantities:

<dl>
  <dt>Total Carbohydrates</dt>
  <dd>37g</dd>
</dl>

• It might be a good idea to use a table to represent the recommended daily values at the very bottom of the label.
• Use a 28px font as the document's root font; use rem units to define other fonts.
• Above all, remember: There is no one way to complete this project. I expect to see a bunch of unique implentations and that is okay 👌🏾!