Mastodawn

Scott Kopelchuk May 10, 2023

The CSS Zen Garden is 20 today.
http://www.csszengarden.com/

It was about 9pm or so in Vancouver twenty years ago today, where I spun up an FTP connection and uploaded a handful of files to a server. I didn’t expect what happened next.

My intent was creating a site that proved CSS was a better way to design and build for the web than the mess of fonts and table tags the industry was dependent on up till that point. I figured a handful of the folks already into CSS at the time would find it neat, maybe a few other people would make an attempt at submitting, and it might prove to be a fun talking point for a few months.

What I didn’t see was how effectively it proved the point, and how revelatory that would be to the wider industry who weren’t using CSS yet. I mean I always dreamed it might reach a wider audience, but I never expected it to blow up early and remain relevant for as long as it did.

The designs it contains span a formative period of web design and development and most are of that era, while the industry has continued advancing beyond the ideals of 2003. But I keep it alive not just as an early web milestone, but also because it continues on as a reference for web curriculums and those joining the industry every day who get to experience that same aha moment the rest of us did many many years ago.

It’s no exaggeration to say that this one site launched not just my own career, but the careers of many of the contributors who are still prominent in the industry today. It remains my most significant mark on an industry I still work within today, and I still feel the pride of managing to create something that helped change the trajectory of the web for the better.

CSS Zen Garden: The Beauty of CSS Design

A demonstration of what can be accomplished visually through CSS-based design.

steven May 9, 2023

@daveshea thanks for keeping it going.
I remember it blowing my mind when I realised how elegant it is. It inspired me to do better as a designer/developer.
It’s an important piece of web history and privileged to have witnessed it.

Bruno Girin May 9, 2023

@daveshea I was part of that industry plagued by font and table tags and got my aha moment thanks to Zen Garden. Thanks for creating it!

n3wjack May 9, 2023

@brunogirin @daveshea exactly the same here. It proved what could be done with the correct html and css.

Brammm May 9, 2023

@daveshea What a lovely, lovely blast from the past. I've learned so much from inspecting designs, pouring over other's code... Thanks!

@daveshea A huge THANK YOU for making it.

My teenaged self found so much inspiration there, it really was beautiful and like you say, it proved the point of CSS so very effectively.

Łukasz Langa May 9, 2023

@daveshea 20 years ago I was in high school, moving on from Frontpage Express onto raw HTML and CSS, glued together with PHP.

The browser I switched to at the time was Phoenix, an early alpha of what was later renamed to Firebird, and then Firefox.

The CSS Zen Garden was a revelation in this context. It felt like The Future.

Soon after the Acid2 test was developed to shame Internet Explorer into following standards better.

I feel like the CSS Zen Garden was an inspiration there.

THANK YOU!

jimray May 9, 2023

@daveshea twenty years? That can’t be right I clearly remember I was working as a WebMaster when CSS Zen Garden launched and that couldn’t have been more than a couple of years … oh no.

What a legacy — it absolutely upended my understanding of what was possible on the web. Here’s to twenty more!

(I felt “bandwidth graciously donattd by MediaTemple” in my bones)

daveshea May 9, 2023

@jimray bit of an unfortunate appendix these days given the acquisition, getting my act together and making a server switch so I can delete that line is still on my to do list.

@daveshea @jimray

Ben from CDS May 9, 2023

@daveshea For the team I was on it changed everything. Within a few months we were css-first and we went on from there to develop for accessibility and semantic design. A huge influence.

Ronan Limon Duparcmeur May 9, 2023

@daveshea Time flies! The CSS Zen Garden is one of my fondest memories of my learning years, and of the early Web. It awed me and certainly nurtured my attraction for this medium – and thus forged my career. I owe it, and you, a lot. Thank you.

rag. Gustavino Bevilacqua May 9, 2023

Oh, it was your creation?

I learned many useful things on it, and I'm very happy to have the opportunity to thank you for your invaluable job!

daftwullie May 9, 2023

@daveshea Thanks a lot for this project – it helped me a lot when switching to CSS instead of the old HTML only way. ❤️

(It's still one of the sites I use from time to time to debug connection problems because probably none of my peers has it in their cache somewhere 😂)

VirtualWolf May 9, 2023

@daveshea TWENTY. Damn! I remember coming across that site and being blown away by what could be done. :)

ʎllnɔs May 9, 2023

@daveshea congrats. Been a useful site for many.

Also Verde Moderna link is broken.

Jérémy Lecour May 9, 2023

@daveshea I have learnt so much with this. I can say that it contributed heavily to what I have become. Thank you 😊

Sean Killeen May 9, 2023

