Follow

Kind of far-fetched, but hey: years ago I saw a web page which was plain HTML (ie. without CSS), and step by step it was turned into something beautiful and readable with a few CSS rules (adding margins, increasing font size, that kind of basic typography stuff). I seem to recall it was meant to teach both basic CSS and basic typography.

Does anyone have a link or remember anything about the title or the author, so I can find it? I just find random CSS tutorials.

Boosts welcome/encouraged!

@parataxis @djsundog I don't think so, but thanks for trying!

I seem to recall it had its own domain, and the only purpose of the page was to go through those simple steps. You saw every step and had to click on a link to see the next one, I believe.

@estebanm @parataxis @djsundog Yeah, I remember CSS Zen Garden was more of a showcase for what you could do with CSS, but I'm blanking on which one was the step-by-step styling. I'm sure it'll come to me at some point.

@Canageek @craigmaloney @parataxis @djsundog @0 the "better" version is similar to what I was looking for, but not quite.

It does have some of the things I was looking for, so partial success I guess 😅

Maybe I remember wrong, but I seem to recall the site I want to find let you see every step of the way, see the effects of every CSS rule.

@estebanm hmm, maybe the variants of "motherfucking website"? (not linking because search results will do better than a link here)

@ben It's somewhat similar to bettermotherfuckingwebsite.com, but if I recall correctly it showed the results step by step, so you see what a difference each CSS rule made.

BMFWS already has some cool ideas that I was looking for, though!

@estebanm Interested to know what this site is! Hopefully someone out there knows!

@elisha Through one of the replies I found bettermotherfuckingwebsite.com, which isn't what I was looking for, but also has some basic CSS rules to make a site much more readable.

@Tak No, I don't think so. It's certainly not that site specifically, and I don't think it was a site "solving" the Zen Garden thing...

@estebanm I remember seeing this, but I didn't save the link! Don't know how to dig it back up, or what it was called.

@estebanm It's a portfolio rather than educational and I wouldn't call it beautiful, so it's probably not exactly what you're looking for, but it does sound relevant to your interests: strml.net

@vinnl @estebanm came here to offer up this one! I show it to my students when introducing them to the power of CSS

@zzz Actually the one I'm looking for is very similar to this, but I don't think it's the same. I do remember the result of the other one to be much prettier, somehow.

Or maybe it was this one and I misremembered. In any case, this is really cool, thanks!

@zzz Oh yes, thank you very much, this was the article that came to my mind when I read the original toot, but I couldn't recall its location, and I regreted I didn't bookmark it, thanks to you I can now !

@syrinx Kind of. The one I'm thinking of modified the page _itself_, it wasn't just an article describing what you can do to other pages.

But this is pretty cool, thanks!

@estebanm dang, I remember that! No idea who did that. I feel like it was someone well known and it was connected to a talk of some kind.

@pkra Is the one you saw similar to jgthms.com/web-design-in-4-min, but much prettier in the end? And I think without any ad at the end, but I'm not sure...

@estebanm this was the one I hade seen but couldn’t find again to send it to you. Now I’ve bookmarked it!

@estebanm yes! Very similar. Not a hard "the same" but maybe this is a later version?

The context of a book would match my vague memory of this being for a talk of some kind.

@mhoye no, it was something showing the rules step by step, but thanks!

Sign in to participate in the conversation
Mastodon

Server run by the main developers of the project 🐘 It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!