Once a Web Developer or Designer has mastered HTML and CSS, the next step is to learn a new development language. jQuery is a Javascript Library, and it happens to be a great addition to HTML and CSS knowledge. From the jQuery Homepage -
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
To start using jQuery, you need to call its .js file in your page’s header, but don’t worry – these screencasts will show you how to get started and advance your skill set. The videos mentioned are – for the most part – ordered in this article from easiest to hardest.
Introduction to jQuery
In this screencast by Chris Coyier from CSS-Tricks, he gives an introduction to jQuery and some simple functions that you can use on your own websites.
Text Shadows & jQuery
In this podcast by <!Doctype>, Jim Hoskins goes over jQuery basics.
“jQuery for Absolute Beginners” Series
Jeffery Way of Nettuts+ and ThemeForest has creates a series of 15 screencasts that show you the very basics of using jQuery in your own projects. These videos will help anyone get started with the jQuery library.
Introduction to jQuery, Part 2
In the next part of this introduction to jQuery, Chris shows us some more advanced functions in jQuery.
jQuery look: Tim Van Damme
The folks at jQuery for Designers take apart Tim Van Damme’s portfolio and show us how to replicate the effects.
How to Create a Theme-Switcher in 200 Seconds
In this short but to the point screencast, Nettuts+ shows us how to create an easy style switcher with jQuery in minutes.
jQuery Tabs
Also by the folks at jQuery for Designers, in this screencast we get to see how to create our own tabs with jQuery.
How to Build a Lava-Lamp Style Navigation Menu
In this screencast, Jeffery Way shows us how to create a Lava-Lamp styled navigation menu. There is a written tutorial accompanying this screencast as well.
A Tour of jQuery on a Live Site
In this lengthy screencast, Chris Coyier goes through a real site showing us how jQuery can be used and implemented on the web. Not a tutorial, but this video does show good examples of jQuery in use.
jQuery Infinite Carousel
jQuery for Designers, teaches us how to create an infinite scrolling carousel.
Automatic Infinite Carousel
In addition to the infinite carousel video, here is another screencast showing us how to make the carousel automatic.
We hope that these screencasts helped you learn more about jQuery or were able to advance your current skill set. Please share what you have learned in the comments section below. Thanks!
Excellent blog, Keep posting like this.
That’s a nice collection, but…
I propose that learning some javascript is a better addition to HTML and CSS.
I’m not one of the elitists who believes “you shouldn’t use a javascript library unless you know enough to write the library yourself.” But I do advise beginners to learn at least some basic javascript before they dive into library-specific coding.
You will make better use of a library if you have a good understanding of javascript itself, and are capable of writing your own javascript outside the library. In particular, you’ll be sensitive to issues of performance and maintainability when writing your code.
Dammit TWS, let me edit my comments, or preview them, or at least show me what kind of HTML / pseudo-code is allowed. That second paragraph was supposed to be a blockquote.
You used to have a live-preview feature, which I thought was pretty neat. jQuery, no doubt.
Thanks for the round-up, some great screencasts in that list!
I kind of agree with Mike, but I also kind of disagree. I think if you’re going to use jQuery, having at least a fundamental knowledge / understanding of javascript will help you a lot, but on the other hand jQuery can be a good entry point into javascript for a designer who knows CSS (and HTML). Which route is best to take? Probably depends on the individual
Thanks again!
I think you’re right about this, Japh. Certainly each designer has to choose his own path, and it’s perfectly valid to go straight to jQuery. Especially when the designer just wants to add a few simple effects, this could the right order of learning.
The motivation for my comment is that, more and more, I’m seeing beginner tutorials that talk about “HTML, CSS, and jQuery” as the three main (front-end) languages. That’s not right. Beginners may not even realise that it’s “HTML, CSS, and javascript”.
Essentially, I’d like to see jQuery and other libraries kept in perspective, especially when we’re talking about “learning a new language”. Learning jQuery is not learning a new language: it’s learning a particular API that sits on top of a language to provide easier/better ways of performing certain common tasks (“easier” because the jQuery syntax adds expressive power; “better” because jQuery protects you from horrendous browser bugs in the DOM.)
When I first started using jQuery, I got so carried away that I would look for a “jQuery way” to write all my javascript: I wanted every line to start with a “$”! At the time, I didn’t understand that jQuery syntax is meant to augment javascript syntax, not to replace it. So what did I do when there wasn’t a “jQuery way” to write something? Look for a plugin, of course!
After a while, I realised this was madness. I now use jQuery for the things it’s good at, and happily write vanilla javascript for everything else.
Bear in mind that I was a moderately experienced user of javascript at the time I picked up jQuery. I think beginners are even more vulnerable to this “jQuery madness” way of coding, because jQuery may be all they’ve ever known. If they can’t even write a simple for loop, what will they do when jQuery doesn’t provide a wrapper function for a particular task?
So although I agree that learning jQuery first can be a good route, I would caution beginners to remember that jQuery doesn’t do everything. If they find themselves struggling to make something work in jQuery, then maybe it’s time to start learning some javascript. Collecting a large number of bitty jQuery plugins is a warning sign that you may be suffering from jQuery madness.
As Doug Crockford is fond of saying, only in javascript would a programmer expect to get good results without ever learning the language.
Hmm… just another note for the TWS team, it seems comments have lost a few bits of functionality! There’s the bit Mike mentioned, which I would consider a “nice to have”, and there’s reply notifications, which I would consider a necessity for a site that wants return traffic.
I ♥ TWS (<– wonder if that will work…)