• Your Name:

      Your Email: *

      Your Message: *

80 Brilliant jQuery Tutorials for Web Developers

The open source jQuery library has been gaining attention for years. It is still updated frequently with newer methods and parameters for already-existing functions. This open source movement has also paved the way for developers to create their own JS plugins.

jQuery’s emphasis on interface between JavaScript and HTML, centralizing on write less and do more approach made it a top notch tool that is fascinating every attention for theremarkable abilities for fast and short JavaScripts that simplifiesanimation, HTML navigations and Ajax interactions for swift web development.

Today we have assembled an 80 brilliantly helpful jQuery Tutorials from around the Web. Any front-end web developer who wants to get more familiar with jQuery should check out this set.
Top 49 Free and Premium jQuery Lightbox Plugins
66 Best jQuery CSS3 Menu Plugins and Tutorials
10 Awesome Video jQuery Plugins for Developers

1- Flyout Image Slider Using jQuery & CSS3

In this post I’m going to share about how to create an experimental flyout image slider. This image slider is a stack of some images and works by flying out the selected image to the front of images stack.

Flyout Image Slider Using jQuery & CSS3

2- Animated Content Menu with jQuery

we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear.

Animated Content Menu with jQuery

3- Create jQuery Pinterest Pin It Plugin

sometimes you might find it's not that convenience when the page contain more than 30 images. It takes a while to find the image. As a result, I created this plugin that allow you to pin the image straight away.

Create jQuery Pinterest Pin It Plugin

4- How to turn jQuery accordion into CSS3 accordion

Have you ever used ordinary accordion plugins in your projects, I believe that yes, and, most of them use javascript to work (or jQuery).

How to turn jQuery accordion into CSS3 accordion

5- Make a Google Powered Shopping Search Website

In this tutorial, we will be making a simple product search engine. Using jQuery and PHP, we will tap into Google’s Shopping Search API and return a list of items available for purchase, along with prices, photos and other useful information.

Make a Google Powered Shopping Search Website

6- Making a jQuery Countdown Timer

we are going to build a neat jQuery plugin for displaying a countdown timer. It will show the remaining days, hours, minutes and seconds to your event, as well as an animated updates on every second.

Making a jQuery Countdown Timer

7- Making an Interactive Picture with jQuery

in this tutorial I 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.

Making an Interactive Picture with jQuery

8- Sponsor Flip Wall With jQuery & CSS

We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

Sponsor Flip Wall With jQuery & CSS

9- Swatch Book with CSS3 and jQuery

A tutorial about how to create a swatch book like component that let's you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.

Swatch Book with CSS3 and jQuery

10- Make Pretty Charts For Your App with jQuery and xCharts

we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table.

Make Pretty Charts For Your App with jQuery and xCharts

11- How to Create an Interactive Graph using CSS3 & jQuery

In this tutorial we will code an Interactive Graph using jQuery and CSS3. We will use the jQuery’s popular plotting plugin “Flot”. Flot is a pure JavaScript plotting library for jQuery.

How to Create an Interactive Graph using CSS3 & jQuery

12- How to Create Accordion Menu (CSS3+jQuery)

jQuery offers more stability and cross browser compatibility support so if you want to provide to your visitors/client a better product you may consider use this jQuery version.

How to Create Accordion Menu (CSS3+jQuery)

13- Fancy Image gallery – jqFancyTransitions

In our new tutorial I would like to show you how to create a nice looking photo gallery with transition effects. I’m going to use a ready jQuery plugin – jqFancyTransitions.

Fancy Image gallery – jqFancyTransitions

14- An HTML5 Slideshow w/ Canvas & jQuery

we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

An HTML5 Slideshow w/ Canvas & jQuery

15- Portfolio Zoom Slider with jQuery

In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

Portfolio Zoom Slider with jQuery

16- Image Wall with jQuery

we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture.

Image Wall with jQuery

17- Image Slideshow UI Switcher

this tutorial I want to demonstrate how we can build a slideshow UI switcher for a set of photos.

Image Slideshow UI Switcher

18- Draggable Page Elements

I want to demonstrate how using a very simple jQuery UI script will allow for any objects to be dragged along the page.

Draggable Page Elements

19- Consecutive Item Slider

In this tutorial we’re going to create them using jQuery with the help of JavaScript native function window.setTimeout for holding animation sequence of each item.

Consecutive Item Slider

20- Rotating Dropdown Submenu

we’re going to create an automatic moving submenu based on selected its parent. Each submenu is horizontally stacked, sequentially in the order of their parent menu.

Rotating Dropdown Submenu

