Sunteți pe pagina 1din 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Home Inspiration Freebies Tips Tools Resources News Tutorials

Search...

15 Useful HTML5 Tutorials and Cheat Sheets


By Henry Jones / Apr 28, 2010 / Tutorials 798 shares

HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specic tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. In an effort to encourage you to do the same and to prepare you for the future, weve rounded up 15 useful HTML5 tutorials and cheat sheets. Tutorials
advertise advertise here

How to Make an HTML5 iPhone App

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 1 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Design & Code a Cool iPhone App Website in HTML5

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 2 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Coding A HTML 5 Layout From Scratch

HTML 5 and CSS 3: The Techniques Youll Soon Be Using

Have a Field Day with HTML5 Forms

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 3 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Designing a blog with html5

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 4 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Structural Tags in HTML5

Coding a CSS3 & HTML5 One-Page Website Template

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 5 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

How to Make All Browsers Render HTML5 Mark-up Correctly Even IE6

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 6 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Cheat Sheets

HTML 5 Cheat Sheet

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 7 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

HTML 5 Visual Cheat Sheet

HTML5 Canvas Cheat Sheet

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 8 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

HTML 5 Pocket Book

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 9 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

Related Posts
1887 shares

8 Must-have Cheat Sheets for Web Designers and Developers


By Henry Jones / Oct 9, 2013 / Resources As a web designer or developer, its nearly impossible to remember multiple programming languages, frameworks, and keyboard shortcuts to various applications. This is where cheat sheets can be a life saver. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. So Read More 2705 shares

Photoshop CS6 Cheat Sheet


By Jess Wall / Apr 11, 2013 / infographics
http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets Page 10 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Photoshop is one of the preferred tools of web designers, and like any other tool that is used over and over, its important to optimize ones workow by using keyboard shortcuts. So the good people at ZeroLag have put together a super handy Photoshop CS6 cheat sheet exclusively for WDL. How to Read the Keyboard Read More

35 Comments

1.
Crikey Team

April 28, 2010 Great Tutorial, Thank you.. Reply

2.
CSSReX

April 28, 2010 Cool!! Is it compatible with the major issue, IE6? Reply

3.
Damian Smith

April 28, 2010 Thanks for providing these sites, didnt realise how much you could actually do with HTML5. Im just trying to learn all the new css3 techniques at them moment, although Im not 100% on using a lot of them because of browser compatibility etc. But most of my new sites have a bit of drop shadow and rounded corners here and there. I really dont like using xes either! Which new techniques do you like to use and just try and forget about well IE mainly! Although IE9 is supposed to support pretty much everything!
http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets Page 11 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Reply

4.
Jordan Walker

April 28, 2010 Great list of resources, it is these types of posts that shift designers and developers towards the new standards. Reply

5.
Chris Mower

April 28, 2010 I use some CSS3 techniques on my site, but I havent done a whole lot of dabbling into it or HTML5 yet. I appreciate the round-up of these great sites to help me learn it, thanks. Reply

6.
Cook

April 28, 2010 great tutorial..loved it Reply

7.
Rachel

April 28, 2010 great roundup of tutorials!highly informational..nice work..keep it up..


http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets Page 12 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Reply

8.
Theo

April 28, 2010 Thanks for this great resource collection ! Reply

9.
Inwebdeveloper

April 28, 2010 Thanks for sharing your great resource! Reply

10.
Sean McGary

April 29, 2010 Great collection of resources. Im always looking for really good cheat sheets to keep handy. Reply

11.
Deluxe Blog Tips

April 29, 2010 Therere more some articles, videos about HTML5 which you can see in this article: Comprehensive HTML5 Tutorials, Resources, Libraries Reply
http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets Page 13 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

12.
Smashing Share

April 30, 2010 Thanks for all these cheat sheets and nice to see how everybody is writing about HTML5 including me Hope someone nd this link worth! http://www.smashingshare.com/2010/04/28/ultimate-collection-of-html5-and-css3-resources/ Reply

13.
Tim

May 2, 2010 DevCheatSheet.com has more HTML 5 cheat sheets Reply

14.
Ian Devlin

May 17, 2010 The more posts that are out there promoting HTML5 the better, as some of the posts above show, many people are still unaware what it can offer and that it can be used already. Its also worth checking out HTML5 Laboratory I would say that as its my own site of course. Reply 15. 10 HTML5 Demos to Make You Forget About Flash | Inspiration June 24, 2010 [...] hearing a lot lately about how Flash is a dying technology and how itll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have [...]
http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets Page 14 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Reply

