I’ve always liked that most of my articles here at CSS Newbie have live demos — places where you can go and check out the code working in the real world. It’s a nice complement to the tutorials, I think.
But one think I’ve never liked about this setup is that my demos have no visual consistency. Some have background colors, some don’t. Some are centered while others are left-justified. Almost none of them show the source in the page itself. And not a single one of them is “branded” CSS Newbie.
This has always been a background annoyance, until a few weeks ago when I installed Google Analytics on my example pages and realized they were getting a lot more traffic than I expected. And further, many people visited the example pages without ever first seeing the corresponding CSS Newbie article. So people were getting examples with no context, and no way to respond.
I wasn’t cool with that.
So, I took some time and added a new wrapper to my CSS Newbie example pages. It solves the branding problem, makes tracking more consistent, and makes the example pages more useful to boot.
Now when you visit a CSS Newbie demo page, you’ll see the live demo on the left, and the code generating that demo on the right. It’s as easy as copy/paste to get the code for your own, without having to view the source. And to make things even simpler, there’s a link to download the source code to your computer.
Here’s a few example pages to try out:
- Make an Entire List Item Clickable
- Equal Height Columns with jQuery
- Building a jQuery Popout Ad
- Styling Blockquotes
- Easy Zebra Striping Tables
So please, take a look at the new CSS Newbie example pages. Let me know what you think: what you like, what you don’t, or what you’d like to see added in the future.