in Design

Roundup: 40 Must Have HTML5 and jQuery Tutorials

When starting learning how to create web applications or websites, one of the most popular advice is to read tutorials and put them into practice. There are a plethora of web development books but the theory is useless without jumping into action. Nowadays thanks to the evolution of the web, we have a lot of tools for creating stunning websites but the building blocks of any online-based project is the old HTML. Sure thing, “old” is an improper word thanks to the newest iteration but you get the point. HTML5 practically opened the door to endless possibilities and it offers a way to create virtually anything you want. Well, almost anything because when you get down to business you’ll realize that HTML by itself it’s not enough. Among other programming or scripting languages you’ll need JavaScript, or better jQuery which will help you take your website to a higher level.

So, if you decided to start your web development career, then you will need to learn both of them. In this article I have collected 40 very useful HTML5 and jQuery tutorials that will show you different solutions for many of the most common problems that can appear when building a website or even more, they will help you understand and add hot features on your site. We will start with HTML5 tutorials and then we’ll dive into more complicated stuff showed by the jQuery tutorials.

HTML5 tutorials

1. How to design a Foursquare-like user profile page using HTML5

2. How to create offline web applications on mobile devices with HTML5

3. HTML5 Grayscale Image Hover

4. Learn how to draw with HTML5 canvas

5. How to create an HTML5 Canvas Tile Swapping Puzzle

6. Learn how to use semantic HTML

7. Build a Lightbox for a responsive HTML5 touch interface

9.Create your portfolio gallery using HTML5 Canvas

10. Interactive typography effects with HTML5

11. How to detect geolocation on web browser using HTML5

12. Learn how to Build Cross-Browser HTML5 Forms

13. How to create HTML5 audio visualizations

14. How to create a drag and drop using HTML5

15. How to create a page flip using HTML5

16. How to make disaster-proof HTML5 forms

17. How to start making games using HTML5

18.  How to create an iPhone app using HTML5

20. How to create an animated 404 error not found page

jQuery tutorials

1. How to create an animated Scroll to Top

2. How to change image on click with jQuery

3. How to expand stacked images using jQuery slider

4. JQuery Internal link animation scrolling

5. How to shuffle between images using JQuery

6. How to create a thumbnail proximity effect using jQuery

7. How to create a parallax scrolling using jQuery

8. How to make a curving text using jQuery and CSS3

9. How to create an attractive before and after photo effect with jQuery

10. How to Create an Upload Form using jQuery and PHP

11. How to create a simple voting  using JQuery

12. Pretty Simple Content Slider with jQuery and CSS3

13. How to create a simple JQuery Flickr style tooltip menu

14. How to create a neat calendar using only jQuery and CSS3

15. Shutter effect portfolio with jQuery

16. How to make a responsive horizontal layout

17. Enhance your checkboxes using jQuery and CSS3

18. How to create a Metro style menu using jQuery

19. How to create moving boxes content with jQuery

20. How to build an e-mail request invitation form with jQuery



Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.