2010
12/21
How To Start Using HTML5 + CSS3 Now!
Whether you hear 2012 or 2022, it doesn’t matter when HTML5 will be completely “finished” because enough of it is ready that you can start using HTML5 now! And CSS3 for that matter!
In case you’ve been living under a rock for sometime, HTML5 and CSS3 are the future of web standards (click for a quick overview). The browser is a much more powerful tool than it used to be, and the changes and advances in HTML5/CSS3 reflect that. No longer are the days of static web pages, now audio/video, animations, drawing, and other features that you used to have to go to Flash or plugins for are available and supported natively. HTML5 is also going to completely revolutionize SEO because now search engines will be able to identify what specific elements in pages are instead of just understanding paragraph/header text and divs.
There are already many well-written articles on the advances of HTML5 (do a quick search on Smashing Magazine, A List Apart, Think Vitamin, or Speckyboy, and you can even buy some books for that matter) so I won’t waste my breath. But what I will do is go over tools available now to help you get started.
Here is a list of links to 27 resources to get you using HTML5 & CSS3 today!
HTML5 Rocks
Get familiar with all the new features and experiment with samples of code and tutorials.
Can I Use…
Goes over what is supported in different versions of different browsers. A comprehensive set of tables that covers CSS3, HTML5, JS API, etc. You can search specifically for things or use the check boxes to show/hide categories and options.
HTML5 Test
Tests your browser for how compatible it is with HTML5 right now (out of a possible score of 300). It is impossible to reach 300 right now but if you use Chrome, your score is the highest @ 231 (yet another reason to love Chrome).
Modernizr
A JavaScript library that checks support for HTML5 and CSS3 features. It adds classes to target browser functionality in your stylesheet and you don’t have to know how to write JS to use it.
HTML5shiv
HTML5 enabling script for Internet Explorer specifically. Creates the new HTML5 DOM elements so styles can be applied to them.
selectivizr
Similarly, a script that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer.
HTML5 Boilerplate
Badass template free to download to get you familiarized with HTML5. Great to use as a base and then strip down elements you don’t need.
Illustrator to HTML5 Canvas Plugin
If you have and use Illustrator, this simple plugin allows you to create your vector graphic (and animate it if you wish) and then export it as HTML/Javascript. Code ain’t pretty but very cool and easy to use!
Firefogg
Web app (Friefox only) that allows you to convert video files to the ogv and webm codecs to be used with the new HTML5 video tags.
Note, if you use the new video tags you should have your source files in this order: .mp4/.m4v, .ogv and/or .webm, and then fallback to Flash (all inside the video tags)
VideoJS: An HTML5 Video Player
Custom HTML5 video player and controls using HTML5 and JavaScript.
FlareVideo
Open source HTML5 video player with Flash fallback with easy customization.
html5media
A simple script that enables audio and video tags in all major browsers.
CSS3, Please!
An in-browser stylesheet that you can edit and see real-time updates to help get acquainted.
Using CSS3 Transitions, Transforms, and Animations
A good overview of what can be done and what’s supported by different browsers.
Sencha Animator
Free program that allows you to create animations with a timeline and property inspector and then spits it out as HTML/CSS. Again, the code ain’t pretty but just think of what you can do without Flash and without any real knowledge of new CSS transition properties.
CSS3 Generator
Very cool and easy to use CSS3 code generator.
CSS3 Maker
Another CSS3 code generator. I think I actually like this UI of this one better.
CSS3 Button Generator
A lovely button generator, complete with preview and code!
Font Squirrel @font-face kits
@font-face has been around for a while, but here you can find a bunch of free-to-use font kits that include EOT, TTF, WOFF, and SVG fonts. Or you can upload your own font and create your own kit. Lovely!
HTML5 Validation (still experimental…)
HTML5 Experimental Validator
W3C Validator
Other HTML5/CSS3 webpage templates available for free download/use
Free HTML5 & CSS3 Theme
Free HTML5 Template
Create an Elegant Website with HTML5 & CSS3
UPDATE 12/22:
SwitchToHTML5
Generates a basic HTML5 layout using new markup elements based on what you want to include (with a list of checkboxes to choose from)
Bookmark the permalink.
Related Posts
Let’s Review, Shall We?4 COMMENTS
-
Pingback: Tweets that mention How to Start Using #HTML5 and #CSS3 Right Now! | -- Topsy.com
-
admin says:
Thanks guys! I’ve been collecting these links as they appear a couple at a time in other blog posts and decided to finally compile them all together because I haven’t seen a list like this yet.
-
Pingback: HTML5 CSS3 « netpack
-
Pingback: 270+ HTML5 Tutorials and a Round-Up of Round-Ups - WebsitesMadeRight.com
Great post.. I have been waiting for that!?!?