@daveshea this resource amazed and inspired me when I was coming up as a dev. I learned so much from it. Thanks so much for what you've done for the community!

Robin Ward May 9, 2023

@daveshea I love that you’re still maintaining it. I’m doing the same on a 15 year old browser game I created. Hopefully in another 20 years we can both say the same!

daveshea May 9, 2023

@eviltrout congrats on 15, and I sure hope so too!

Matt 🔶 (LordMatt)May 9, 2023

@daveshea I remember CSS Zen Garden. It had quite the impact on my approach to web design. I had forgotten about this site. It is such a joy to browse the designs.

Mike Aparicio May 9, 2023

@daveshea Definitely had a lasting impact on my career and greatly informed my approach to design systems. Thanks, Dave!

nutsmuggler May 9, 2023

@daveshea you can’t overstate the importance of that project. It was the golden measure at the time, and showed us all what could be accomplished with CSS. Thanks for making it!

Florian Schroiff

@daveshea Happy Birthday 🪅

Tom Walker May 9, 2023

@daveshea I think about the CSS Zen Garden every time I am handed a site where I can't do much about the HTML (weird CMS etc) but I can rewrite all the CSS. An inspiration.

Don Weaver May 9, 2023

@daveshea wow. Thanks so much for your contribution. I remember being blown away by the options and spending hours trying to wrap my brain around it all and reverse engineering the ones that I liked most.

Dmitri | 🇺🇦May 9, 2023

@daveshea Thank you for making CSS Zen Garden back in the day. It's definitely changed my life, design wise, and so many other people.

Also, the thought strikes me: We need the equivalent of the CSS Zedn Garden, but for ActivityPub/ActivityStreams2 data model. A way to viscerally illustrate how, when you use an open data model, you could style your UI (and feed sorting algorithm) in arbitrary and helpful ways.

ajkandy May 9, 2023

@daveshea Thanks, Dave. I learned so much from that and following those contributors!

Jessamyn May 9, 2023

@daveshea Congrats and thank you. I remember. That site was so helpful to me when I was doing early web pages.

Amelia Bellamy-Royds May 9, 2023

@daveshea CSS Zen Garden was already 10 years old by the time I discovered it while trying to learn a bit of web design. But it was still incredibly valuable in helping me think about how HTML could (& should!) be designed independently from the visual rendering to keep it flexible.

Jesus M. Gonzalez-Barahona May 9, 2023

@daveshea
Thanks a lot for the CSS Zen Garden! I didn't know it was your work, but I've been using it in my web apps class for ages. Students always appreciate and enjoy that aha moment when they realize the content is exactly the same, only CSS changes.
@flooper

Doug Hanke May 9, 2023

@daveshea I don't know where my career would be today without looking at the Zen Garden and thinking, "Gosh, this is amazing, I need to know how to do this."

Tedel May 9, 2023

@daveshea Oh! I finally know who created it! Thank you sooo much. I learned a lot on that site, just by reviewing the CSS code.

Greg Woods May 9, 2023

@daveshea My very first web dev course in college used the zen garden to teach css, we all had to come up with our own designs. I'll never forget that!

heracl.es May 9, 2023

@daveshea It literally shaped my mind as a then teenager: presentation can (and should) be separate from content.

Still the greatest affordance of digital technologies. Still the most difficult to wrap your mind around, unless you got a darn good example.

So, thank you!

Deirdre Saoirse Moen May 9, 2023

@daveshea It helped inspire me to work on a browser team! (Safari/WebKit)

daveshea May 9, 2023

@deirdresm oh that’s very cool! Thanks for helping bring WebKit to life, that was a highly impactful project for the web in its own right.

Chris Glass May 9, 2023

@daveshea Admission: I never *really* learned CSS. I just fiddle. But the Zen Garden opened my eyes and gave me the ability to wonder and articulate. It changed the way I think and I thank you and all the contributors for that!

daveshea May 9, 2023

@glass tbh I’ve been out of the game long enough that I just fiddle these days myself. Appreciate the kind words!

@daveshea @keithjgrant CSS Zen Garden is from you?
I have to say this now: Thank you! This site was the reason I got interested in web development about 17 years ago. It was so satisfying.

Today I'm team lead of the devs in the company I work and still reference this site from time to time. Thank you for keeping it alive. And thank you for changing my life. Literally.

daveshea May 9, 2023

@keithjgrant @kaiserkiwi it was originally, though due to hundreds of community submissions it became much more than just my work. So gratifying to hear how it inspired and helped you find your path, thanks for sharing.

Aleksandar Vacić May 9, 2023

@daveshea this feels like another life. Likely it was.
I was View-sourcing every one of those design and learning so much.

daveshea May 9, 2023