21- Walking Navigation

In this tutorial I am going to share how to create a walking navigation, on the other words, auto focus navigation based on user scrolling, by taking advantage of both jQuery and CSS animation.

Walking Navigation

22- CSS3+jQuery Android Dock

When playing the Galaxy Tab I love the fanciness of its Android’s dock. The application icon will pop out consecutively when arrow image on the dock clicked and not just the icon beautifully animated the dock itself also rotating vertically with 3D style. In this tutorial we’re going to create them using jQuery and CSS3.

CSS3+jQuery Android Dock

23- Expanding Search Fields

 in this tutorial we are going to move search form to the next level using jQuery & CSS3.

Expanding Search Fields

24- Styled Checkboxes

Checkbox is one of the most frequently used element on the forms, plain checkbox will be nice if in the forms we made there are many checkbox or others forms element that are used, but how about we just need a single checkbox in our forms without any other forms element, a little bit horrible؟

Styled Checkboxes

25- jQuery-Powered Dribbble Feed

Dribbble is a place to show off your design, it's based on invitation basis, therefore, most designs are of high quality.

jQuery-Powered Dribbble Feed

26- Intro.js Guided Website Tour

How do they know all the important interface features and menu links? By using a guided tour it is easy to explain all of these features to users who are interested.

Intro.js Guided Website Tour

27- jQuery Volume Slider

If you are a freebies hunter, chances are you have downloaded lots of PSD user interfaces (UI). Some of them are truly amazing and could save our time by prototyping the design we were working on.

jQuery Volume Slider

28- jQuery UI Sortable

We have covered how to give custom style to jQuery UI, starting from the UI Accordion, UI Slider and the UI Date Picker. Today we will continue our exploration on jQuery UI in theming jQuery UI Sortable.

jQuery UI Sortable

29- Mobile App Navigation Menu

In this tutorial I’ll show how you can build a mobile-based website/webapp. We’ll use CSS3 media queries for targeting specific devices and screen resolutions.

Mobile App Navigation Menu

30- jQuery Lightbox Gallery

Learn to make a fully functional lightbox using Jquery with both mouse and keyboard based controls for navigating images.

jQuery Lightbox Gallery

31- Quick Feedback Form

we are making a simple solution to this problem. Powered by jQuery, PHP and the PHPMailer class, this form sends the users’ suggestions directly to your mailbox.

Quick Feedback Form

32- Better Select Menus

we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.

Better Select Menus

33- Generate File Downloads

When building a web application, you oftentimes need to give users the ability to download a piece of data as a file. It could be a backup of configuration settings, reports, or other piece of information that is generated dynamically.

Generate File Downloads

34- Password Strength Indicator

In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin.

Password Strength Indicator

35- Mini-Ajax File Upload

In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually.

Mini-Ajax File Upload

36- jQuery Help System

In this tutorial, we are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application.

jQuery Help System

37- Simple Note Taking Webapp

In this tutorial we will be making a simple app with PHP and jQuery that lets users write notes.

Simple Note Taking Webapp

38- Auto-Cycle Images

A quick way to add a hover responsive, fast cycling, jQuery powered slideshow to your site.

Auto-Cycle Images

39- Sliding Box Captions

Add an extra layer of information to your images with sliding boxes.

Sliding Box Captions

40- Dimming Background Content

This is a quick and easy approach that tackles a pretty common technique. By the end of this tutorial you will be able to add pop up message boxes complete with dimmed background to your existing site.

Dimming Background Content

41- Lateral On-Scroll Slider

You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade.

Lateral On-Scroll Slider

42- Simple YouTube Menu Effect

A tutorial on how to recreate the effect of YouTube's little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.

Simple YouTube Menu Effect

43- Custom Dropdown List Styles

A tutorial on how to create some custom drop-down lists. We'll show you five examples with different looking drop-down menus and lists for various purposes.

Custom Dropdown List Styles

44- Color-Animated Ajax Comments

In this tutorial I want to look at using jQuery just for animating custom comments. The form will submit each post anonymously and won’t save anything to a local database.

Color-Animated Ajax Comments

45- Thumbnail Grid with Expanding Preview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Thumbnail Grid with Expanding Preview

46- Portfolio Flipping Slider Using jQuery & CSS3

There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

Portfolio Flipping Slider Using jQuery & CSS3

47- Filter Image View Using jQuery

we can choose one of the filter and it’s automatically hiding and showing portfolio item using horizontal slide effect.

Filter Image View Using jQuery

48- Expanding Image Menu with jQuery

In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them.

Expanding Image Menu with jQuery

