DEV Community

Cover image for Frontend Challenge (CSS Art): Retro gaming console
Thaísa Vieira
Thaísa Vieira

Posted on

Frontend Challenge (CSS Art): Retro gaming console

This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.

Inspiration

When I was 4 or 5 years old my mother bought me a Super Nintendo 98 with a few games like Super Mario World, The Lion King, Top Gear, Mortal Kombat, Castlevania: Dracula X, Jurassic Park III, Contra III, Mario Paint, Donkey Kong Country, Samurai Shadown... Also, my mother was my gaming partner, like me, she started to love video games. Many years after, when I was in my 20s one of my eight cats needed an expensive surgery and we had to sell the console and the games to cost a treatment. It's a pity but we had to do it for a better cause. Since my childhood, I have kept in touch with a few other games and consoles but Super Nintendo was always my favorite. Also, it's important to add that with time my gaming sessions were getting shorter and shorter, other responsibilities were demanding more time.
Recently, on my birthday, my boyfriend had the incredible idea of giving me a Miyoo Mini Plus, a compact and portable handheld gaming console, that I can carry everywhere and enjoy a cozy relaxing time during my lunchtime at work, for example. So, MM+ has been my recreation partner and was the first thing I thought about when I saw this challenge, I hope you enjoy it!

Demo

CodePen embed link:

Journey

While learning CSS, as a beginner, my focus was to understand how the properties work and use them to build what I needed to, with this in mind, the first time I saw CSS Art I was shocked, at how it was even possible. So, to practice, I started to do daily challenges from CSSBattles, and it improved my skills in drawing various kinds of shapes. I'm proud to understand what everything does and even make it cleaner.

Top comments (1)

Collapse
 
jennavisions profile image
Jenna

Nice @thaisavieira.

I have never tried CSS art, but I'm amazed at what we can do with CSS only too. 🎨✨