My Journey in Creating a CSS Learning Tool
CSS Playground is a website that I’ve made as a fairly large side project. The unique aspect of CSS Playground is the “playing” or “playground” part. I’ll talk about what/why I created the website and then my journey creating it. To start off, here are some gifs of some popular playgrounds I’ve made.
Seems pretty cool right? You move sliders to create different CSS values. I’ve also made another about CSS transforms.
CSS Playground is a website where you can create HTML/CSS playgrounds which are empowered by interactive CSS widgets (sliders, color sliders and select boxes). You can then share these playgrounds and like/comment on your favorite playgrounds (pretty much like any other social media website).
Why did I make this?
There are a lot of great resources out there for learning CSS. MDN, CSS Tricks, and Codepen all come to mind. These resources are great for visual and linguistic learners since you usually get access to an informative article with descriptive images (or just code).
What about the kinesthetic learners? For the majority of the CSS tutorials out there, there isn’t much interactivity — just static text and images. Given the nature of CSS, it’s usually really hard to learn without actually using it yourself or playing around with it. You could follow a tutorial on CSS positioning but have no idea how to apply it realistically.
So I sought out to build a platform so users can create CSS playgrounds/tutorials with interactivity on drugs.
History
Some context: I’m a student taking a computer science course at a local college. Pretty much all of the tools and frameworks I used were learned on the way of creating CSS Playground.
I originally started working on CSS Playground early October 2017. I was inspired after seeing resources like https://codepen.io/enxaneta/full/adLPwv and https://flexboxfroggy.com/ which interactively explained concepts like CSS flexbox. For me, I found these resources immensely practical and useful. So I sought to create a universal or better way to interactively teach CSS. Also I wanted to play around with Vue.js because I thought it was really cool back then (still is cool).
So I started off by creating a Vue.js Single Page Application (SPA) showing interactive CSS tutorials that only I’ve made. I experimented with many, many ideas that would be recycled and thrown out as the project progressed. Looking back at it, it was pretty crappy. However, my co-workers seemed to enjoy it which would only encourage me to work on it more.
CSS Playground is made with the isomorphic Javascript framework Nuxt.js, Material Design library Vuetify, and a .NET Core backend server.
Since then, I’ve added features so users can add their own playgrounds and even converted the application to Server Side Rendered (SSR) with https://nuxtjs.org/ (converting a SPA application to a SSR application is an absolutely painful experience). However, having all of my code written in Typescript made the transition much easier. Typescript is really useful. I’ve had to refactor tons of code as I’ve worked on CSS Playground but without Typescript I probably would have thrown my computer out of a window.
During the development of CSS Playground, I was blessed to be mentored by my professor at the college I attend. He’s given me some very valuable feedback within the business side and the user experience side of the website.
I’ve found that feedback is really important. We did some early user testing to figure out how actual users would interact with the website and to ask them what they thought about it. They ended up giving negative but constructive criticism about the UX of the website. I was able to create a more intuitive version of the website, but only because the testers gave me feedback. Feedback is really the best way to figure out what needs improvement.
Forward! To a more recent date.
Early June 2018, I was still pumping out features (and bugs) and decided that I was finally at a state where I was comfortable with sharing it with others. It was far from perfect though. Using the website on a mobile device was outright painful, and there was a very small amount of content available on the website.
There is a famous quote from Reid Hoffman, the founder of LinkedIn who said:
If you are not embarrassed by the first version of your product, you’ve launched too late.
It’s definitely cheesy in the entrepreneurial sense, but it definitely applies to myself. The website at the time wasn’t the best, but it got its main point across. I would improve it iteratively in the future.
So I decided to create a playground on the CSS property box-shadow. Here is a video of it in action.
I then posted the link to the website along with the video to the amazing community at the Web Dev subreddit. I honestly didn’t expect much attention. 100 upvotes and some comments was what I expected. To my surprise, the post absolutely blew up almost hitting 1000 upvotes. On top of that, the user comments gave some exceptionally useful feedback. My entire reasoning for creating CSS Playground was validated in a single day. People really liked what I had made. I found out later that it was shared to other sites like Facebook.
As a software tutor at my college, I was even able to use my website to help my students learn. First semester students in the program I’m in have a course focused around HTML and CSS. CSS is pretty notorious for being difficult for beginners so thankfully my website has helped a few students. Being able to interactively play with box shadows and borders has been helpful for them.
It’s really great to see your labor of love do well. To work on your own project for a long time and have it do well is an amazing feeling. I really do recommend that every web developer should have their own type of side project to be proud of.
Things I wish I had done
Promotion
I wish I had been promoting CSS Playground from the start. I only created a twitter after I had published the box-shadow playground to Reddit. Perhaps if I was active during development, I could have received more feedback from the community.
More Feedback
Development on CSS Playground was chaotic. The majority of development was focused on what I thought would be good for the project. As a result, user experience was terrible and I’d spend lots of time developing features that I would add little to no value. If I had constant testers, development would have been more consistent.
It wasn’t until I had actual testers until I realized… I sucked at UX.
Conclusion
Working on CSS Playground has been a fun adventure. I’ve been many roles from Full Stack developer to DevOps to Social Media Manager to CSS teacher. There has been many challenges but what I created is ultimately something I’m very proud in and makes all of it worth it. CSS Playground will be a website that I’ll continue to work on for a long time. Thanks for reading.
Check out CSS Playground if you have time and let me know what you think on my twitter @itsdatnguyen.
