Summary
- Style for Colors
- Style for Graphics
- Style for Typography
Demo
See the Pen RE:Creation No. 2: Nutrition Facts Label | CSS (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.
[ntt_percept post=”nutrition-facts-label” “ntt_rec_nav”]
Tag: Nutrition Facts
-
Nutrition Facts Label: CSS – Round 2
-
Nutrition Facts Label: CSS – Round 1
Summary
- Style for the Layout
Demo
See the Pen RE:Creation No. 2: Nutrition Facts Label | CSS (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
[ntt_percept post=”nutrition-facts-label” “ntt_rec_nav”]
-
Nutrition Facts Label: HTML – Round 2
Summary
- Convert the Tags into
<div>and<span> - Classify the Elements by Adding
classAttribute
Demo
See the Pen RE:Creation No. 2: Nutrition Facts Label | HTML (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.
[ntt_percept post=”nutrition-facts-label” “ntt_rec_nav”]
- Convert the Tags into
-
Nutrition Facts Label: HTML – Round 1
Summary
- Start with the Basic HTML Document Markup
- Mark up the Structure, Groups, and Individuals in HTML
Demo
See the Pen RE:Creation No. 2: Nutrition Facts Label | HTML (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
[ntt_percept post=”nutrition-facts-label” “ntt_rec_nav”]
-
Nutrition Facts Label: Text – Round 2
Summary
- Group and Label Content
- Structure the Groups Using HMF
Demo
See the Pen RE:Creation No. 2: Nutrition Facts Label | Plain Text (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.
(more…) -
Nutrition Facts Label: Text – Round 1
Summary
- Convert Content into Plain Text
Demo
See the Pen RE:Creation No. 2: Nutrition Facts Label | Plain Text (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
(more…) -
Nutrition Facts Label
Introduction
In this second episode of RE:Creation, we’re going to re-create something that we’re all familiar with—the Nutrition Facts Label. This particular design is specific to U.S. Food and Drug Administration—although most nutrition information from other countries appear similar in terms of their tabular design.
We may ask, isn’t this label a print material (as opposed to digital)? Yes, this label—and others like it—are plastered in every packaging of edible products across the planet. Why would we delve into converting it for web then?
An example of a Nutrition Facts label.