Learn HTML & CSS at the HTML Playground
The HTML Playground offers XHTML and CSS references by example. The site is still in beta at version 0.4, but offers an easy to use interface that makes digesting all the information displayed simple. It is a fast loading application and I have just found it to be overall a great tool for learning the basics of HTML and CSS.
The concept is pretty easy and follows an intuitive design and interface. The initial information is loaded from the left top pane and allows you to make a selection. Once you have chosen what you want to learn about, it loads more information into the panel directly to the right. Additional information, if available, is loaded underneath the initial pane. The last pane to load contains the examples and a way for you to try it out yourself. The design follows the logical left to right, top to bottom reading layout so you don’t miss a beat when you start using it. Although this seems like a no brainer, think of how many blogs out there, like mine, have the menu on the right, which took some time to get used to when it first started showing up. This simple design principle makes the app very easy to use.
The examples pane includes code highlighting to make reading and learning the code easier. The attributes pane in the bottom left contains a color picker of basic/common colors so you can start to learn the Hex codes for colors (for example: white = #FFFFFF). There are also basic choices for other attributes like align and border to help you learn what is available to customize those tags. The search function works well in allowing you to quickly search and find a specific tag to learn.
This is a free website and a good one to bookmark. I’m not sure how much recent activity there has been in development because the last blog entry was back in December of 2006. However, there has been some activity in the community section of the site as recently as July of 2008, so there may be some continued development taking place. Either way, the website is very useful in its current condition. I hope that there will be more features and information continually added, but for now, check out what’s there.