DEV Community

Cover image for javascript, html, css, production design
may arden
may arden

Posted on

javascript, html, css, production design

I began learning JavaScript and immediately struggled to synthesize the concepts. I realized that I needed to further develop my understanding of HTML and CSS, because the three languages work together like a jigsaw puzzle.

They are all components of styling and interactivity, similar to the design of a stage production. They are all integral parts of composing a compelling user experience which, at its essence, is storytelling. Just as in an opera or other type of stage production the set design, costuming, and lighting are all essential parts of bringing characters to life, the frontend languages of computer programming allow users to engage with the virtual realities we developers weave.

The other metaphor I found myself delving deeply into is that of the DOM tree, and its nodes. The word node comes from the Latin nodus ‘knot’. It is in these knots where further branches extend, creating a veritable ecosystem which can easily grow into a brambly mess if you aren’t paying attention. For me, I found that when I lost track of my

’s, things got messy.

Building, hedging, trimming and styling with attention and care proved to be the most effective way of managing front end development. Any time I began coding without intention or focus, I inevitably ended up making some kind of mistake or creating some type of bug, simply through inattention. Any time this happened I stepped away, took a breath, and reviewed my notes regarding the design narrative for my application.

For this project, because JavaScript was developed in 1995 I wanted to use Times New Roman because it harkens back to those days. I wanted to use Millennial Pink as the background, because Millennials are into VaporWave and mid90s culture and aesthetic. I wanted the application to look clean, and minimal, and I wanted to make it look similar to Instagram.

Just as it is with backend development, where you need to go in with a strategy to manage the way in which your data will be structured, so too must you approach front end development with a strategy to manage your narrative structure.

Top comments (0)