'Free' JQuery Tutorials

The following list of text and video tutorials are a handy storehouse of information on jQuery. Try them, they are all free!   

  jQuery is one of the most popular JavaScript libraries written ever since it was first released in 2006. It has gone on to become the single 'go to' framework with JavaScript. Here are some good tutorials to help you learn all that there is to know about jQuery.

Tutorials For Beginners

Tutorials are the best way to start to learn jQuery for newbies. There are tonnes of good tutorials available online for free. They utilise simple examples to teach you the basic concepts and then gradually take you on a tour to complex application development.

1.Replace Content Using JQuery

2.Digg Style Sign Up Form

3.Google Maps

4.Performance Rules

5.Tutorials For Designers

Video Tutorials

Videos are always better when learning new concepts. They help you understand the code as well as the action that eventually follows every line of code. These are available for both beginners as well as advanced programmers.

1.JQuery Tutorials By Thenewboston

2.JQuery Tutorials By Derek Banas

3.Introduction To JQuery And AJAX Web Forms

4.JQuery Tutorial Playlist

5.JQuery Beginners Tutorial Playlist

Author Shivam Kotwalia, CodeKill

20 Of The Very Best jQuery Plugins That You Can Use!

Need a lightbox? Innovative scrollbars? Something else for your websites? These plugins just might suffice! 

If you are a web developer or designer, then jQuery would perhaps be like your right hand. This JavaScript library has quickly become a hit amongst developers on the web and is creating quite the waves. The fame is fully deserved too. jQuery can make your websites multifunctional, visually creative and attractive like no other. Don't believe us? Take a look at these 20 plugins!

1. Typehead.js: This is an open source project coming from Twitter, which allows for the creation of smart auto complete form fields.

2. Perfect Scrollbar: This jQuery plugin allows you to create scrollbars. It is a lightweight plugin that doesn’t conflict with the default layouts.

3. iLightbox: This is a paid lightbox plugin that can present videos, images and other HTML items. The plugin also has the option for a full screen mode.

4. Textillate.js: This plugin can create various animations like flash, pulse, fade, rotate, flip, shake, bounce etc. It uses Animate.css and Lettering.js.

5. Lazy Line Painter: This plugin is used for preparing and presenting SVG path animations through jQuery.

6. Elevate Zoom: This is a handy jQuery plugin that lets you create image-zoom effects. It is quite customisable as well.

7. Ayaslider: This is a flexible jQuery slider plugin that you can use.

8. Chardin.js: This is a pretty nifty jQuery plugin that allows you to add simple overlays to your applications.

9. Sidr: This is an useful plugin that lets you create hidden side menus.

10. Scroll UP: This plugin allows you to create a customisable ‘scroll to top’ feature for any website.

11. Swipebox: This is a lightbox plugin that can support touch events and is good at operating within responsive layouts.

12. Nested: This is an useful plugin for creating a multi-column grid layout with zero gaps.

13. Unslider: This jQuery plugin is less than 1 KB in size and helps for sliding HTML content.

14. Spectrum: This is a pretty simple jQuery colour picker plugin.

15. Spoiler Alert: Got spoilers about something on your website? This plugin can hide them the way you want.

16. Jpanel Menu: This is a plugin for creating panel type menus. These are quite similar to the panels you see on the mobile sites for Google and Facebook.

17. Mixitup: You can use this plugin to create animated filtering for sorted and categorised content.

18. Magnific Popup: This is another lightbox plugin. It is performance focussed and aims to provide its users with the best possible experience.

19. Tooltipster: This plugin allows the user to create semantic modern tooltips, which are further reinforced using the power of CSS.

20. Menu Aim: This jQuery plugin can be used for determining when an user is trying to hover over a dropdown menu and when they are trying to go to the contents of a sub-menu.

Shivam Kotwalia, CodeKill