30+ Best jQuery Tutorials & Plugins for Beginners

JQuery is the best ajax scripting library i have ever seen and it makes life so much easier. Jquery is not just powerful and the library code is very well documented. The are tonnes plugins available for jquery which makes jquery so much fun.  If you are getting started with jquery then the tutorials listed below is worth exploring and there is so much to learn. I would regard these are  the best jquery tutorials i have ever seen and i have categorized them accordingly.  I would start the list from the few basic tutorials and then go on to advanced jquery tutorials. I have spent countless hours to compile these information and i was hoping that it could come in handy for me when i look back for reference and so does for you. I have compiled pretty much everything what jQuery can do. Enjoy!

1. JQuery Basics & Indepth Understanding

The following tutorials will  kickstart you with jQuery, its understanding and few tips and tricks to get started.

(i) jQuery Tutorial for Beginners

http://www.impressivewebs.com/jquery-tutorial-for-beginners/

(ii) Irresistible jQuery Tips

http://www.tripwiremagazine.com/2010/04/24-irresistible-jquery-tips-to-power-up-your-javascript-skills.html

(iii) Simplify Ajax Development with jQuery

http://www.ibm.com/developerworks/library/x-ajaxjquery.html

2. JQuery Photos & Slideshows Tutorials

The following are the some of the interesting tutorials to use jQuery for photo gallery and slideshows.

(i) Photoslider with Transparent Caption

http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

(ii) jQuery Lightbox

http://leandrovieira.com/projects/jquery/lightbox/

A dead simple jquery code to showcase photos in an elegant way.

(iii) Simple JQuery Gallery

http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

(iv) Beautiful Photo Stack Gallery with Jquery/CSS

http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/

(v) Smooth DIV Scroll using JQuery

http://plugins.jquery.com/project/SmoothDivScroll

3. jQuery Menu Headers & Navigation Tutorials

The following tutorials show how jquery can be used in header menus and navigation stuff including sliders and hover effects.

(i) Smooth Animated Menu

http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

(ii) Dropdown Digg Header Style

http://css-tricks.com/designing-the-digg-header-how-to-download/

(iii) Navigation Menus in Jquery

http://net.tutsplus.com

(iv) JQuery Slider & Drawer Effect

http://jqueryfordesigners.com/slide-out-and-drawer-effect/

(v) Fading Hover Effects

http://css-tricks.com/color-fading-menu-with-jquery/

4. JQuery Featured Content Slider Tutorials

Featured content has become so popular and it is so much sought by many web developers to integrate featured content sliders in homepage to get more professional look.

(i) Slick Autoplaying Featured Content Slider

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

(ii) JQuery Featured Content Slider

http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

(iii) Featured Image Rotator with Description

http://designm.ag/tutorials/image-rotator-css-jquery/

5. JQuery Tabs Tutorials

The following jquery tutorials takes you indepth understanding on how to design elegant and sleek tab interfaces for your site.

(i) jQuery Tabbed Navigation

http://trevordavis.net/play/javascript-tabbed-navigation/

(ii) Tabbed Interface in Jquery

http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/

(iii) Build Tabbed Box

http://www.cssnewbie.com/build-a-tabbed-box-with-css-and-jquery/

(iv) Slick Tabbed Content Area

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/

6. JQuery Forms & Validation Tutorials

jQuery adds a lot of interactivity with forms with its slick use and it is very important and there are many free jquery plugins to validate form fields.

(i) Field Highlighting in Forms

http://css-tricks.com/improved-current-field-highlighting-in-forms/

(ii) Twitter Like Login Box with JQuery

http://www.9lessons.info/2009/12/twitter-like-login-with-jquery-and-css.html

(iii) Quick and Easy JQuery Form Validation Tutorial

http://corpocrat.com/2009/07/15/quick-easy-form-validation-tutorial-with-jquery/

(iv) JQuery Form Validatior

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

(v) Facebook Like Alert Confirm Box with JQuery

http://www.9lessons.info/2009/08/facebook-style-alert-confirm-box-with.html

(vi) Boxy Feedback Form with Jquery

http://onehackoranother.com/projects/jquery/boxy/

7. JQuery News Tickers

News tickers arent difficult at all with jQuery and it can be very easily implemented with just few lines of code. If you are running  a news or magazine site, then news ticker is inevitable.

(i) JQuery News Ticker (just 10 lines of code)

http://woork.blogspot.com/2009/05/how-to-implement-news-ticker-with.html

(ii) Auto Vertical Scrolling JQuery News Ticker

http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/

8. JQuery Twitter Integration Tutorials

If you are interested in adding a twitter tweets to your page content then the following tutorials may be of awful help to you. Of course! All are based on jQuery.

(i) Twitter Fan Page

http://tutorialzine.com/2009/11/twitter-list-ajax-fanpage/

(ii) JQuery Twitter Ticker

http://tutorialzine.com/2009/10/jquery-twitter-ticker/

9. Integrating JQuery with MySQL and PHP

As a beginner in ajax/javascript coding, i have never imagined connecting php, mysql and jquery and i have been so fond of using jquery to for content display and backend database operations. The following tutorials will show you how jQuery plays a pivotal role with PHP/MySQL.

(i)Create a Shoutbox with jQuery and PHP

http://yensdesign.com/2009/01/create-a-shoutbox-using-php-and-ajax-jquery/

(ii) Live MySQL Database Search with JQuery

http://www.reynoldsftw.com/2009/03/live-mysql-database-search-with-jquery/

(iii) SMTP Mail with JQuery and PHP

http://www.9lessons.info/2009/02/smtp-feedback-mail-class-with-jquery.html

(iv) Autocomplete with PHP/MySQL

http://www.nodstrum.com/2007/09/19/autocompleter/

(v) JQuery Apple Style Search Suggestion

http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html

(vi) Twitter like Pagination with JQuery

http://blogfreakz.com/tutorial/facebook-and-twitter-pagination/

10. File Upload Tutorials with JQuery

If you are searching for jquery code, to handle mutilple/single  file uploads with jquery, you will find the below resources pretty interesting.

(i) JQuery Multi File Upload

http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

(ii) jQuery File Upload Form & Progressbar

http://t.wits.sg/2008/06/25/howto-php-and-jquery-upload-progress-bar/

(iii) jQuery Image Upload & Crop

http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/


Similar Posts:

Prabhu Balakrishnan

I am cool and friendly chap blogging since 2005. My interests are wordpress, PHP, linux servers, SEO and travel. Besides computers, i am crazy for video games, travel and a cup of hot coffee! I am born in India, but currently living in Budapest, Hungary. Feel free to contact me folks!

Leave a Reply

Your email address will not be published. Required fields are marked *


× nine = 63

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source codes with [code][/code] tags. Powered by