jQuery Tutorial for Beginners: 10 Tutorials to Get Started With jQuery [VIDEO]
This is an excerpt from my Complete jQuery Course with 5000+ happy students.
Video #1 – An Overview of JavaScript & jQuery
To start off, you’ll learn about JavaScript & jQuery in general and see hands-on demos of what you can do with jQuery. The examples shown in the video are just some of the things you’ll be able to implement easily and with only few lines of code when using jQuery.
Video #2 – Other JavaScript Frameworks
Deciding on a framework is always an important decision. Thus, we’ll take a look at a selection of alternative JavaScript frameworks out there — such as Dojo or Mootools — and you’ll learn when you may prefer those over jQuery.
In short, jQuery is a great one-stop-shop that facilitates all the most frequent (and annoying) tasks in JS. However, it’s not the best for everything — e.g. it’s known not to have the best performance for animations. This video gives a quick overview and enough information for you to keep digging if necessary.
Video #3 – Setting Up Sublime Text for jQuery
Feel free to skip ahead if you already have your favorite code editor ready to go. If not, this tutorial video guides you through the installation of one of the best lightweight code editors out there called Sublime Text. This is the editor I’ll be using for this course.
Video #4 – Setting Up The jQuery Project
One last thing before we can finally dive into some code! This video guides you through the project setup — don’t worry, it’s a simple code base that is only supposed you help you focus on writing jQuery. Just unzip the attached code archive and you’re ready to go!
Download: base.zip
Video #5 – jQuery Animations: Fading Elements In and Out
Let’s start writing some jQuery code! We’ll start right off with two really useful animations: smoothly fading out elements and fading them back in. You see this all over the web nowadays and it’s a really easy way to add quality to your design (don’t go overboard with this though!).
Video #6 – How Not to Use fadeIn(), fadeOut(), and fadeTo() – A Pitfall to Avoid
There’s a common pitfall to avoid when using the fading functions in jQuery. The two functions fadeIn() and fadeOut() will also set the display property of the element to block and none, respectively. The fadeTo() function however will only adjust the opacity, even if you go all the way down to 0% opacity — the element will still have display: block (or whatever it was before).
This means calling fadeOut() and then fadeTo(600, 1) will not make the element reappear as it will still have display: none from the fadeOut() call (but opacity is back to 100% from fadeTo()). Watch the video for all the details and interactive examples. And most importantly: Remember to code along at all times and post a comment if you have any open questions!
Video #7 – Animations Using show() and hide()
Moving on to two even simpler animations: show() and hide(). As the names imply, they allow you to make elements appear and disappear, respectively. If you don’t pass in an animation duration to these, they’ll simply set the display property accordingly. To really get an animation, try setting an animation duration as the first parameter.
Video #8 – Sliding Elements With slideUp(), slideDown(), and slideToggle()
The third really useful animation you can add to your stack are sliding animations. You see these often when there is a “read more” or “+” button on a page. jQuery is very consistent among the animation functions, you already know how to use fadeIn() and fadeOut() — you’ll have no problem to use slideUp() and slideDown() in the same way.
Video #9 – Moving Elements on the Page With jQuery’s animate()
This one is a bit more advanced: animate() lets you define more precisely which CSS properties to animate and how: e.g. increasing the width of a box or increasing the font size of a paragraph.
Video #10 – Creating Your Own Custom Animations Using animate()
This video goes into more detail. You’ll learn to create your own custom animations with jQuery’s animate() function in just a couple lines of code. Don’t forget to code along!
Awesome, you now know to basics of jQuery animations and you’ve seen how easy it is to use them. I hope you enjoyed the tutorials and learned something new from it. Let me know in the comments if you have any questions, suggestions or just feel like leaving a comment — I appreciate every one of them.
If you want to learn more, you can take a look at the full jQuery course on Udemy — you as a great reader of this blog will get the course for $10 (coupon code is included in the link) and there’s a 30-day money back guarantee. So try it out if you like, I’d appreciate your support!