Building a website used to be something that mystified people. It took a coding wizard to put together a website that actually worked, and a graphic design genius to make it look good. Now, it seems like anyone can make a website that does it all.
While that is quite a bit of a stretch, especially given the first websites ever created, the world of web design has certainly become easier over the years. With tools like IM Creator, it really is possible for anyone with any type of technical background to make a quality site. However, while IM Creator is a powerful tool for building an HTML5 website, not everyone wants a builder that does all the work.
While HTML5 is still a developing technology, it is rapidly becoming the new standard for HTML and website coding. Anyone looking to be a true web developer in the coming years needs to understand how this technology works. For the ambitious individuals still out there building sites the old-fashioned way (with the latest technology, of course), here are 10 HTML5 tutorials that will help you create the great website you want.
Surveys are becoming more and more popular around the internet as more people try to collect more and more data about users. However, most surveys end up being boring and make the user feel like they are taking a survey. This tutorial allows you to create a survey that your users will actually enjoy.
Anders Norås: Game on: Developing HTML5 games from NDC Conferences on Vimeo.
Designing games is one of the most enjoyable aspects of coding for many programmers. Of course, game designers don’t want to use standard templates. This tutorial provides five steps that walk you through the process of creating your own shooter game with HTML5. You’ll set up the game, create the controls, and even add audio.
3. Building a Responsive HTML5 Template
Websites today need to be responsive in order to create a great user experience. With this HTML5 tutorial, you will learn how to build a responsive template with six basic steps. When you’re finished, you’ll have a device-independent website that handles errors quickly without the need for loads of plugins.
4. Capture Audio and Video in HTML5
Getting audio and video into your website can really boost your web presence. However, many sites rely on browser plugins for audio and video to work properly. With HTML5, you can improve your site’s usage of media. This tutorial shows you how to incorporate these elements into your site.
Creating an eye-catching and functional product page is a breeze with this HTML5 tutorial. With this tutorial, you will learn how to display your product and all of the details on a single page. You’ll learn how to set up the entire page, from the header to the image to the buttons.
6. Convert WordPress Theme to HTML5
Most WordPress themes utilize XHTML for their easy-to-use templates and designs. However, the XHTML code is often unclear for the search engines, which can result in weaker rankings. By converting your theme into HTML5, you will give your site an advantage in the search engines. This tutorial shows you how.
7. Better Contact Forms with HTML5
Almost every website needs a good contact form. With HTML5 and CSS3, you can create a powerful and sleek contact form that doesn’t require any images. You’ll create a background for your form and style the send button to grab the attention of your viewers.
8. HTML5 Canvas for your Gallery
A gallery on your website can really help show your visitors what you have to offer. With this tutorial, you’ll learn how to set up a portfolio using HTML5 Canvas. This four-step process will leave your site looking great.
Incorporating audio into your site can give your users a great experience. However, no one really wants to post those clunky audio players that have become so common. With this tutorial, you’ll learn how to create your own audio player that looks and acts how you want. By following these nine steps, you will be able to provide a powerful audio experience on your site.
Bonus Tutorial:
10. Create Drag and Drop Templates and Features in HTML5
Click the image to see our drag&drop in action
Drag and drop features can really enhance the quality of a website, as well as speed along the process of designing once the coding is complete. With HTML5, drag and drop can be done directly into the browser without adding libraries such as jQuery and MooTools. The Drag and Drop tutorial shows you how to create a draggable element and how to create the areas to drag to. In just a couple hours, you can have a powerful drag and drop site that will be easy to use. Basic knowledge of HTML5, JavaScript, and CSS are required.
We loved HTML5 right from the start. This is why we were the first HTML5 website builder released to the market. We know that as designers and developers it’s very important for you to stay up to date with all the latest techniques and technology and it’s important for us as well, so please let us know of more tutorials we should check in the comments below. The good ones will be added to this article.
