3 ms·
Ask HN: Examples of recently and well-written html and css to study?
Hi folks,
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.
- afarrell 9y agohttp://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.