Interview with Dat Nguyen creator of CSS Playground
Check out the interview below with Mohawk College student Dat Nguyen about his CSS Playground application!
Tell me about yourself.
I’m Dat Nguyen, a 21 year old Computer Science student at Mohawk College with an inordinate love for Vue.js. In my free time, I frequency jump between different software related side-projects. These projects range from websites to small game demos with various frameworks.
I’ve also been working at Mohawk College as a software Peer Tutor since January 2018. It’s great to be able to help and see students grow over time. It’s especially great to see previous tutees become actual Peer Tutors. I’ve been in my program at Mohawk College for 3 long years, and I’ll be finally graduating and looking for a job this December 2018!
What is CSS Playground?
CSS Playground (https://css-playground.com/) is a website where you can create and share your own CSS Playgrounds. A CSS Playground is a HTML/CSS sandbox where you can play/modify CSS in real time with mainly sliders. As an example, I was able to create a playground on CSS box shadows where every part of the shadow (offset-x, blur-radius, etc) was editable with a slider. The website ends up being a mix of very interactive tutorials and cool CSS snippets.
Why did you build CSS Playground?
When I was learning CSS, I found it hard to understand concepts like flexbox and CSS Grid. There are many resources on the internet for learning these concepts like tutorials and videos, but I found that they did not teach the kinesthetic learner part of me. But there are a few exceptional resources that teach CSS concepts interactively with a code playground.
I found resources like https://codepen.io/enxaneta/full/adLPwv and https://flexboxfroggy.com/ immensely useful. Following in their footsteps, I decided to try to make my own platform for creating interactive CSS playgrounds.
How have you spread the word about CSS Playground so far?
CSS Playground has gotten around mostly from social media and word of mouth. In the early days of CSS Playground, I was able to gain a lot of attention by posting my CSS Playgrounds along with a cool GIF to popular web development forums on Reddit. These were a large success, as most popular post got around 1000 upvotes. Posting on other miscellaneous web development newsletters also worked very well.
I’ve also made an effort to share CSS Playground with classmates interested in CSS and professors within Mohawk College.
What has the reception been like from people?
The overall reception has been phenomenal. The majority of people have been supportive and impressed with CSS Playground. A while ago, a teacher used CSS Playground to teach high school students basic web development. They sent me a very memorable message afterward:
“It went very well, the kids loved the sliders. I used your website for the second session. I started by giving them a brief introduction to what html/css are and then had them modify a one-page profile page. The results brought back memories of geocities, especially from a few students but overall it was a success. Thanks again for making it!”
As a peer tutor at Mohawk College, I was able to use my website to help first semester students learn CSS.
What tools did you use to build it?
Originally, CSS Playground was just built using Vue.js as a SPA (Single Page Application). A SPA worked great in the short term, but I realized that it had terrible SEO (Search Engine Optimization) results and it wouldn’t show up in Google search results. Now, CSS Playground uses a Nuxt.js (server side rendered Vue.js) front end with a .NET Core backend. The website also runs on a Digital Ocean droplet running Ubuntu.
What challenges did you run into when creating CSS Playground?
Mainly the largest challenge has been making CSS Playground more intuitive for others to use. I made the mistake of originally designing the project around how I would use it rather than how the average user would like to use it.
A while ago, I ran a small CSS Playground testing session with a small group of Mohawk College software students. I wanted how to understand how normal users interacted with the website and where the pain points were located. The feedback was fairly harsh, but with it, I was able to fix many of the usability issues with the website. I learned that it’s extremely important to design with your user in mind.
I also wasted a significant amount of time experimenting with different backend frameworks. I originally started with a Node.js backend but I figured out that it wasn’t very productive for me. I eventually settled with a .NET Core backend which was much more comfortable and productive for me.
What’s been the most satisfying part of releasing CSS Playground so far?
It’s been satisfying seeing the project change over time. It started off as a small idea and it eventually got larger and larger as I added more features to it. I’m very happy about its current state.
It’s also satisfying seeing the impact that the website has had for some people. Some have used the website to teach others and many have found it useful along with their studies at Mohawk College. Seeing the website shared on social media reinforces my belief that others in the world enjoy CSS Playground.
How do you plan to monetize CSS Playground?
Keeping the website free with advertisements sprinkled along the website is the current plan. I don’t want to place the majority of the content behind a paywall. That would go against my goals of providing easy to consume CSS resources.
However, I have thought about providing an optionally paid CSS Playground collection. For a large topic such as CSS Grid, I could create a collection of high quality interactive CSS Playgrounds which require for you to purchase that collection to view them. This would go along with the other free content on the website.
What advice do you have for other students looking to work on projects independent of their classes?
I’d advise other students to work on projects that they’re passionate about. If you’re not interested in a project, you might find yourself putting a subpar amount of work or find that you lose motivation to work on it over time. I know this for a fact because I have many other side projects that I’ve simply forgotten about due to a lack of interest or passion… However, I found that my passion for CSS Playground alone has pushed me to work on it for a long time (a whole year at this point!).
I’d also recommend that you let others know about your project as soon as possible. You might find a capable teammate or a good user to help test your product. You also increase the awareness of your project. There are also many organizations out there like SURGE at Mohawk College that help student entrepreneurs with their ideas.
Where do you see CSS Playground going in the future?
In the future, I envision CSS Playground to be an active community of web developers where users are actively sharing cool snippets of interactive CSS playgrounds. I want it to be a place where new and expert developers can all come by and manage to learn something new about CSS (and play with it!).
Also: My Journey in Creating a CSS Learning Tool
