25 jQuery Tutorials for Web Designers

jQuery is everywhere, its fast and versatile, and is rapidly becoming as common on websites as CSS. The only small problem you may have is keeping up with development, keeping up with new plugins and tutorials. This article will do just that. All of these tuts have been written within the past eight weeks, bringing you up to speed with latest developments.

25 jQuery Tutorials for Web Developers and Designers

Submit A Form Without Page Refresh using jQuery

jQuery Tutorials

A great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial you will learn how easy it is to submit a contact form that sends an email, without page refresh using jQuery.

Live Email Validation

jQuery Tutorials

In this tutorial you will learn how you can validate the format of an email address “live” using jQuery and regular expressions without the need for a plugin.

Fading Menu – Replacing Content

jQuery Tutorials

Iinstead of thinking about CSS as page layout and a way to style your page when it loads, you can use it in animation and change it on-the-fly to react to events that happen on your page.

Create a Scrolling Menu with CSS and jQuery

jQuery Tutorials

There are a lot of flash scrolling menus out there,in this tutorial you will create a similiary looking menu with just CSS and jQuery.

Create a live-update list effect with jQuery

jQuery Tutorials

In this tutorial you will learn how to create a live-update list effect, essentially a list that is generated as new data is added.

Advanced “Poll” jQuery Plugin

jQuery Tutorials

In this tutorial you are going to create a jQuery plugin from start to finish; this plugin will allow you to easily add a simple poll widget to a web page or blog.

How to Use jQuery to Preload an Image with a Fade-In Effect

jQuery Tutorials

There are several methods of loading images faster or at least exhibit the illusion of speed, for this technique, we will look into the preloading capabilities of JavaScript, while using the jQuery Framework.

Flickr Menu Design

jQuery Tutorials

This tutorial willl explain how to use jQuery and CSS and createa simple step-by-step way to implement a Flickr Horizontal Menu.

Awesome Popup jQuery Calculator

jQuery Tutorials

In this tutorial screencast, you will be shown how to build a jQuery calculator and implement it on your site.

Semantic Blockquotes with jQuery

jQuery Tutorials

Blockquotes can really assist in making your text visually appealing. This tutorial shows you how to create blockquotes using jQuery. Even beginners to jQuery will be able to learn how to make these blockquotes.

Selecting and Styling External Links, PDFs, PPTs …

jQuery Tutorials

In this tutorial you will learn how to use jQuery to select and style PDFs, PPT, images, and external links all differently using jQuery and CSS.

Authenticating Twitter API calls with PHP & jQuery

jQuery Tutorials

In this tutorial you will learn how to make a simple call to the Twitter API with our your Twitter credentials (to return your favorites in this example) using PHP and jQuery.

jQuery Slideshows With the Cycle Plugin

jQuery Tutorials

This tut shows you how to succesfully implement the jQuery Cycle, a plugin taht allows developers to quickly and easily create a slideshow out of anything contained within a given div element.

jQuery and Google Maps Tutorial

jQuery Tutorials

In this very detailed step by step tutorial you will be walked through how to get started using jQuery inside the Google Maps environment.

jQuery Sequential List

jQuery Tutorials

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list.

Using jQuery Slider to Scroll a Div

jQuery Tutorials

This tutorial is going to show you how to create a horizontally scrolling div using jQuery, html, and css. The main part of this tutorial is going to focus on the jQuery which is used to build the slider which controls the scrolling.

How to Mimic the iGoogle Interface

jQuery Tutorials

You will learn how to create a customizable interface with widgets, the finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications.

Reddit-style Voting With PHP, MySQL And jQuery

jQuery Tutorials

If you are a regular at Reddit, you would have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.

Simple jQuery Spy Effect

jQuery Tutorials

A great tutorial showing how to use the jQuery Spy Effect plugin and scroll lists in a beautiful way.

Create a slide tabbed box using jQuery

jQuery Tutorials

A simple and straight forward jQuery tutorial that creates a nice slideing tabbed box.

Horizontal Animated Menu

jQuery Tutorials

Demo URL : View Demo.

In this tutorial you will build a basic horizontal animated menu using jQuery.

Load In and Animate Content with jQuery

jQuery Tutorials

In this tutorial you will be taking your average everyday website and enhancing it with jQuery. Adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page using great animation effects.

Add icons to your links automatically using jQuery & CSS

jQuery Tutorials

You want to show a particular icon to a particular type of link. For eg: a pdf icon to all pdf file links, a text document icon to all text document links, zip icon to all links that are linked to zip files etc. This tutorial will show you how using jQuery.

Creating an OS Web Interface in jQuery

jQuery Tutorials

In this truly amazing tutorial, you will recreate a complete OS Web Interface with jQuery, have a look at the demo you will love this.

How To Build Quick and Simple AJAX Forms with JSON Responses

jQuery Tutorials

In this tutorial, you will go through the steps of setting up an AJAX form, which will return a JSON response used to display success/error messages.

(601 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter.


  • Mark William

    Awesome post.
    Thank you for sharing.