New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Friday, May 02, 2014

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.

figure_1_jquery

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.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

All articles

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

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.