{"id":524,"date":"2010-02-16T15:21:05","date_gmt":"2010-02-16T21:21:05","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=524"},"modified":"2010-02-16T15:21:05","modified_gmt":"2010-02-16T21:21:05","slug":"new-example-page-formatting","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/new-example-page-formatting\/","title":{"rendered":"New Example Page Formatting"},"content":{"rendered":"

\"\"<\/a><\/p>\n

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.<\/p>\n

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 \u201cbranded\u201d CSS Newbie.<\/p>\n

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.<\/p>\n

I wasn’t cool with that. <\/p>\n

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. <\/p>\n

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.<\/p>\n

Here’s a few example pages to try out:<\/p>\n