I'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://giphy.com/gifs/13XW2MJE0XCoM0/html5)

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.

To train this mental model, I've had a plan of two parts:

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].

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.

That training set is what I'm asking y'all for:

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?

---

[1] http://book.mixu.net/css/

http://flexboxfroggy.com/ is also good for training a mental model of flexbox.