Website Design: JQuery from Scratch p1

Posted by on Wednesday, January 6th, 2010 at 12:29 pm.

Welcome to the first of this six part series on how to start using the ever popular JQuery framework to create heightened user experience (UX) within your website design.

In this first part we will be focusing simply on looking in to how you can best download and import the framework into your document, ready for you to start using.

Downloading the JQuery Library

Firstly you will need to download the framework you can get this from the JQuery site www.jquery.com

When on the site you will see that there are two options available when downloading the library, either production or development. It is recommended that for basic use of the framework within your website design, you should select and download the production version.

Upon clicking the link, you will be redirected to Google where you can download the latest version of the framework to your desktop.

Importing the framework into your Website Design

Once you have downloaded the library, you can store it within your website job folder, and possibly within a script or js folder to keep your files organised.
Now you can import the file into your web page just as you would with any other JavaScript file. Here is the code which should be placed into the head of your document.

With this code now added, and the file uploaded to the correct directory, we can start to look toward creating basic animations from your website design.
Now the main of this series is not to you ready made snippets of JQuery and then fitting them into your design, but to start with your design and add interactivity from scratch using the framework

A look forward to next week…

In next weeks blog post, we will be starting to look at how you can write basic functions for implement simple animations within your website design.
I will be starting with a sample design and looking at how we can animated the different elements of the website design.