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.

1. Planning
   • What is the goal?
   • How to approach this thing?
   • What are the elements involved?
2. Doing
   • Converting to Text
   • Converting to HTML
   • Converting to CSS
3. Wrapping up
   • Did we achieve the goal?
   • What did we learn?

Planning

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.

Goal

The main goal is for us to recreate it using HTML and CSS and learn various concepts of design and coding along the way.

Approach

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

Elements

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.

Let’s begin converting the front panel to Text.