in Design

20 Useful jQuery Tutorials For Beginners

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 41% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. jQuery is designed to change the way that you write JavaScript. If you are new to jQuery or you want to improve your skills, here you can see 20 interesting tutorials.

1. jQuery Plugin Authoring : Learn how to develop a jQuery plugin.

2. jQuery Beginner Tutorial in 18 minutes: Learn to build jQuery plugins from scratch – an 18 minute tutorial.

3. How jQuery Works: A basic introduction to jQuery and the concepts that you need to know to use it.

4. Getting Started with jQuery: Goes through the basics of jQuery, all the way up to building plugins.

5. jQuery For Designers: Examples of writing Unobtrusive JavaScript to add simple behavior to a web page.

6. jQuery tutorial: Text box hints: This tutorial will show you how can add a small amount of jQuery to add this feature to any of your web sites.

7. jQuery Tutorials for Designers: This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

8. The jSkinny on jQuery:A tutorial on the jQuery javascript library (from a Ruby/Rails perspective).

9. How to Get Anything You Want: An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM.

10. Using jQuery to align column heights: This tutorial will show you how to use the popular jQuery library to match the height of 2 columns in your layout.

11. An easy to use jQuery Tabs plugin: An useful tutorial about jQuery Tabs.

12. Improving Search Boxes with jQuery: You will learn how to improve a little more your sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

13. Five  Tips for Better jQuer: Some useful tips and tricks.

14.  Making an Interactive Picture with jQuery: In this tutorial the author will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people).

15. How to Create an Infinite Scrolling Web Gallery: When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX.

16. The Easiest Javascript Sliding Door Effect Tutorial with jQuery: This time is the well known sliding door effect that slide the top layer to top, bottom, left or right direction to reveal the content underneath.

17. Vertical Scroll Menu with jQuery Tutorial: In this tutorial, we will learn how to create a scroll menu.

18. A jQuery Twitter Ticker: In this tutorial you are going to create a pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API.

19. Create Bounce out Vertical menu with jQuery: You will create a simple bounce out vertical menu with the help of little bit css3 and jquery framework.

20. Filter image view using jquery: In this tutorial you will learn how to filter images using 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.