@aleck indeed it was. Yesterday I went back to the part of town I lived in at the time and stood less than 10 feet from the spot where I created and launched it. That really reinforced how incredibly different life is two decades later.

Steve Root May 9, 2023

@daveshea oh my, this brings back memories! Specifically a CSS that as you scrolled down it got darker until a diver turned a torch on (as I remember it). Blew my mind, it was just CSS.
Thanks for creating that @daveshea 🙏

tayknight May 10, 2023

@daveshea @codinghorror

I wonder if the young-uns today know how inspirational this was many, many years ago. Amazing that it is still just as good today. Kudos.

Betsy May 10, 2023

@daveshea Wow! I remember spending hours browsing the designs and looking at the sources. I learned so much from that site, thank you (and the designers) so much!

Iain Anderson May 10, 2023

@daveshea Thank you for CSS Zen Garden. I used it myself, I assigned exercises using it, and I'm glad it still exists.

Peter Jakobs ⛵May 10, 2023

@daveshea oh gosh, this site was so much source for frustration for me.
Not because of the site itself, it's beautiful and elegant and surprising in what's possible - but because I never even got anywhere close to that level of CSS mastery.
Thank you for creating it, even though I never fully understood how you did it 🙂

hliimatta May 10, 2023

@daveshea I had completely forgotten about the existence of this site. How much I loved it back then when I was young. Thanks!

Martin May 10, 2023

@daveshea I learned HTML before CSS came around. At a certain point I found I was behind and needed to learn this CSS thing.

The documentation, tutorials, etc., just did not click for me. #CSSZenGarden did. This was what opened the door for me.

humanum May 10, 2023

@daveshea wow ~ 20 years..... amazing! And thank you for this wonderful project ~ inspiring so many of us to dive into CSS and changing how we design. Certainly pushed me into the right direction <3

Kaspar Manz May 10, 2023

@daveshea Thank you for that! As a twentysomething that just dipped his toes into webdev, this was absolutely eye-opening (and made me rebuild a lot of websites I previously created …)

@daveshea Thank you for creating and curating it back in the day. The page is still relevant today. For example, I last showed it to students in April in a web technologies seminar while teaching them about CSS.

Nicolas H.May 10, 2023

@daveshea like many others people, really, a huge thanks for doing this. It totally changed my vision of CSS, this was mindblowing.

And just to learn and play, I did some alternate styles on my personal website https://www.nicolas-hoffmann.net/source/skins-css-alternatives-site.php :D

CSS alternatives pour "skinner" le site (changer de thème via CSS) - Nico's Dreams - Nicolas-Hoffmann.net

Nico's Dreams, le site du développeur web Nicolas HOFFMANN consacré à HTML5, CSS, JQUERY, au développement web, Terragen 2, à la photo numérique et aux animations en images de synthèses.

Egor Kloos May 10, 2023

@daveshea The way I made these two #css designs in a single stylesheet was to embrace collisions. I now spend most of my time avoiding them. 🤔

https://csszengarden.com/062/

IE6 = vertical version
every browser after IE6 = horizontal version

You can view the 'ie6' version by going to the stylesheet `001.css` in the sources tab in Webtools and delete all the style rules after the comment `/ Mozilla - Safari - Opera /`

CSS Zen Garden: The Beauty of CSS Design

A demonstration of what can be accomplished visually through CSS-based design.

Sanne May 10, 2023

Remembering #CSSzenGarden and now I become really nostagic…

Nice to meet you, @daveshea!
Here's my quite late #thanks for your work. 💛

Sasha Chudesnov May 10, 2023

@daveshea “the zen of CSS design” was my first book on web design (well, I didn’t really buy it, I just stood in the middle of the book shop and gazed in awe at the illustrations)

Ludwig May 11, 2023

@daveshea
I am very thankful for your work.
Greetings and all the best wishes from Germany.

vasta May 11, 2023

@daveshea CSS Zen Garden was how I first learned about CSS! HTML was great but I was wowed with what I could do with CSS after I saw your site. Thank you for creating it.

Aranjedeath May 14, 2023

@daveshea thank you for making it -- it's why I write html/css the way I do to this day. Unlike the other recommendation I got at the same time (XHTML was the future! this probably dates the recommendation somewhat accurately), this approach has stood the test of time

Carlo Grosoli May 29, 2023

@daveshea I can only say thank you for your commitment and passion. I am no longer young now (45), and I seem to be slow to master new techniques (I learned the principle of margin collapsing just a year ago XD), but this site is very useful to me. I am still studying it to better understand certain solutions, and maybe I will never exhaust the need to consult it, who knows. Congratulations even if you do very little with it :)