CodePen November challenge: WebDataRocks experience
Tags: codepen, javascript, analytics, challenge
Published: 2023-12-11 11:47:43

Greetings, fellow coders! Today, I'm excited to share with you the results of my coworker's adventures in the [November CodePen challenge](https://codepen.io/challenges/2023/november). But before we dive into the dashboards, let's explore the essence of this monthly coding riddle.

### Overview of the CodePen Challenge
So, picture this: a monthly shindig where you get handed a theme and a task, and you gotta flex your coding muscles to whip up a coding masterpiece. Each week - new task. Each month - new theme. All year round - rendezvous with your own creativity and coding skills. It's like a coding rollercoaster – fast, a little scary, but hella exciting.

The November theme was Style Trends, and this coding odyssey unfolded through Bento Style, Neo-Brutalism, Y2K Style, and the mystical Gradient Glow😍. Besides the task, you get a list of ideas and resources to read more about the theme and look for inspiration. 

My fearless friend and coworker [Nadia](https://instagram.com/se7enteen.blue) dove headfirst into the November chaos and tamed each of these styles into a dashboard using the template provided in the task and our free web component - [WebDataRocks](https://www.webdatarocks.com) - a JavaScript library for creating pivot tables.

And I'm here to present you the results of her dedicated work and explore these trends with you. So let's start with the week #1!

### Bento Style
Our journey commences with [Bento Style](https://bootcamp.uxdesign.cc/web-design-trend-bento-box-95814d99ac62) – an ode to digital minimalism. The dashboard echoes the Japanese art of bento box arrangement, emphasizing simplicity, order, and elegance. It's a good thing to consider when working with reports and data analytics as it structures the information, doesn't look overwhelming, and is also stylish - the perfect combo!

And my coworker conjured up a dashboard that's cleaner than Marie Kondo's closet! Everything is in its place, no clutter allowed. Each element is meticulously placed, creating a harmonious user experience. It's a testament to the principle that less is often more. 

Immerse yourself in the tranquility of the [Bento Style demo](https://codepen.io/webdatarocks/pen/abXwRdg).


![Bento Style dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y30jp9l1uca50fzv500v.png)



### Neo-Brutalism
Next in line is [Neo-Brutalism](https://www.onething.design/blogs/neo-brutalism-ui-design-trend/) – a stylistic rebellion against conventional norms. Characterized by raw, unpolished aesthetics, the dashboard resembles a digital Rubik's Cube. The clash of colors and intersecting lines creates an unconventional yet oddly captivating beauty. 

Emerging in the mid-20th century, Neo-Brutalism challenges the status quo with its raw and authentic expression. Softening all the brutality with a pastel palette, you get a pretty [motivating sports dashboard](https://codepen.io/webdatarocks/pen/ZEwXRxM).


![Neo-Brutalism dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vlmwwmtlepowky468lm.png)



### Y2K Style
Hold onto your flip phones because we're diving into [Y2K Style](https://www.wix.com/studio/blog/y2k-design)! Picture my coworker, adorned in butterfly clips and a fluffy hoodie, channeling the spirit of the turn of the millennium. Actually, you don't have to imagine - here it is! 

![A Y2K styled collage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b31qfickac2hf9w5tuun.JPEG)

Nadia was so excited about this theme that she also dressed in Y2K style! What a dedicated person🤯...


The dashboard pays homage to this era with cute, bright colors, bold fonts and patterns, and a modern twist. Y2K Style emerged as a bridge between the analog and digital worlds, embracing both the nostalgia of the past and the excitement of the future. Dive into this [nostalgia dashboard](https://codepen.io/webdatarocks/pen/gOqzPNv) yourself on CodePen.


![Y2K Styled dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgbniv33uyi47dmvxdxa.png)



### Gradient Glow Style
The grand finale brings us to [Gradient Glow Style](https://muffingroup.com/blog/gradient-website-design/), a digital dreamscape illuminated by neon lights and vibrant gradients. The use of gradients and glowing elements has its roots in early web design, evolving into a modern trend that adds depth and vibrancy to digital spaces. 

Nadia's dashboard captures attention with a deep, calm green gradient, and the matcha-colored accents soften the seriousness of the report.

Immerse yourself in the [glow of creativity](https://codepen.io/webdatarocks/pen/rNPqQge)


![Gradient Glow Styled dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgmormezb75j1o415azz.png)



### Conclusion
And there you have it – a month of coding exploration spanning four distinct styles, each revealing the depth of creative possibilities and a nod to the history that shaped them. It's not just about the code; it's about translating ideas into a visual tapestry that echoes the spirit of each stylistic era. 

Kudos to my coworker for turning code into art! I hope you also got inspired by her creations, and until the next coding adventure, happy crafting, fellow devs! 🚀💻