Jquery is an extension of Javascript that provides a series of powerful functions for website development. Jquery is particularly useful for designing navigation systems and beautiful user experiences through the use of animations and other functions. For example, Jquery is able to move and transform your website structure and content in real time and many of the award-winning web design and development websites utilise jQuery.

If you haven’t been following our series and do not have a good understanding of both HTML and CSS then now would be a good opportunity to take a look at our existing tutorials covering both of these.

To download jQuery, head to the Google repository and download the latest version. You can embed the jQuery library right into your HTML Head tag and once linked, you are ready to utilize jQuery’s powerful functions. You can create a new jQuery file with the extension .js to store your functions and link it to your HTML page. In the next part of the tutorial we will be looking at coding our first jQuery function. But for now, lets set up the necessary links to utilize jQuery in our website.

Once you have download your jQuery files from the Google Repository, create a new folder in your website root directory (where you see your index.html file) and save your jQuery download in there. Then use the following line of code to link your HTML to your jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then go ahead and create a new file in the same folder called ‘js.js’ – this file will store all of your custom jQuery code. Once created, link it to your HTML with the following:

<script src="js/js.js"></script>

Thats it! You’re ready to experience the potential of jQuery. Stay tuned for the next tutorial where we will be continuing our series by designing a navigation menu with animations using jQuery!