Have been learning lots of new web technologies lately, including HTML5, CSS3, cross-browser font support, the 960 grid system, and a couple of JQuery plug-ins. I have browsed and perused many a web site in search of tutorials and info needed to learn these new web goodies…and found some very useful sites amidst of a lot of bad ones. I am including them here in hopes of saving you time in your quest to learn some of these new technologies.

HTML5 and CSS3

HTML 5 is here and is quite easy to learn. In particular, HTML5 allows you to specify form functionality that previously required JavaScript. Here is a link on creating forms in HTML5 that I found useful:

Improve your forms using HTML5

And I am absolutely loving CSS3 and the ability to round borders, add text shadows, use two backgrounds for one element, etc. IE currently does not support CSS3 but IE9 will. Due to various levels of browser support, some of these nifty CSS3 changes can be a bit code-intensive, but hopefully as more browsers get on board, this will eventually change.

This is a comprehensive tutorial on designing using both HTML5 and CSS3 without using images…my favorite of all I’ve seen on this subject so far.

Building a HTML5/CSS3 Website Layout Without Images – Part 1

Cross-Browser Web Fonts

Also supported in CSS3, this feature enables you to use a wide variety of True Type Fonts (TTF) for your web sites and not be limited to the few standard ones that most browsers recognize. Basically you download the font (making sure you are not infringing on copyrights) upload to your server, link that font in your CSS. This works in most browsers, although a separate EOT format is required for IE (of course!) Cross-browser fonts links are supported in Chrome 4 but not Chrome 3.

Here is a good site on this:

Expand Your Font Palette Using CSS3

This is also addressed in the site referenced at Building a HTML5/CSS3 Website Layout Without Images – Part 2

and includes a helpful chart on browser support for font-face support.

960 Grid System Mockups

There are several CSS frameworks out there useful for designing and developing sites using a grid system. I like the 960 Grid System. It is a bit rigid and takes a bit of changing some of your coding habits, as you cannot add margins or padding to the block elements themselves or the grid will break. There are a number of sites out there showing how to design a mock-up using the 960 grid system. I found these two especially helpful:

Design a Clean Web Layout with the 960 Grid – fairly simple

Design A Fresh Blog Theme On The 960 Grid – more advanced

Here’s another more advanced mock-up, which I haven’t tried yet, but hope to soon:

Design a Beautiful Website From Scratch

Coding using the 960 grid system.

It was harder finding a good tutorial that actually helped you code the 960 grid system. Here’s one I found that is pretty good. If you know of any others, I would love to hear from you!

Prototyping With The Grid 960 CSS Framework

IE6 Fixes

And I would be remiss if I didn’t include this site on listing some common fixes for IE6. If you are like me and have fought many battles with this ancient browser and just can’t wait till it goes away, check out this link for some standard fixes for IE6, which ought to make your life as a web designer just a little easier.

10 Fixes That Solve IE6 Problems

Update – 8.23.10

A couple more links to some great design tutorials, some for the 960 grid system:

35 Tutorials for Creating Website Layouts in Photoshop

40+ Greatest Web Interface Design Photoshop Tutorials, Part I

Have tried several of these and found them to be very helpful for upgrading my design skills.