Neopets is a virtual pet game which allows users to have virtual pets. It is also my all-time favourite childhood game which technically introduced me to the (dial-up) Internet, HTML and CSS when I was young.
Recently, I went down the memory lane and started playing again. It definitely brought back a lot of fond memories while playing with those text and imaged based games on a website. I mean, it's probably a better choice to pass time compared to social media. It was popular in the 90s, to give you some context, a lot of old games from Neopets were built on the Flash player, they are mostly unplayable at this point and the team is trying to migrate those to HTML 5 now.
One of the unique quirks that Neopets have is that they allow their users to input HTML/CSS on a certain page such as user lookup, shop's page, pet's page and gallery's page so that the user can customize how those pages look.
I remember trying really hard to understand the most basics of HTML from the tutorials and trying to change the background color of my shop's page - without much success unless I copied from the tutorial.
So now, on a whim, I looked at my user profile's page and decided to remove the template look and redesign the whole thing myself. It's not that hard, right? I mean technically, I am a senior full stack software engineer now. 10-year-old me would have looked at the present me with eyes filled with admiration! 🤩
So how did I do it?
Generate header image
With Generative AI being the buzzword nowadays and a pretty fun tool to use, it's the first thing I looked for because usually a nice image looks good on the user's lookup. I used OpenArt AI to generate a Shadow Gelert in Space - because that's my main pet. If you're curious, this is how Shadow Gelert looks like in Neopets!
Coding some CSS
I then upload the image to a public space Imgur so I don't need to host the image myself. Last but not least, it's coding up some CSS. Not much HTML here because I did not add a new div for an additional "About Me" section. I used an image color picker tool to select some of the main colors I wanted on my user lookup page. The rest is you know, coding. Switching between Google Chrome's Dev Tools, previewing my profile and VS Code.
Voilà, this is the code on my Gist:
And here's how it looks like. It's not the fanciest but hey, I like it the way it is! ❤ Because it's been such a long, long while since I discover so much fun and pure joy in coding... (albeit it's just some CSS)
Last but not least, have fun and find joy in the little things that matter!
