Grow your CSS skills. Land your dream job.

Learning jQuery: A Roundup Roundup

Published by Chris Coyier

jqueryheader.png

I've been really getting into this jQuery phenomenon lately. jQuery is tightly tied to CSS, so if you are already comfortable with CSS and are looking for ways to expand your possibilities, jQuery is the place to be. You can achieve so many cool effects with it, and there are so many good learning resources out there for it I think it makes sense for serious web designers to start getting their hands dirty with this. In the past few weeks, I've come across some great tutorials and roundups that have been helping me learn, so I thought I'd share.

jQuery for Designers
I was very pleased to find this site. There are only seven posts I think, but each one of them in a gem. Four of them have really well-made screencasts that go along with them where you can watch the code as it is built and see the thought behind it. Very awesome.

Web Designer Wall: jQuery Tutorials for Designers
Nick La has an article with 10 great examples of how to do fairly simple things in jQuery like build a simple accordian and delete boxes. The entire set is downloadable free.

8 Fantastic jQuery Tutorials for Designers
I put this roundup together for TutorialBlog, which highlights some more tutorials that may have not been seen in these other roundups.

50 Amazing jQuery Examples
Sometimes a good way to learn is just by downloading examples and playing with them. Noupe is always great for big roundups and this jQuery one is no exception.

Also:
jQuery Homepage
jQuery UI

Comments

  1. I’ve been getting into it too, I used the tutorials on Web Designer Wall to add some jQuery to my homepage, ive got block links and some cool opacity changes on hover.

    It’s definitely something I’m going to do more with.

  2. There seem to be loads of blog post about jQuery at the moment and a book has just come out.

    I have been playing with it for about a day and I really like it. Smaller than prototype and I have found it loads easer than moo-tools.

    I like this little documentation site here.

    Also when I said it is smaller than prototype I really meant it, check these figures out.

  3. thanks Chris,
    I am totally with you when you are expert or even normal designer with CSS Jquery will give you what you need.

  4. Thanks for the link Chris, and for the excellent roundup.

  5. Hi Chris,
    very nice collection. A question in general: Has anyone here tried MooTools a longer time? Is there a reason, why so many people use jQuery? Are there clones of popular “applications”, for example LightBox (or MooTools: Slimbox)?

    By the way: I really love the tips and tricks on your site. These are very helpful for me as a intermediate web-designer and developer. I’ll also watch your screen casts soon. Thanks for this website.

    PS: Sorry if my English is poor, I’m German.

  6. Permalink to comment#

    @ as-Design.

    humans are monkeys, monkey sees, monkey does.. U see someone use jQuery, talk about jQuery and before know it u will be using it to.. Why? because where monkeys.

    There allot of ajax toolkits that u can use. Also jQuery has allot of uses who build scripts, and thats the demand, u dont wanna do all the work your self, if someone else allready did it. That would be a waste of your time, (unless ofcourse u like doin it the hard way).

    The only suggestion i can give u is try out all toolkits, and see what matches the best with your workflow, and project. It might also be smart to look out side the framework, if it can blend in with other frameworks. Some toolkits have widgets or functionality that other doent have, so sometimes u need to mix the toolkits to achieve your desired user experiance.

    I’m an Adobe Spry addict, i started working with it with out any javascript experiance, and i became the first Adobe Spry Community Expert. I fell in love with the simplicity of it and how they made it feel like an extension of HTML and css.

    I have tryed mootools and i must say, they arent bad :p, as i said above, choose a framework that matches your workflow, and project, dont just go with the ‘well known’ libs., jQuery, Prototype, Scriptaculous ,YUI, Mootools, Dojo, ExtJs, Nitobi, Spry, GWT, JMaki, Mochikit ..

    And o dear.. this must me longest blog post here ._.

  7. Edwin
    Permalink to comment#

    I admit the reason that I have choosen jQuery in a somewhat “monkey-like” fashion. I am seeing a lot of other designers that I like and admire use it, so I’m following suit.

    I’m sure all of the major frameworks have their charms, but I think time is better spent really learning one rather than part-learning multiple. I’m also sure that all of the major ones (Prototype, Spry, MooTools, YUI…) have their sworn advocates, and probably rightly so.

  8. Hi Chris,

    Great roundup of jQuery tutorials. If you get a chance, you might find some good stuff at my site, Learning jQuery, as well.

    @as-design: In answer to your question about lightboxes, jQuery has a number of plugins that do the same sort of thing and more: ShadowBox, Thickbox, Lightbox, etc. Actually, ShadowBox is library-agnostic, so you can use it with any of the libraries, or with none at all. It’s a beautiful thing.

  9. Permalink to comment#

    I am currently developing a CMS exclusively using jQuery and I must say it is making my life 100x easier. The AJAX functionality is key as all updates to the system can be completed without having to navigate away from a single page. jQuery is King.

  10. Barry

    I am wondering which js framework is best for FatWire CMS. We are currently using Adobe Spry and Mootools for some affect. I am pretty green at js so any help is great. Thanks.

  11. Barry

    Hi again. How do I convince that jquery is the best to my director of development? He isn’t apposed to either, but I need to give him solid evidence that jquery is the way to go over other js frameworks. Thanks again.

  12. @Barry: Great question. Unfortunately I can’t really do it justice as jQuery is the only framework I really “know” and I don’t know it really that well.

    I do feel though, that jQuery feels very natural to write because of how closely tied to HTML and CSS it is. You target elements with about the same syntax you use in the markup and you control CSS with the same attributes you use in real CSS. Pretty cool.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".