
Ask HN: Examples of recently and well-written html and css to study? - afarrell
Hi folks,<p>I&#x27;m a mostly-backend developer who has long felt frustrated whenever I tried to work
with CSS. My experience of working with it feels like that of a man struggling to open
a set of Venetian blinds (https:&#x2F;&#x2F;giphy.com&#x2F;gifs&#x2F;13XW2MJE0XCoM0&#x2F;html5)<p>The reason is that I lack a solid mental model.  When I write python or
javascript, I can predict what a block of code will do. When I am planning a
change to an API endpoint, I can imagine what ruby will make that happen.
Likewise, I want to be able to see an image of a webpage and imagine roughly
what css I could write to make that happen. I want, to take an html and css
file and imagine what layout gets produced from that.<p>To train this mental model, I&#x27;ve had a plan of two parts:<p>1) Find a resource to give me a good theoretical framework by which to understand how
CSS layout works. A while ago, I finished reading the tremendously helpful Pedantic
Guide to CSS[1].<p>2) Go through a bunch of well-built static pages and try to re-create them,
analyze how their layout works, and generally use them as a training set.<p>That training set is what I&#x27;m asking y&#x27;all for:<p>Can you recommend either a page or a set of pages that have well-written html
that a student should analyze or even try imitating?<p>---<p>[1] http:&#x2F;&#x2F;book.mixu.net&#x2F;css&#x2F;<p>http:&#x2F;&#x2F;flexboxfroggy.com&#x2F; is also good for training a mental model of flexbox.
======
afarrell
[http://www.csszengarden.com/](http://www.csszengarden.com/) exists but many
of the css files have been lost/removed. Based on the urls of the remaining
files, they are all from before May 2013, when older IE was a real concern and
before flexbox was widely supported.

