Building Your Own HTML, CSS, JS Realtime Playground

Many months ago I built this site called CSSDeck. Its an interesting app where you can write your HTML, CSS, JS code inside few code editors that gets rendered and displayed in realtime in an output area (sandbox). Similar to JSFiddle, yeh! But the intent was a bit different. Instead of aiming for a playground where people could just create testcases, I wanted to build a community of people who would create some cool creations with their CSS3 and Javascript skills and all I would do is feature them on the Home Page of the site. Whatever people submit shows up in their profile page which means they can share their profile link with anyone and show off how awesome they are.

But why ? I thought it could be a great source of education and inspiration. People could also reuse some of the snippets in their projects to some extent quickly. It has definitely helped me to learn all the latest CSS3 features. Before CSSDeck all I knew about CSS3 was border-radius.

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

This story goes back to like late November 2011 (although the release was in January 2012). The first version was built in a weekend with not as many features as it has today. Anyway, fast forward ages and now I would like to tell you that if you think its a really complex app, then you are very much wrong! I am planning to write a series of posts to teach you how to create your own CSSDeck (atleast the basic functionality).

But why would you do so ? Well, first of all, even if you don’t do it, maybe you can learn something from my experience of building it as I write along. Secondly, you can build a similar app (a weekend’s task) and put up on your website. It can be an excellent way to display your skills, on your very own site, in your very own portfolio section! Impress friends, customers or potential employers, eh?

So this is just an introduction to whats coming up soon. The upcoming posts will need you to have some prior experience with basic HTML, CSS, JS else you wont understand a thing.

Posts in this series:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

7 thoughts on “Building Your Own HTML, CSS, JS Realtime Playground”

  1. Hey I need to create dynamic web editor which need to type the code according to the selected Programming language with Code highliters, Please suggest me. how to do it

Leave a Reply

Your email address will not be published. Required fields are marked *