
👋 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 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).