The Kittie Land

As part of a collaborative project, I co-created a fictional online magazine all about cats—designed in Figma, built with HTML, CSS, and just a sprinkle of JavaScript.

Recording of the site

Design Process

  • Created mid-fidelity wireframes in Figma (split by page ownership)
  • Collaborated to align on style guide and shared components
  • Moved to high-fidelity designs for both desktop and mobile
  • Defined global styles in CSS early on to streamline code merging later
Design guidelines by Jason
High-fidelity designs

Coding from Scratch

No templates, no drag-and-drop—just me, HTML, CSS, and way too many <div>s.

500+ lines of CSS for 2 HTML pages aren’t concise, I know

Yes, I use light theme. All my classmates made fun of me.
But dark mode reflects my face on the screen:
who wants to see their face twisted in misery while writing HTML and CSS 🤯?

From this ➡️
➡️ To this
From this ➡️
➡️ To this

Behind the Build

First, huge thanks to my design lead Jason—he guided me through the design process, created all the style guidelines, and even took on the HEROIC (yes, I say HEROIC) task of merging our code. That’s no small feat for someone who’s not a developer, and I’m really grateful.

Also, I really appreciated being able to run with the cat theme. While you can’t go wrong with cats, it’s also a pretty overused subject, especially for a fictional magazine. That’s why it meant a lot to be given the freedom to choose something I genuinely enjoy, even if it wasn’t the most original pick.

This website is simple. It’s far from perfect.
But I hand-coded every single line, and I’m genuinely proud of this little baby.
Just look at how far I’ve come. Teamwork really can be 1 + 1 ≥ 2.

I had so much fun making this—partly because I love cats, and partly because I got to make up for my limited coding skills with some solid photo editing, GIF-making, and a lot of curiosity. I even got to make my own cat the star of the show, which made the whole process that much more personal (and adorable).

Let’s Work Together!

Now accepting new projects, cool collaborations & cat memes.