
👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
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.
Marking up means identifying elements, defining, and labeling them. It is just like in Text stage when we labeled elements and grouped them — but this time, we take it a step further by using HTML tags which has the capability to define where a markup starts and where it ends.
In HTML, we’ll use start and end tags to enclose elements. Once elements are enclosed by these tags, web browsers will be able to interpret and display them accordingly.
Speaking of HTML tags, they have a syntax for us to follow. Syntax is the arrangement of symbols and rules that constitute the correct form of a language just like HTML. As an example for the label “Header”, the HTML tag will be <header>
and </header>
; for “Main”, <main>
and </main>
; and for “Footer”, <footer>
and </footer>
.
It is one thing to make our content readable for web browsers (for them to properly interpret and display it) and another thing to make it readable for humans (us and other coders who will be reading or modifying our works).
The fact that we have marked up our content in HTML tags, that makes it readable for web browsers. Indentation, on the other hand, makes it readable for human readers. All content within structures can be indented; the same as content within groups. In this way, we could see how the content is nested by looking at it.
See the Pen RE:Creation No. 3: Dorset Cereals | Front panel | HTML – Mark up the structure in HTML by Brian Dys Sahagun (@briandys) on CodePen.
At this point in our activity, we can already view the result of our markup in a web browser. In our demo in CodePen, you can see on one side what the browser will display given our markup. It’s not apparent because the text elements are still placed side by side, but the result already shows the structure we made: the “Header”, starting with “Product name”, the “Main”, starting with “Product main description”, and “Footer”, starting with “(none)”.
See the Pen RE:Creation No. 3: Dorset Cereals | Front panel | HTML – Mark up the groups in HTML by Brian Dys Sahagun (@briandys) on CodePen.
Individual elements are the actual textual content inside the structure and groups. We could combine steps 2 and 3 once we’re used to marking up content in HTML.
See the Pen RE:Creation No. 3: Dorset Cereals | Front panel | HTML – Mark up the individual elements in HTML by Brian Dys Sahagun (@briandys) on CodePen.
The result of our markup may not visually show much improvement but we’re already paving the path for a solid basis of HTML and CSS.
For our next activity, we will be going into the details of HTML tags. Since HTML is a language, it has a vocabulary — meaning, it already has a set of tags that is equivalent to what we created at this stage.
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.
The first step of RE:Creation is to convert the content (in this case, the visual elements) into text. As you can see in the figure above, we have itemized the elements of the front panel and we have also grouped related elements together. This kind of visualization makes it easier for us to accomplish this stage.
See the Pen RE:Creation No. 3: Dorset Cereals | Front panel | Text – Convert content into text by Brian Dys Sahagun (@briandys) on CodePen.
See the Pen RE:Creation No. 3: Dorset Cereals | Front panel | Text – Group and label texts by Brian Dys Sahagun (@briandys) on CodePen.
See the Pen RE:Creation No. 3: Dorset Cereals | Front panel | Text – Structure groups via header, main, footer by Brian Dys Sahagun (@briandys) on CodePen.
You might have noticed that we’ve replicated the capitalization of text to simplify the process. For example, the store name could be styled as “Pioneer Centre” but we opted to replicate it as “PIONEER CENTRE”. Capitalization has a nuance in the brand’s style of writing. In any case, CSS can handle modifying the capitalization, and we’ll get to that later in the process.
Now, we already have a basis for coding in HTML and CSS. Go to the next stage, which is HTML (markup).
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 lay down all the steps that we will take in order to make this happen.
In order for us to have a clear scope of this exercise, we need to see the all the elements of the packaging through an expanded view.
The main goal is for us to recreate it using HTML and CSS and learn various concepts of design and coding along the way.
First, look at the information and identify which are important compared to others — that will be the arrangement of contents in HTML. For example, the front of the packaging comes first before the sides and back.
Next, look at how the panels are laid out — that will be the visual arrangement in CSS. For example, the back of the packaging is at the leftmost — which means, it comes first before the sides and front (for left to right direction).
We’re breaking down the packaging to its individual elements by panel and flap. We have 4 panels and 9 flaps, for a total of 13 segments — this is also how we are scoping each section of the recreation. For example, we will tackle the front panel first, then back panel, and so on.
See the Pen RE:Creation No. 2: Nutrition Facts Label | CSS (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.
See the Pen RE:Creation No. 2: Nutrition Facts Label | CSS (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
<div>
and <span>
class
AttributeSee the Pen RE:Creation No. 2: Nutrition Facts Label | HTML (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.