Category: RE:Creation
-
RE:Creation No. 3: Dorset Cereals | Front panel | HTML (markup)
Previously, we have tackled the Text stage of RE:Creation wherein we came up with a textual content of the front panel of the packaging which is our basis for this stage. Summary Mark up the structure in HTML Mark up the groups in HTML Mark up the individual elements in HTML Markup Marking up means…
-
RE:Creation No. 3: Dorset Cereals | Front panel | Text
Previously, we have tackled an introduction to recreating Dorset Cereals. Now, we’ll begin with doing the initial work that will be the basis of the HTML and CSS. Summary Convert content into text Group and label texts Structure groups via header, main, footer The first step of RE:Creation is to convert the content (in this…
-
RE:Creation No. 3: Dorset Cereals
In this episode of RE:Creation, we’ll be recreating a cereal box in HTML and CSS. One thing I like about consumer product packaging is that almost everything is written there in that little space. It’s like a website in the palm of your hands at a grocery aisle (or at your breakfast table). First, let’s…
-
Nutrition Facts Label: CSS – Round 2
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.
-
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.
-
Nutrition Facts Label: HTML – Round 2
Summary Convert the Tags into <div> and <span> Classify the Elements by Adding class Attribute Demo See the Pen RE:Creation No. 2: Nutrition Facts Label | HTML (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.
-
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.
-
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.
-
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.
-
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…