websites with good and clean HTML/CSS to learn from [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 10 years ago.

I currently have some modest HTML/CSS Know-How and want to improve from there.

I found out for myself that the best way is to get the HTML/CSS from an existing Website and to rebuild it from scratch and do some old fashioned learning by doing: why is this element needed, what happens if I remove it in firebug, etc...

But like in every field: as a newbee, its very difficult to distinguish wheter the HTML/CSS I look at is good or bad. Do you know any sites from which you think, as an advanced Webdesigner, that they have some great and clean HTML/CSS code to learn from?

Appreciate every tip belehe

PS: I am not spea开发者_运维知识库king about sites like CSS Zengarden, but rather real 'productive' sites like mint.com, etc...

---

Study or use Paul Irish's HTML 5 Boilerplate templates for modern, practical front end code: http://html5boilerplate.com/. Docs.

The boilerplate contains stuff like .htaccess for server-side optimization, inclusion of an ie6 png fixing script, inclusion of html5-enabling script for older browsers, and good all around techniques.

---

Some "classic" links:

• A List Apart: A list/magazine (because it existed before the term "blog" was generalized) with articles about every aspect of web design including semantic HTML and proper CSS use (featuring one of the articles that started the movement against table-based design).
• CSS Zen Garden: Created to show the designers:
  • That you can create very good designs without tables
  • That with a proper HTML layout you can change the design of your site touching only CSS and images (i.e. without having to change the HTML layout).

CSS Zen Garden has several of the most impressive and beautiful designs I have seen, definitely you should check it.

Edit: some examples as requested:

• Elastic lawn: The boxes grow with the text size, even if you don't use the zoom feature of recent browsers. That's useful if you care about the people that use big fonts in Windows.
• Retro Theather: Original use of absolute positioned elements (don't work in IE6).
• Door to my garden: Interesting effect using a fixed background.
• New Groove: An example of how to use decorative images for filling the leftover right space at higher window sizes.
• Kyoto Forest, Ballade, 15 Petals, Burning, Egyptian Dawn, Love is the air, etc: Just like them.

Note that one of the points of CSS Zen Garden is that all the designs use exactly the same HTML layout, only the CSS and the background images are changed.

---

I've always thought that CSS Zen Garden is a good place to get some rock solid ideas. These guys are layout gurus.