10 Years
May 07, 2013
Wow. It’s finally happened. The CSS Zen Garden is 10 years old today.
The web has come a long way in the past decade. CSS3, HTML5, responsive web design, web fonts, a version of Internet Explorer that doesn’t make you want to commit seppuku every time you debug, and any other progress that we already take for granted. (You can get a sense of just how far we’ve come by reading the original cringe-worthy requirements.)
As you can probably imagine, I’ve had a lot of proposals for a “CSS Zen Garden for X” over the years. Javascript, PHP, the mobile web, CSS3, HTML5, ebooks, responsive web design. (And curiously, Joomla. There have been a disproportionate number of Joomla copycats/ripoffs over the years. What is it about that CMS?)
I’ve never been in a hurry to create a new site for any of those; part of what made the original work is that we were stuck in a time when no one was considering CSS seriously. It had an agenda: to try and change that. A CSS3/HTML5 Zen Garden doesn’t need to exist, because who isn’t using those at this point?
But still… it might be fun.
There hasn’t been a conference yet where someone didn’t corner me about a modern update. I’ve seen many blog posts over the years about why we need a responsive or CSS3 version of the site. Even more convincingly, I’ve seen blog posts about why the original has outlived its effectiveness as a teaching aid.
So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to how we would build it these days. If you see an area that needs help, consider sending a patch. (Here’s the current list of issues to resolve, for example.)
The requirements are, of course, quite different this time around:
- CSS3 is in. Transitions, gradients, shadows, whatever. Just make sure to properly prefix it for all browsers. Webkit-only designs will be discarded with prejudice.
- Responsive is so in. You don’t have to build a responsive version of your design, but it wouldn’t be a bad idea. It might even be a great idea.
- Web fonts? Sure. Though I’m not quite sure how you’re gonna pull it off. TypeKit and other hosted services that require tag insertion are out, and licensing probably means you shouldn’t submit your purchased font files. If you can work out some other way to make it work legally, go nuts, but it’s looking like free fonts are your best friend here.
- Your new browser testing list: IE9+, recent Chrome/Firefox/Safari, and iOS/Android. That should be your baseline. Graceful degradation is acceptable, and in fact highly encouraged.
- Only the best will be published. High quality design, well coded execution. Same as it has ever been.
- Please, no garden-themed / Zen pun / self-referential designs. Let’s see some originality.
The form is open. I can’t wait to see what happens next.
This is probably the part where I’d tell you about a brand new default design, but I’ve been juggling way too much lately for that to happen. Maybe soon.
Thanks Dave, this brings back memories. Really glad to see this brought back and updated. Time to go build a submission.
Congrats Dave! I’m following since the day 1. It’s still awesome!
This brings the the same level of excitement a new series of Strong Bad emails would bring, only with a bit more consequence. Thanks for being a mentor to me in my early days…
Ooh! ooh! ooh!
MAJOR procrastinator—I built a design for the first zen garden but never submitted. I’ll have to take a stab again this time around. Although I’m sure the competition is much tougher. :)
Seems to be down (not just for me).
You should have updated the server, too ;-)
Google Web Fonts can be included via an @import so I suppose they’ll work fine for the zen garden constraints.
Excited!
Of course, http://csszengarden.com is down right now.
Yay! :D Happy Tenth!
Ten years! Wow! Congrats :)
Thanks all, glad to see some excitement for this! It’s been fun strolling down memory lane over the past week getting ready for this.
The server seems to be spotty right now, but MediaTemple is looking into it. It’s related to a ‘flurry of network activity’ – I’m not saying I’m taking the blame here, but…
@Paul Irish – thanks, that’ll be useful. Free fonts are our best bet unless I can work something else out, luckily there are some not awful Google Fonts.
Congrats again on the project rebirth!
It’s both inspiring and heartbreaking to me that after 10 years, college and university instructors are still assigning a Zen Garden theme as part of the curriculum.
It’s inspiring because it’s a great assignment. Students are given HTML and must use CSS to change the look. This provides a clear differentiation between markup and presentation, and students learn to push the bounds of CSS.
It’s heartbreaking because we’re teaching the same code we’ve been teaching for 10 years.
Thank you for updating this. I hope the colleges and universities finally update their curricula to match, teaching HTML5, CSS3, and responsive design, and stop letting Internet Explorer 6/7 be the excuse for modernizing the curriculum.
Btw, what have you been upto lately? Its been a long time since you’ve been active on this blog..
This is exciting news. Viva la Zen Garden!
Happy anniversary! Thank you for writing for the book and creating the site. I learned so much from your hard work.
Thanks too for reopening submissions. Maybe all the procrastinators will finally take action…
Congrats!
It seems like just yesterday that CSS Zen rocked my world. How time does fly. Here’s to 10 more years of code fu! :)
Thanks Dave and welcome back! It’s been a great 10 years.
Congratulations on 10 years Dave! So glad to see this revived.
The CSS Zen Garden is probably one of the number one projects that got me really into web design; great to see you bring the project back to life after 10 years!
where is Opera on the browsers list?
it’s the best out there, at least for css standards. they even help define css.
they seem to be going in the wrong direction now. still, their browser is still great.
and yes, i’m writing thing on Firefox, on a public library computer. still, Opera should be the reference for the css part of a site.
Hey Dave,
Just wanted to thank you. I owe a large part of my career to CSS Zen Garden. The project helped shape my view of what was possible with web standards and CSS. My submission was also published in a Chinese web design text book, and helped me land a number of jobs. Glad to see it back in business.
Cheers!
Congrats! Indeed. Sure many things have changed. But in many ways this was the pebble that started the ripple that started the Tsunami!
I am very happy to see you updating this. I have been out there probably three times this past year hoping to see that you have made a change. I will be glad to see what comes of it. Thanks so much this was a great source of inspiration early on, and still fun to revisit from time to time.
Congrats on 10 years!
Now excuse me while I walk back to my desk feeling quite dated. ;)
I am just so happy about this. CSS Zen Garden basically changed the playing field for the whole industry… it will be nice to see how it is approached in 2013! I hope to find some time to submit something.
I probably owe my professional career to the CSS Zen Garden. Thank you Dave.
Happy 10th! We used CSS Zen Garden for a class assignment, and it was the thing that opened my eyes and made everything I was learning about website html and css fall into place. To be able to see the CSS the designers used - Under the Sea was my favorite - was so helpful and a wonderful privilege. I bought the companion book and spent hours, days, and weeks in awe of the effects I could create with it. Thanks for your efforts in creating the site and now updating it. It may be the inspiration I need to start playing again!
Wow! Ten years… Happy Birthday CSS Zen garden, thanks for everything!
What a great resource to have come back. I agree that the justification element isn’t needed anymore (I remember feeling very excited when I first discovered CSS Zen Garden in 04 or 05) and understood how important it was to teach the idea of CSS as an essential tool.
But I see an opportunity here to do the same sort of boundary pushing/best practice discussion/proof of concept work that the original was beautiful for.
Sure, there are resources today for like codepen, that allow for specific exploration of one idea, but this showcases the marriage of tech and design like nothing else.
Thank you, thank you, thank you for bringing it back.
Whahou 10 years already for CSS Zen Garden! Time is running out but we did not loose faith in what motivate us and now we are thousands more to embrace quality and front-end technologies =)
Happy birthday CSS Zen Garden!
P.S: Did you brew a special beer for this event?!
Wow.. cool. Loved it back in the day… such an inspiration. I can’t wait to see what people come up with!
Thx for bringing it back!
Only ten years ago? Ah, good. That makes me feel less old.
I agree with luis santos. Opera should be included since it is one of the top CSS-compliant browsers out there.
Steve Haney
Awesome, I actually thought it was older than that!
Congratulations, and thanks, because it taught me a lot about CSS, and I remember it being a great source of inspiration! Can’t wait to see it refreshed.
Still have my print copy of The Zen of CSS Design, between that and the site I fumbled my way into a career. Thanks and congratulations on 10 years.
Great to see it open back up… I’m one that also had their life change because of CSS Zen Garden. My design (#182) helped me realize how much I wanted to learn more about designing for the web and even brought be into the role of teaching (a couple of years after my submission). Yes, I’m one of those professors who still assigns the Zen Garden Theme challenge (with modified restrictions over the past couple of years). Students have always enjoyed the challenge of the Zen Garden competition and look forward to seeing the new designs. The first 20-100 entries, I expect, will showcase flat design. ;)
Maybe this will finally inspire me to get my own (woefully out-of-date) website updated.
Couple of questions, Dave
Q: If we have an official design, can we send you an updated link if we change our portfolio website URL?
Q: Was there a reason not to add the meta element with the viewport? Just wondering.
Holy crap! Welcome back! This site taught me sooooo much about CSS. I forgot all about it until now!
Seriously, thank you for everything you have done.
BOOM! Nicely done sir. Especially with your busy schedule.
@Jen Kramer - an educator helped push me to update to more modern code with this post: http://www.nateomedia.com/notebook/web-development/css-zen-garden-html5/ It’s probably not as dire as you think out there!
@luis @Steve - I hate to be the one to break this to you, but Opera’s former Presto rendering engine is gone. http://thenextweb.com/insider/2013/04/04/opera-confirms-it-will-follow-google-and-ditch-webkit-for-blink-as-part-of-its-commitment-to-chromium/
@Adrien - see my first comment about juggling. Not this time!
@Thomas - great questions. #1 - yes, absolutely. #2 - good catch! I ran out of time, there’s still more to be done. That’s a large part of the reason it’s on Github now, to allow people to contribute fixes like that directly. (But I’ll add that one myself tonight, thanks for the nudge.)
@Adam @Scott @Blagovest @Thomas - it’s an honour, guys. Thank YOU.
I added a submission to this site so long ago, 2003 or 2004 that it’s no longer hosted on the server it once was. The company went under during the RealEstate bust. At any rate, shows you how I used CSS Zen Garden to turn my web design and development from tables coupled with WYSIWYG to pure vim or another text editor with semantic HTML and CSS.
Happy Tenth Birthday!
This is a really exciting release, and its a great time too. Well done - let the games begin!
Who wants to join me in creating an aggregate site that pulls in all the designs people make on their blogs etc.
Are you going to be choosing the designs that are featured again David?
congrats, mate! happy to see it back again. i owe so much to the csszengarden since it boost my career into new dimensions.
Happy anniversary!
Wow, 10 years - brings back memories.
We’ve come a long way and CSS Zen Garden played a big part in making the difference. Thank you.
Maybe you can fix the errors in the translated versions when you get a chance.
I’m the one who translated the site into Japanese way back when :)
http://www.csszengarden.com/tr/japanese/
Great work. Happy 10!
CSS Zen inspired me to learn CSS 10 years ago when I was still a grubby high schooler with ethernet cable running down my parents’ hallway to my room. I had a P166 and 13in CRT that I’d brought home from school on the schoolbus over several days time. Now I do web development for my job. Glad to see it making a comeback to inspire the next generation.
Wow. Zen Garden looks dated and ugly now…
@Joe - so does your mom!
@Mayu - definitely on the agenda! The whole reason for adding the site to Github was to allow people who actually speak the language to figure out the best translation without my involvement, and hopefully contribute new ones.
You might also be happy to learn that while I’ve heard complaints about some translations, I’ve never heard any about yours. I’ve even mentioned in talks I’ve given that the Japanese translation is one of the better ones. Thanks for your work all those years ago!
Good stuff. I cut my teeth with webmonkey.com and Netscape composer back in the day! Years later a buddy told me about tableless layouts and housing styles in an external file and I was like ‘no F’n way!’ Haha.
I guess I came into the web world late, in 2005-6 so I never learned how to use tables to build web sites. When I had to update a web site, I used CSS and never have used tables, that was a decision I made early on when I started learning HTML and CSS. The future did teach me that this was a wise decision. I am looking forward to updates to this site and the addition of new entries using udated HTML and CSS code. Congrats Dave on 10 years.
Al
Congratulations! That’s quite a long period of time. I wish I had paid attention to the web front end development earlier, then my LIVEditor project (code editor that let’s you see result of CSS/html edits in real-time) would be even more interesting at the earlier years :)
I forgot to add the URL in my previous comment: http://liveditor.com
Its such a wonderful resource; first time i heard about it when getting the book into my hands.
It saved me tons of hours and teached me a lot.
Great Success!
Regards
great news from a great site like CSS Zen Garden.
I’ve used the zen garden a lot while explaining css to others and it inspired me to do more with css. I’m on of those who used the css zen garden to create a Mambo / Joomla template… And noticed a huge overhead of html in the default Joomla output.
Perhaps a new book too?
IE mobile for windows phone and Blackberry support should be added…
This sounds like fun! I do think more people need to learn about CSS3 and use it and that is why I did a http://speakerdeck.com/suzettefranck on CSS3 and using it in WordPress. I hope I can find time to make a submission.
I have a feeling I’ll be wowed just like I was the first time around with what people can do.
I think you could probably ask typekit/font deck/etc. to just allow all font’s on the zen garden domain as a kind of sponsorship (supposing you wanted to). I would suggest it would be pretty great for their businesses.
Looking forward to seeing how far we’ve come!
Andy.
I was introduced to CSS Zen Garden in 2007 when I first began web development. I come back at least a couple times a year, just for the nostalgia, and to remember my humble roots. I knew nothing, but was so inspired by the idea that I picked up “CSS: The Definitive Guide, 3rd Edition” from O’Reilly and read the 3 most important chapters of it while at the laundromat with my wife (our washer broke that day). 6 years later, I’m a software engineer, and I owe a huge portion of my inspiration to CSS Zen Garden (and to this site called WordHugger which closed years ago).
Awesome news Dave! CSSZenGarden was a huge learning tool for me all those years(10?!) ago. I’m really glad to see it’s being continued. Seeing so many different viewpoints create on the same source was a huge eye-opener to potential. I’ll be keeping tabs on the project again - thank you, and here’s to another 10 years!
I remember when I didn’t really believe in CSS. It looked like an unnecessary, uphill hassle.
A friend told me to have a look at Zen Garden. I was obstinant at first, but the designs kept me engaged… and then, exploring someone else’s css, the lights suddenly came on and I understood the elgance of the cascade. One of the few “aha” moments in my life that I truly remember.
I owe you dude.
Zen Garden taught me so much about the use of CSS when I was a beginner. I cannot express enough how much I appreciated this site and how happy I am its starting over to help people learn and learn to think outside the box. Well done Zen Garden!
I cut my teeth on CSS Zen Garden and Eric Meyer on CSS.
Between these 2 resources, I finally understood the separation between HTML and CSS. It was really a ‘lightbulb’ moment.
Zen is a treasure and will be more so, when HTML5’d..
Amazing how the web has evolved in the 10 year since the inception of the Zen Garden. I was so inspired by the sites back then and learned so much from them.
Seems like it’s been longer than 10 years though. Time flies!
Weeeeh! Yes, good memories :)
Thank you! <3
It’s been awhile.
Awesome! It’s been too long. :D
o.O
Congrats!
Please excuse my ignorance, but if I were to submit a contribution/design to ZenGarden, how would I go about doing that?
Regards,
Yavor Mladenov
I was a fan of the Zen Garden when I was a beginner and It was my teach early days and it helped me to start as front end developer freelance service
This is great, The Zen garden came out just after I graduated and threw out the table-based dreamweaver designing we’d learned. I embraced the manifesto like a creed, and it has served me ever-since.
I look forward to seeing the next generation of designs.
Happy birthday!
Happy 10th b’day Zen Garden. Here’s to 10 more years.
I learn CSS because of CSS Zen Garden, Happy Birthday and Thank you!
My god it’s been ten years already. I just might create another design, it sure was fun the last time! Oh, how I miss IE6.
*{#$! There goes my free time :)
“strolling down memory lane” sounds nice. 10 years ago we were in the second year of our web development agency and many things happened since! Thank you for Zen Garden which certainly has influenced our work!
I disagree that CSS Zen Garden v1 has outlived it usefulness as teaching tool. I learned a lot from it five years ago and most, if not all, of that is still valuable. Granted things have evolved since then and an updated version will be most valuable.
Happy 10th Birthday. I remember visiting CSSZenGarden 10 years ago :) Good old days.
Would be nice to add some CSS 4 experimental stuff in it too. Bring the new version on. Can’t wait.
Remember when I first started learning CSS, Zen was a great help!
What about using something like sass or less? Too complex for this initial fase?
Maybe you could add more information about how to develop your page locally, start the server and how to fork the project. Also how to name the folder for your version and what we need to do for creating a new design.
It was great to see this back online, I remember CSS Zen Garden sparking my interest and use of CSS and moving me away from sliced / table layouts.
in looking at the CSS code, I did not realize how much “position: absolute” was used in some of the examples, but it seems to be prolific and overused. perhaps the new generation of coding entries will eliminate that questionable technique for positioning content. of course, that all depends on the HTML code layout you are presented with and need to handle. using the absolute parameter for positioning sure would not be conducive to a responsive design.
Al
Wow has comment spam ever gotten out of control in the past few years. Closing discussion for the sake of my sanity, thanks all.