On the surface, web design and development can be intimidating, what with terminologies such as Hypertext Markup Language (HTML), Cascading Stylesheets (CSS), Frontend frameworks (Vue, React, Angular), and many others. The matrix of letters and numbers in a web project file can be a deterring factor for anyone who may have an interest in picking up web development. However, one of the bases of teaching has always been to make things relevant and relatable to the learner, and this also applies to web design and development. Through referencing experiences of every day, one can introduce seemingly complicated concepts within web design and development in a more approachable and understandable manner to the learner. Here is one example:

A Typical Bento Box

The Bento Box

Everyone knows what a Japanese bento box looks like. It is usually rectangular and internally, divided into multiple sections with each compartment housing every dish. A couple of small compartments on the top left of the bento box could be where pickled ginger and radish are placed and to their right, another relatively bigger compartment for the main choice (e.g., Salmon Teriyaki). Below all that would be where white rice goes, and lastly at the bottom corner could be the desert section, usually housing the watermelon slices.

What is the relevance of this to web design and development? One can draw parallels between how web designers view their web page’s layout design with the bento box. Imagine a blank rectangular box that is the web browser. Dividing a section on the top left of the browser would be for the Company Logo. To the right is the Navigation Bar, which houses the buttons that provides access to the other pages of the website. Below this row would be the Featured Article, which would be the main part of the page. The sidebar goes to the right of the page, where the Recommended Articles can be placed in this compartment.

A Typical Webpage Layout

These parallels not only work in explaining the basics of web design. In web development as well, these are actual terms and elements used in HTML; the primary language used in frontend web development. For example, in HTML, the “div” tag, stands for ‘division’ and its function is to define divisions within a web page. Tags are also used to indicate sections within those divisions created. In another example, the “tag" houses the main component or article of the page – the Salmon Teriyaki of the bento box.

Hence the next time one views a web page, try looking at it as if it’s a bento box with different compartments and sections. What would be the main components or most important content? What is less important and allocated a smaller space? When one uses something from daily experiences and tries to find its parallels with a complex concept, it will be easier to understand it and even teach it. These complex concepts will become more approachable and less intimidating and when one understands concepts in this way and they will even stay longer.

Kevin Chan Leong Kit
School of Arts
Email: @email