Live Demos: The SitePoint CSS Reference Goes Interactive

By Matthew Magain | April 23, 2008 | Programming

The popular SitePoint CSS Reference today added an exciting feature to its already impressive list — live demos.

This is a feature that was among the most commonly requested in our recent reader survey. It’s common knowledge that many beginner web developers learn best by doing. Now the most comprehensive reference for CSS on the Web comes with a sandbox in which you can experiment and learn in real-time.

The talented and wonderfully controversial James Edwards is the brains behind not only the code, but some of the quirky content contained within the example markup (if you understand all of the obscure song lyrics, book quotes or sci-fi movie one-liners then you’re doing better than I am!).

We’ve just launched this today, so there may be a couple of kinks that still need ironing out. Feel free to let us know in the comments for this post (or if it relates to a specific page, on the page of the reference site itself).

Try it yourself!

Matthew Magain

Matthew Magain (@mattymcg) is a web and mobile designer from Melbourne who freelances under the name of Useractive. His latest project is UX mastery, an online training resource for user experience designers. He spends his spare time writing and illustrating children's books.

More Posts - Website - Twitter

{ 16 comments }

markbrown4 May 13, 2008 at 4:04 pm: It’s really simple to test advanced features of CSS that I haven’t yet run into.
Nice addition James
Dr-Net April 28, 2008 at 2:37 pm: Very Nice :)
Many Thanks
sysop157 April 25, 2008 at 9:36 pm: The Web Developer extension for Firefox allows you to do this real time on any web page. As soon as you make a change (for example adding color: #ff0000; to the h1 tag) the affected elements change in the screen.
Nacho April 24, 2008 at 11:24 pm: Sorry, I don’t quite get the point of it : |
What’s the difference of doing css locally?
cob April 24, 2008 at 9:25 pm: Great job everyone. Great new functionality.
z0s0 April 24, 2008 at 1:59 pm: Suggestion: The reference pages need to load faster for first time visitors (i.e. when I click through from Google). 4 CSS + 8 JS resources are the culprit. w3schools has just 3 total.
Simon Mackie April 24, 2008 at 10:26 am: Outstanding work, Cake.
tjk April 24, 2008 at 8:24 am: Brilliant!
colorbycolor April 24, 2008 at 4:22 am: Great job! Love it-and for anyone needing more examples, you can add to and change the style sheet to include anything-links, pictures, etc. They just have the h1 and h2 there to get you started.
banago April 23, 2008 at 10:55 pm: Very good job SitePoint team. Thanks very much!
Jdawg2k April 23, 2008 at 10:08 pm: Agreed. A simple concept but have never anyone do it. Way to stay ahead of the game!
TheOriginalH April 23, 2008 at 9:41 pm: I agree it’s a great feature. It isn’t revolutionary though – w3schools (who’s reference is rapidly becoming inferior) have had this feature for years.
If it were integrated with more examples it would be even better.
XraySierra April 23, 2008 at 8:38 pm: That is an amazing new feature. That is something that elevates it above all the rest. Good work people!
Ronnie April 23, 2008 at 7:23 pm: SitePoint CSS Reference is already a masterpiece. This feature adds even more value.
ShayneTilley April 23, 2008 at 6:36 pm: Agreed — Looks awesome James, well done!
AutisticCuckoo April 23, 2008 at 5:03 pm: Holy cow, Batman! That’s a nice feature that surely will come in handy, not only for beginners.
Hat off to James. Great job!