16.
axel

June 26, 2010 greate thanks// Reply

17.
Charleston Marketing

July 25, 2010 This is a great list to share. It is too bad that the major browsers cant keep up. Reply

18.
advait sakarde

August 8, 2010 specially the cheat sheets were very useful Reply

19.
nikhil

August 25, 2010 Gr8 collection. Thanks for sharing it. Reply

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 15 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

20.
brillcr

September 2, 2010 A Great set of HTML 5 tutorials here. Musnt forget Mark Pilgrim beautifully written HTML 5 masterpiece at diveintohtml5.org. I think its great that we will soon be able to put more than 1 h1 tag on a page in several sections and for it to validate! Yay! Reply

21.
dreamincolor

November 1, 2010 Dont forget this 12 Incredible HTML5 Experiments Check this out: http://www.dreamincoloronline.com/12-incredible-html5-experiments/ Reply

22.
Arthur

January 3, 2011 Very good Tutorial, Thank you. Reply

23.
sapardi

April 12, 2011 Great tutorial, this open my mind about html 5Thanks so much..
http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets Page 16 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Reply

24.
Mack

August 5, 2011 Excellent html5 tutorial resources. Here is one more website focused on html5 inspiration http://www.csstrophy.com. Reply

25.
Mianne

August 28, 2011 Thank you for this fantastic tutorial. Im just starting to look into learning HTML 5, and this seems a great place to start. Reply

26.
HTML5

September 18, 2011 Hi, Greats from Spain, Check this out: http://www.foroshtml5.com Reply

27.

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 17 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Mark William

November 9, 2011 Great collection of resources. Thanks a lot for this post. Reply

28.
Way2Geeks

December 3, 2011 very nice collection..Thanx for the post.. Reply

29.
sandy

December 10, 2011 great to see these many advantages of HTML 5 Reply

30.
Cyber

January 6, 2012 Well, it will be another 4-5 years before we can establish HTML5 as the default web language and structure, due to Microsoft not allowing IE to support it till version 9, and this only being allowed to be installed in Windows 7. companies still using XP, Many if not most still have not made the descision to upgrade, and if you go round coffee shops, they are all still using XP and IE6. with this background, web sites still need to be constructed to the mass market with the lowest common denominator. We are still needing to construct with browser detection and switch the display or technology accordingly. I for example am building a HTML5 game, that can not be down graded to old browsers because I am extensivly using the Canvas, and will not work on execanvas or ash canvas, but I make the descision to force my users to use an alternative..
http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets Page 18 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Reply

31.
Yordan

January 10, 2012 Hi.Thanks for sharing this. Reply

32.
arvind

February 2, 2012 great to see these many advantages of HTML 5 Reply

33.
HTML5 Tutor

February 8, 2012 This is good list of sites. However, there are notable sites missing from this list. Are you planning to do an update? Reply

34.
Yogesh Kumar

June 6, 2012 Its wonderful! Thanks to share it. Reply


http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets Page 19 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

35.
Suffolk Media designer

October 2, 2012 I can never have enough HTML 5 goodies. Thanks for sharing! Please, dont talk about HTML5 replacing Flash. That is plain ridiculous. More some petty stuff, yet, but Javascript has done that already. Reply

Leave a Reply
Name (required) Email (required) Website

Submit Comment

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 20 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

WDL Newsletter Subscribe to our email newsletter to get resources, tips, and freebies sent directly to your inbox.
Your email address

Subscribe

Popular Posts

Advertise Here

11 Inspiring Single Page Websites 20 Amazing Examples of Typography Sketches for Your Inspiration 4 Common Mistakes You are Making on Your Website and How to Fix Them How to Build an Awesome Website Footer 30 Free Vintage Logo Templates Spring Up your Designs with Some Free Flower Textures

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 21 of 22

15 Useful HTML5 Tutorials and Cheat Sheets | Tutorials

17/03/2014 11:26 am

Categories Inspiration Freebies Tips Tools Resources News Tutorials Recent Tweets Need some owery textures? Spring Up your Designs with Some Free Flower Textures http://t.co/i5JJCwpYDQ March 15 5:49 am Spring Up your Designs with Some Free Flower Textures http://t.co/i5JJCwpYDQ March 15 1:32 am 1 year ago: Responsive Web Design Workow Considerations http://t.co/HVm0wn6UN1 March 14 9:28 am 2014 Web Design Ledger All Rights Reserved. About | Contact | Privacy Policy

http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Page 22 of 22

S-ar putea să vă placă și