Handy HTML5 & CSS3 Resources

Recent projects have seen more and more HTML5 and CSS3 elements being asked for by our clients. This has led me to creating this post that lists some really handy resources for implementing these new technologies. I’ll keep adding to this post as I find new resources, so bookmark this page for future use.

HTML5

  1. HTML5 Boiler Plate Now on version 2 (released Aug 10 2011) the HTML5 Boilerplate is the professional HTML/CSS/JS template that features cross-browser normalization, performance optimizations and includes optional features like cross-domain Ajax and Flash.
  2. The Ultimate HTML5 Tutorial Collection A vast collection of tutorials and useful techniques from around the web.
  3. W3 Schools HTML5 Tutorial a simple tutorial that teaches you about the basics of the new features in HTML5
  4. HTML5 and CSS3 Tutorial by NetTuts A practical example of how to implement HTML5 and CSS3.
  5. HTML 5 Updates for .NET 4 Find out about the updates contained in Visual Studio 2010 SP1 for supporting HTML5 and CSS3.

CSS3

  1. Learning CSS3: A Reference Guide an overview that features a hand-picked and organized selection of the most useful Smashing Magazine’s articles related to CSS3.
  2. W3 Schools CSS3 Tutorial a simple tutorial that teaches you about the basics of the new features in CSS3.
  3. CSS3 Generator a useful tool by Randy Jensen that generates the following; rounded corners, box shadows, text shadows, RGBA transparencies, transitions, gradients and a whole lot more.
  4. Ultimate CSS3 Gradient Generator A powerful Photoshop-like CSS gradient editor from ColorZilla.
  5. CSS3 Button Maker A powerful tool that allows you to create fantastic looking buttons with no images.
  6. CSS3 Click Chart A visual demonstration of CSS3 in action.
  7. The Most Important CSS3 Properties Explained A good summary of the most important features in CSS3.
  8. Using CSS3: Older Browsers And Common Considerations A Smashing Magazine article that covers graceful degradation for older browsers that do not support CSS3.
  9. Create an adaptable website layout with CSS3 media queries A tutorial that will teach you how you can create an adaptable website layout using CSS3.
  10. Making HTML5 and CSS3 work with polyfills and shims A tutorial that shows you how to use the Modernizr framework to make your HTML5 and CSS3 work on older browsers.
  11. 12 Fun CSS Text Shadows Some really nice text shadow effects that you can just copy and paste into your code.
  12. 21 top tools for responsive web design Denise Jacobs rounds up 21 great tools to aid the process of making your sites responsive.
  13. Cross-Browser CSS in Seconds with Prefixr.com video tutorial by nettuts on how to use the Prefixr tool to auto-fix your CSS3 vendor prefixes.