Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By Chris Converse |

Build Interactive Websites with jQuery

Building Interactive Sites with jQuery

If you want to capture your audience’s attention, you have to provide a great user experience. An interactive website is one of the best ways to keep your users engaged and returning to your site. While interactive websites may look impressive, they don’t have to be difficult to create. With jQuery, you can achieve an interactive web experience rather easily.

Designed to simplify JavaScript scripting, jQuery is the most widely used JavaScript library in use today. You can quickly incorporate dynamic and interactive content into a webpage with just a few lines of code. jQuery simplifies JavaScript by providing shorthand commands for more complex functionality. In other words, you can get more functionality with less coding.


The figure above demonstrates how just a few lines of jQuery can add a sophisticated user experience for a mobile menu. When the user clicks or taps the menu button, a simple logic test determines if the menu should open or close. Considering jQuery can query HTML and CSS for their current properties, changing those properties based on user interaction becomes quick and painless.

Watch a Video

Learn how quickly you can find, test, and animate a mobile menu with just a few lines of jQuery code.

jQuery–Designed to Work with HTML and CSS

Most websites designed today use three main components; HTML, CSS, and JavaScript. HTML provides the content and structure of the site. CSS establishes the style and layout of that content. JavaScript can be used to manipulate properties of HTML and CSS. This can result in changing text on the screen, animating images and text, or changing styles, such as colors and font sizes, all based on user interactions.

These manipulations of HTML and CSS allow us to alter a webpage based on user interaction. In addition to changing properties, jQuery and JavaScript can be used to detect the screen size and render the best content and layout for that user. What’s more, JavaScript can even be used to access GPS coordinates on a phone!

Watch a Video

Learn the intricacies of an animated sliding tabbed panel in just six minutes. This video will show you how quickly you can add interactive components to any existing webpage.

With JavaScript and jQuery, your website can do more—over more platforms. While JavaScript coding can often be complex, when you build interactive sites with jQuery the process of creating animations, handling events, developing applications, and implementing plugins is far easier.

Where to Go from Here

When beginning with JavaScript and jQuery, remember to start small. Understanding the basics of finding and changing properties of HTML and CSS will lead to limitless possibilities for your interactive design capabilities. There are quite a few project-based courses on lynda.com that can help you get started, including creating navigation menus, tool tips, and even an interactive photo gallery.

Tags: , , , , , ,

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.