“Fast. Secure. Responsive. Interactive. Stunningly beautiful. These are words that were not associated with the web until HTML5”
That’s how HTML5Rocks refer to the next generation of the web – and I really can’t agree more! Since I started working with HTML5 and CSS3 one and a half year ago I have come across a lot of interesting sites, slides and tools which I will now share with you. Although the HTML5 standard is not considered to be fully developed and thereby “finished” until 2014, a lot of the major browsers are right now supporting many of the features. So why should you wait for that long to gain knowledge of the coding-language?
First of all, I have to state that I am not a pro webdesigner, although I know my way into the field of basic coding. Designing is more my thing but since I focus on creating good user experiences online, I learned how awesome things CSS3 could do for you in terms of designing smooth and easily.
Get the overview
To understand what HTML5 and CSS3 can do for you, this HTML5-made slideshow by Google goes through some of the hottest topics as of July 2011. I really reccommend going through that one! HTML5 Rocks has collected a lot of other great slides here as well.
Try it!
In order for you to clearly get the idea of HTML5 and CSS3 you have to try it yourself. I recommend not to start entirely from scratch but to use The HTML5 Boilerplate Template or Modernizr (both templates provide IE-fallbacks). Using these templates it is easy to understand and fumble around with some of the basic attributes and tricks. If you don’t bother downloading a template and uploading your own stuff somewhere, you could just as well try it out right now with CSS3 Please 🙂
Tools
There are a number of tools and tutorials awailable for adding fancy CSS3-effects. I recommend the following:
- CSS3 Generator: css3generator.com
- CSS3 Gradients Generator: gradients.glrzad.com
- CSS3 Border Radius: border-radius.com
- CSS3 Button Maker: css-tricks.com/examples/ButtonMaker
- CSS3 Animations: leaverou.github.com/animatable
- CSS3 Cubic-Bezier (Curves): cubic-bezier.com
- CSS3 Background Patterns: lea.verou.me/css3patterns
Browser Support
Not all browsers support the features of HTML5 and CSS3. Check which browsers are supporting the features of CSS3 here. You can also test your browser against which CSS3 features it recognize.
Get inspired
There are a lot of wonderful HTML5-sites out there and I would really just suggest that you google HTML5 showcases and sites 🙂
Get further
The above stuff is probably not enough for you to learn HTML5 and CSS3. However I reccomend you to follow these blogs, since there is constantly added new stuff, demos and tutorials in the field of HTML5 and CSS3:
Follow: html5rocks.com, CSS3.info, CSS-tricks.com
If you have any recommendations I would love to hear from you 🙂