New Example Page Formatting

Published February 16, 2010 by CSS Newbies.

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:

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.

2 Responses

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>