Live Demos: The SitePoint CSS Reference Goes Interactive

Matthew Magain

CSS Reference Live DemosThe 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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://autisticcuckoo.net/ AutisticCuckoo

    Holy cow, Batman! That’s a nice feature that surely will come in handy, not only for beginners.

    Hat off to James. Great job!

  • http://www.sitepoint.com ShayneTilley

    Agreed — Looks awesome James, well done!

  • Ronnie

    SitePoint CSS Reference is already a masterpiece. This feature adds even more value.

  • http://www.xraysierra.com XraySierra

    That is an amazing new feature. That is something that elevates it above all the rest. Good work people!

  • http://hardy.hemmingway.info TheOriginalH

    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.

  • Jdawg2k

    Agreed. A simple concept but have never anyone do it. Way to stay ahead of the game!

  • http://www.xixblog.com banago

    Very good job SitePoint team. Thanks very much!

  • colorbycolor

    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.

  • tjk

    Brilliant!

  • http://www.sitepoint.com Simon Mackie

    Outstanding work, Cake.

  • http://www.authelo.com z0s0

    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.

  • cob

    Great job everyone. Great new functionality.

  • Nacho

    Sorry, I don’t quite get the point of it : |
    What’s the difference of doing css locally?

  • http://www.bdsvc.com sysop157

    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.

  • Dr-Net

    Very Nice :)

    Many Thanks

  • http://www.yellowshoe.com.au/ markbrown4

    It’s really simple to test advanced features of CSS that I haven’t yet run into.
    Nice addition James