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.

CSS Gradient Playground https://css-playground.com/view/45/css_gradient_playground

Seems pretty cool right? You move sliders to create different CSS values. I’ve also made another about CSS transforms.

CSS Transform Playground https://css-playground.com/view/38/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.