jQuery for Designers

Now in its second edition! A gentle introduction to JavaScript and jQuery for non-coders.

Learn more

Warning: count(): Parameter must be an array or an object that implements Countable in /home/customer/www/jqueryfordesignersbook.com/public_html/wp-content/plugins/features-by-woothemes/classes/class-woothemes-widget-features.php on line 97

Non-scary

Steps you through each task and provides helpful information to take the anxiety out of learning to code.

Just for Designers

Clear and concise, design-centric tutorials teach you jQuery without getting bogged down in jargon.

Popular Effects

Create popular effects like animated slideshows, parallax scrolling effects, responsive design, and more!

Get started learning jQuery today!

jQuery for Designers is a gentle and approachable introduction to learning to create interactive page elements with jQuery.

Praise for the First Edition

jQuery is very powerful and popular, but it can be a bit overwhelming to try to get started on your own. This book can help you get your feet wet. It’s a nice, friendly book to explain how to get started using jQuery. It is filled with lots of easy, useful examples. You’ll learn how simple it can be to add powerful functionality to your websites. And the really nice thing about this book is the author’s passion for accessibility. You know you will be learning how to use jQuery properly.

I found Natalie’s book very easy to follow and digest. I have had some prior experience with jQuery but I can see why this book would be very accessible for any non-programmer. The examples were clear and just detailed enough to be effective but not too extended. The step-by-step nature of the writing breaks the material up into bite-sized chunks and makes it easy to grasp. If you are looking for a book to learn jQuery by, you would not go wrong by choosing this book. It is complete, concise and conversational in tone. I recommend it without reservation.

“jQuery for Designers: Beginner’s Guide” is…just what the doctor ordered. I have been wanting to get a better understanding of jQuery and was a bit intimidated by its power. I was somewhat familiar with JavaScript after taking a class but I felt I had only scratched the surface with regard to it’s implementation.

Latest Videos

Episode 13: Animating Color

  • Posted On: 11 Nov 2014
  • Animating Color

    If you want to easily create animations in jQuery, you can use the animate() method to animate any numerical CSS property - font-size, width, padding, margin, left, top, etc. However, even though colors in CSS are technically numerical, the jQuery animate() method won't animate colors. The jQuery team released the jQuery Color plugin which adds support for color animation, but with CSS3 and the transition property, we don't even need the plugin to create color animations. We can use jQuery in combination with CSS for animating color without using the Color plugin. We get started by creating a simple grayscale style for a <div>. Then we add a hover style to the <div> to show how we can use CSS to change the color scheme of our <div> on hover using just CSS. It's okay, but it's just a sudden color change. So we take a look at how we can use the CSS transition property to create an animation for that color change. All we have to do is add the transition property to the grayscale styling for our <div>. We specify which property or properties we want to add an animated transition to, then we say how long the animation should take to complete. You can get even more specific about your transition, so check out this article for more information on what you can do. CSS alone works great as long as we only want the animation to happen when we're hovering, but if we want to animate the color change on click, we have to step into using a bit of jQuery. We can use a CSS class in combination with a click event handling function to animate the color change when we click. All we have to do is use jQuery's addClass method to add the class. And if we want to toggle the class on and off, we can just use jQuery's toggleClass method instead. We take a look at how we can use different color schemes for each individual <div> so that each changes to a different color when clicked. CSS3 makes some pretty amazing things possible without even using JavaScript, but when we can use CSS3 in combination with JavaScript, we have the power to do some pretty awesome stuff with just a teeny bit of code.

    JQuery in the News