49- Making a Flickr-powered Slideshow

we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets.

Making a Flickr-powered Slideshow

50- Grid Accordion with jQuery

The big thing is that the column of the current open cell expands to a reasonable reading width.

Grid Accordion with jQuery

51- Apple-like Retina Effect With jQuery

Apple has long applied a winning strategy in marketing – create well designed products, have a dedicated fan base, and let the hype build up before every product release.

Apple-like Retina Effect With jQuery

52- Sweet Tooltip a jQuery & CSS3 Tooltips

Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip but seven. This imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selector, etc.

Sweet Tooltip a jQuery & CSS3 Tooltips

53- Google Powered Site Search with jQuery

In this tutorial we are using Google’s AJAX Search API, to create a custom search engine, with which you can search for web results, images, video and news items on your site.

Google Powered Site Search with jQuery

54- Let’s Make A Simple AJAX Note Taking App

In this tutorial we will be making a simple app with PHP and jQuery that lets users write notes. The notes are going to be saved in plain text files on the server.

Let’s Make A Simple AJAX Note Taking App

55- How to Create a jQuery Confirm Dialog Replacement

Continuing on our quest for building customizable alternatives for browser’s controls, this week we are building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin.

How to Create a jQuery Confirm Dialog Replacement

56- Making a Simple Tweet to Download System

In this tutorial we will build a jQuery plugin around that API, and activate a download button once the user tweets.

Making a Simple Tweet to Download System

57- Type and spot using jQuery’s

I’m going to share a tutorial on how to create a simple content spotter using one of jQuery’s selector, :contains().

Type and spot using jQuery’s

58- Overlay-like Effect with jQuery

we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay.

Overlay-like Effect with jQuery

59- Item Blur Effect with CSS3 and jQuery

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them.

Item Blur Effect with CSS3 and jQuery

60- Create a Cool Website with Fancy Scrolling Effects

In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects.

Create a Cool Website with Fancy Scrolling Effects

61- Client Testimonials Powered by PHP, XML and jQuery

In this tutorial we are going to build a XML backed testimonial viewer, which, along with jQuery, can display the set on your product pages.

Client Testimonials Powered by PHP, XML and jQuery

62- Mini Help System with jQuery

In this tutorial, we are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application.

Mini Help System with jQuery

63- Dynamic FAQ Section w/ jQuery, YQL & Google Docs

In this tutorial, we are making a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

64- How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP

In this tutorial we will code an Upload Form from Impressionist UI by Vladimir Kudinov. We will code it using the Plupload API.

How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP

65- How to Create Calendar using jQuery and CSS3

In this tutorial we will code the jQuery and CSS3 Calendar that you can find in Futurico UI Pro made by Vladimir Kudinov.

How to Create Calendar using jQuery and CSS3

66- Parallax Slider with jQuery

We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective.

Parallax Slider with jQuery

67- Easy Slider 17 Numeric Navigation jQuery Slider

Easy Slider 17 Numeric Navigation jQuery Slider

68- How to Create a Responsive Image Slider in jQuery and CSS3

we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3.

How to Create a Responsive Image Slider in jQuery and CSS3

69- Portfolio Zoom Slider with jQuery

In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery.

Portfolio Zoom Slider with jQuery

70- Photobooth with PHP, jQuery and CSS3

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

Photobooth with PHP, jQuery and CSS3

71- Photo Booth Strips with Lightbox

A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly.

Photo Booth Strips with Lightbox

72- 3D Flipping Circle with CSS3 and jQuery

In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

3D Flipping Circle with CSS3 and jQuery

73- Parallax Effect

In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld.

Parallax Effect

74- Create a Parallax Scrolling Website Using Stellar.js

In this tutorial I'm going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js.

Create a Parallax Scrolling Website Using Stellar.js

75- A Simple Parallax Scrolling Technique

Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth.

A Simple Parallax Scrolling Technique

76- Fluid CSS3 Slideshow with Parallax Effect

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.

Fluid CSS3 Slideshow with Parallax Effect

77- Parallax gallery

In this tutorial, you will learn how to make a Flash parallax scrolling gallery from scratch. Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed.

Parallax gallery

78- Build a parallax scrolling website interface with jQuery and CSS

Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.

Build a parallax scrolling website interface with jQuery and CSS

79- Create a Cool Website with Fancy Scrolling Effects

In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects.

Create a Cool Website with Fancy Scrolling Effects

80- Parallax Content Slider With CSS3 And jQuery

A simple parallax content slider with different animations for each slider element and a background parallax effect.

Parallax Content Slider With CSS3 And jQuery