Chapter 1, Designer, Meet jQuery, is an introduction to the jQuery library and JavaScript. You'll learn about jQuery's rise to fame, why it's so great for designers, and how it can help you create some fancy special effects without having to learn a lot of code. This chapter also includes a gentle and small introduction to JavaScript, progressive enhancement, and graceful degradation, and guides you through writing your first JavaScript code.

Chapter 2, Enhancing Links, walks you through some basic enhancements to links. You'll learn how to use jQuery to turn a list of links into a tabbed interface. Then, we'll take our first look at jQuery plugins where you'll learn to add custom tooltips to your links using the jQuery PowerTip plugin.

Chapter 3, Making a Better FAQ Page, will introduce you to collapsing and showing content, as well as creating simple animations and traversing an HTML document to move from one element to another. In this chapter, we'll set up a basic FAQ list, then work to progressively enhance it to make it easier for our site visitors to use.

Chapter 4, Building an Interactive Navigation Menu, guides you through setting up fully functioning and visually stunning drop-down and fly-out menus. We'll walk through the complex CSS required to get these types of menus working, use the Superfish plugin to fill in features missing from pure CSS solutions, and then take a look at customizing the appearance of the menus.

Chapter 5, Showing Content in Lightboxes, will walk you through showing photos and slideshows in a lightbox using the Colorbox jQuery plugin. Once we get the basics down, we'll also take a look at using the Colorbox plugin to create a fancy login, play a collection of videos, and even set up a single-page website gallery.

Chapter 6, Creating Slideshows and Sliders, walks you through setting up a simple crossfade slideshow without a plugin. Then, we'll take a look at the Basic Slider plugin to create a simple slideshow with controls. Finally, we'll take a look at the Cycle2 plugin, a flexible and customizable option that can be used to create sliders, slideshows, and carousels.

Chapter 7, Working with Responsive Designs, will dive deep into jQuery techniques for responsive designs. This includes fitting videos to the viewport, turning a drop-down menu into a responsive menu, and building a tiled layout for displaying image galleries.

Chapter 8, Getting the Most from Images, walks you through a few techniques to work with images in a more effective way. We'll take a look at lazy-loading images so that images are only loaded if our site visitor scrolls to them. We'll add an image zoom capability and finally, we'll take a look at creating fullscreen background images and slideshows for our pages.

Chapter 9, Improving Typography, shows you techniques to deal with typography effectively in responsive designs. We'll take a look at the FitText plugin to fit headlines to the width of the browser window, the SlabText plugin to create multiline headlines, the Lettering.js plugin to fine-tune kerning and to apply special effects, and finally, the ArcText plugin to set a text on a curve.

Chapter 10, Displaying Data Beautifully, takes a look at the important task of displaying data in an easy-to-understand way for your site visitors. First of all, we'll take a look at turning an ordinary HTML table into an interactive data grid with the DataTables plugin. Then, we'll look at turning HTML tables into charts and graphs that communicate our data clearly to our site visitors in an accessible and progressively enhanced way.

Chapter 11, Reacting to Scrolling, dives into the fun task of scrolling animations and parallax effects. We'll use the Scrollorama plugin to create a parallax effect, trigger animations on scroll, and activate a navigation bar that reacts to us scrolling down the page.

Chapter 12, Improving Forms, takes a look at how forms can be improved. This chapter walks you through setting up an HTML form properly using some of the latest HTML5 form elements. Then, we enhance the form by placing the cursor in the first field and validating the site visitor's form entries. Finally, we take a look at the FancyForm jQuery plugin, which allows us to style even the most stubborn and challenging form elements to achieve a consistent look for our forms across browsers.

You'll need a text editor to create HTML, CSS, and JavaScript files. Some great free options available are TextWrangler for Mac or Notepad++ for Windows. There are many other options available, and you are free to use your favorite text editor for any of the examples in this book. My personal favorite is Sublime Text, which is easy to work with and has a very nice feature set. If you haven't tried it before, I encourage you to download an evaluation copy for free to give it a try.

You'll also need a browser. My personal favorite is Google Chrome, which includes some really helpful built-in debugging tools for both CSS and JavaScript. Again, you are free to use your favorite browser for the examples in the book.

If you want to create images for your own designs, then Adobe Photoshop and Adobe Illustrator will be helpful, though they are not strictly necessary. All images needed to set up the examples used in this book are included in the sample code.

jQuery and jQuery plugins are being updated all the time. As new browsers are released with new support and capabilities, and as JavaScript, HTML, and CSS are further developed, new versions of jQuery and plugins are released to keep pace with the change. On one hand, this is a great news—jQuery and accompanying plugins get faster and more powerful all the time. On the other hand, it can be tough to keep up with all the changes. All versions of the plugins referenced were current at the time of writing the book, but you might find some differences when you work through the exercises. Plugin developers are usually very good at documenting the changes and updates, so don't be afraid to read through the documentation so you can understand what's changed and what adjustments you might need to make.

This book is for designers who know the basics of HTML and CSS, but want to extend their knowledge by learning how to use JavaScript and jQuery.

In this book, you will find several headings that appear frequently.

To give clear instructions of how to complete a procedure or task, we use:

Instructions often need some extra explanation so that they make sense, so they are followed with:

var x = 5;
var y = 2;
var z = x + y;

<head>
  <title>Practice Page</title>
  <link rel="stylesheet" href="styles/styles.css"/>
</head>

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.