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).
Learn about this Book
FREE Sample
April 23rd, 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!
April 23rd, 2008 at 6:36 pm
Agreed — Looks awesome James, well done!
April 23rd, 2008 at 7:23 pm
SitePoint CSS Reference is already a masterpiece. This feature adds even more value.
April 23rd, 2008 at 8:38 pm
That is an amazing new feature. That is something that elevates it above all the rest. Good work people!
April 23rd, 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.
April 23rd, 2008 at 10:08 pm
Agreed. A simple concept but have never anyone do it. Way to stay ahead of the game!
April 23rd, 2008 at 10:55 pm
Very good job SitePoint team. Thanks very much!
April 24th, 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.
April 24th, 2008 at 8:24 am
Brilliant!
April 24th, 2008 at 10:26 am
Outstanding work, Cake.
April 24th, 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.
April 24th, 2008 at 9:25 pm
Great job everyone. Great new functionality.
April 24th, 2008 at 11:24 pm
Sorry, I don’t quite get the point of it : |
What’s the difference of doing css locally?
April 25th, 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.
April 28th, 2008 at 2:37 pm
Very Nice :)
Many Thanks
May 13th, 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