• Apps
• Design
• Marketing
• News
• How To
• Answers

25 Amazing HTML5 Tricks and How to Make Them

HTML5 has managed to start a new era in the web world, an era in which the web is faster and creating a much pleasant user experience. Companies like Google and Facebook have adopted this technology ever since it was released in order to improve web services and optimize them so they are faster and more creative for their users.

Right now the HTML5 concept is pretty popular among the internet users and especially among web designers and developers. That’s why I believe it is only fair to share with you some tips and tricks to help you with your HTML5 experiences. Usually, HTML5 goes hand in hand with CSS3 to create the ultimate web experiences so in this article you will see that there are some tutorials including CSS techniques too.

1. Create an iPhone App using HTML5

Since we live in a technological world that is driven by iOS devices and Android ones, I think that this is one of the most important features that HTML5 can accomplish for you and your business. The guys at Six Revisions worked hard to bring you a great tutorial on how you can create your first application step by step.

2. Build an HTML5 Video Player

I was very happy when I came across this tutorial from TutsPlus because I was in a desperately need for a video player which was meant for one of my web projects. For a small payment of $3 you can download this tutorial from their marketplace along with the source file.

3. Geolocation with HTML5

Another incredibly useful tutorial designed by the NetTuts team. It will show you how to create an application to establish user’s location. What is special here is that everything happens inside the Safari browser.

4. Create a Contact Form

To have a contact form is essential but when you manage to decorate this contact form using HTML5 and CSS3 technologies you just get the flawless combination.

5. Synchronize Content with HTML5 Video Player

In this tutorial by Smashing Magazine you’ll learn what’s making HTML5 to be more particular than HTML4 and to bypass limitations you confronted in the previous version. To make things simple, here you will learn how to have full control over how your content is displayed including videos.

6. Create Content for “Multi-Touch” Devices

Since HTML5 is new, it seems absolutely normal for this technology to deal with current technology or future technology. In this tutorial you’ll learn how to make HTML5 applications that are compatible with multi-touch devices including iPhone and iPad.

7. HTML5 Drag and Drop Feature

Dragging and Droping elements in a web page is all about the Web 2.0 and making the user feel more interested in the content because he’s the one customizing the page to fit his needs.  This tutorial is all about making user the master of content placement and customizing pages with style.

8. Building Advanced Forms Using HTML5

9. Create Sticky Notes for iPhone

10. HTML5 Video and Mapping it in 3D

Blowing apart video fragments is a thing in which even experienced Flash designer can have difficulties. This tutorial shows you how to do this in a very fashionable way also in 3D.

11. Build a Beautiful One Page Portfolio

Creative and ergonomic is the way to expose your Portfolio to the world. Therefore HTML5 experts came up with a simple solution for your needs.

12. How to Create an iPhone App Website

Chris Spooner shows you how to create an amazing, but not on a mobile device but on a website.

13. Master HTML5 Canvas by Mozilla

Mozilla experts show you how to use the <canvas> element to draw images in HTML5. It is usually done using JavaScript code, but they will teach you how to do it and also show you some great examples.

14. Create an Advanced Slider Bar

A great slider which allows you to render a position of which value can be decided by entering a number in the box.

15. Build a Live News System for Your Site

If you have a website where you publish a lot of content, then is a good idea to have a Live News System which can help increase page impressions and let people find out about latest content additions.

16. Audio Elements in HTML5

Build an audio player with ease. This tutorial shows you how to do that and gives you step by step indications to do it.

17. jQuery, HTML5 and CSS3 for Creating a DropDown menu

If you have a website with few categories or few pages then you don’t need a complex menu that contains the drop-down feature, but if you have tons of pages then this HTML5 trick will help a lot.

18. Learn How to Create Powerful Offline Mobile Applications

The trend of using web languages such as HTML5 ​​to create applications for mobile devices is in constant growth. However it seems that the vast majority of applications are intended for online and the offline version is not working. IBM has created a tutorial to show you how to fix that.

19. Designing a Blog with HTML5 and CSS

Bloggers this is for you! In this tutorial you will learn how to approach the new technologies to improve your web blog and make it more user friendly.

20. Canvas Foundation

This is actually a book created to help you understand how to start drawing in HTML5.

21. Combining HTML5 and CSS3

It is well known that this is the perfect combination between most modern and futurist web technologies available. This tutorial shows you how to master them.

22. 50 Performance Tricks to Make HTML5 Websites Faster at Mix 11

Building user friendly interfaces and websites implies that we are aware of things that makes our websites move slower. This is a video tutorial recorded at MIX 11 from which you can learn what mistakes you should avoid and how to optimize your website to be light weight and extremely fast.

23. Get Offline Access With HTML5

A quick HTML5 tutorial to show you how to access pages from browsers cache while you are offline.

24. HTML5 Video and Audio in Modern Browsers

The tutorial shows you the benefits of HTML5 and not having to work with third party elements such as Flash, QuickTime or Silverlight.

25. 28 Tips and Tricks you Need to Know from Net TutsPlus

One of the most comprehensive list of things you need to learn about HTML5. Knowing this things can help you create your own HTML5 forms, canvas or even build your own website based on it.