Category Archives: tutorials

19 Unique jQuery Tutorials for Web Developers

jQuery is the premier library for coding JavaScript page effects. Most popular content management packages run jQuery for both admin and frontend design effects. As a web developer jQuery can be a fun library to spend some time learning and offers tremendous design potential.

It seems there are so many references and guides out there it’s easy to get lost. Below we’ve compiled 19 unique jQuery tutorials to help develop your skills as a frontend developer.

Form validation from scratch

jQuery Form Validation

Develop a simple and powerful jQuery script for common HTML form validation.

Incredible jQuery Login Form

jQuery Login Form

Learn how to code a structural jQuery login form with sliding animation. Hide your form out of a visitors view until clicked.

Creating a Digg Style Signup Form

Digg-style signup form

Digg has been an innovator for web apps for years. Learn how to develop a dynamic registration form similar to their signup page.

Color jQuery & CSS3 Sliders

jQuery CSS3 Sliders

Here you are taught about using jQuery and the new transformation features brought by CSS3 to create a dynamic slider effect.

Working with Events – Part 1

jQuery Events part 1

Part 1 of a detailed series teaching about events in jQuery. Here you’ll learn the bare-bones of the jQuery library and how to use events to construct your own functions.

Ajax-based Form Submission

Ajax Submission Form

Here you’ll learn how to submit a web form and display the submission result with some fancy fadeOut or slideUp effects. You’ll utilize both jQuery effects and Ajax for form submission.

jQuery Fade-in Spoiler

Fade-in Spoiler Tags

Practice designing a spoiler system with a fade-in effect using jQuery. This can be helpful in hiding tips or potential plot spoilers in website comments.

Dynamic Page Content Replacement

jQuery Content Replacement

Design a unique content replacement script with a fade effect. You can run small tabs or links on your page to switch betweet content settings.

Simplify Ajax development with jQuery

simple Ajax development

Here you’ll learn about the jQuery syntax, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.

Simple Toggle with CSS & jQuery

simple jQuery toggle

jQuery can be difficult when first learning about open and close states. This tutorial guides you through the basics of mastering the jQuery toggle states.

Create a unique Gallery with z-index

unique jQuery gallery design

jQuery development can be combined with the CSS property z-index to create a unique photo gallery effect.

Design Skype-style buttons with jQuery

Skype-style buttons using jQuery

As a very powerful JS library jQuery can do almost anything these days. Here you’ll create some unique Skype buttons with only some basic jQuery and CSS.

Apple-style Slideshow Gallery

Apple-style Slideshow

Using basic HTML/CSS and jQuery development we’ll create a simple Apple gallery slideshow effect. Beautiful to fit into any webpage.

From PHP & XML into jQuery

PHP/XML into jQuery

Getting back into PHP backend programming here you’ll learn how to connect data retrieved through the backend and place it into jQuery and Ajax effects.

Manipulating the DOM(code snippits)

Manipulating the DOM through jQuery

Working with jQuery to manipulate the Document Object Model is a powerful skill to understand. Here there’s 10 fantastic code snippits in working with jQuery and the DOM.

Semantic Blockquotes with jQuery

Semantic Blockquotes with jQuery

In this tutorial we identify text needed as a quote and using the DOM insert it into any area content. This helps avoid duplicate content and works well with mobile browsers.

jQuery Basics with Google Maps

Google maps Basics

In this tutorial you’re guided through how to get started using jQuery inside the Google Maps environment. You can create amazing mashups and creative designs with a simple connecting to the Google Maps API.

Create a Live Updating List

Live update list with jQuery

Creating a dynamic list in jQuery is a simple effect which goes a long way for user interface. Here you’ll learn the basics of creating a dynamic jQuery powered list.

Flickr CSS Menu Design

Flickr Horizontal Menu Design

Here you’ll learn a simple step-by-step way to implement an Flickr Horizontal Menu Demo in jQuery and CSS.

Web Button Making Tutorial (2)

Web Button Making Tutorial

How to Customize a Website Template – Video

I’m a strong supporter of using web site templates to create web sites. In fact, I can’t remember the last time I actually designed my own sites. It just takes way too much time. With so many website template repositories on the net today, there are more than enough choices to pick from.

Although I’m not a professional web designer, I do have above average web design skills. So, buying a template and customizing it for my needs is quite an easy task. But what if you’re a complete beginner? With no technical experience whatsoever. Is it as easy?

Well, it depends.

On what? On what type of template you have.

Types of Website Templates

In the olden days, there were only HTML templates at our disposal. Templates that we can customize with software such as Frontpage, Dreamweaver, Golive etc. Today, however, you can find all kinds of templates for many popular CMS (content management systems).

Don’t let the term CMS frighten you. If you’ve been online for awhile, you’ve probably heard of WordPress, Joomla, vBulletin or OsCommerce. These are all a form of CMS. What they do, is allow you to manage your content without having to worry about the design of your site. To learn more on CMS, check out my post Ditch your HTML Editor for a CMS.

If you want to create a site with more than 5 webpages and plan to update your content regularly, then you should seriously consider using a CMS. With a CMS all you need to do to change the design of your site is to purchase a template for that CMS, install it and presto you’ve got a new look. And yes, it IS that easy.

If, however, you are thinking of creating a 5 page brochure type web site with static content then by all means, use the conventional web design software. This tutorial will teach you how to customize a web site template using such a software.

Choosing a Website Template

It all begins with the template. Sounds simple enough? Unfortunately, choosing a template is not as straightforward as it seems. Choosing the wrong template can prove to be a disaster.

Earlier on, I headed over to Template Monster to download their free sample template to use for this tutorial. When I opened up the template, I was appalled at what was staring me in the face.

Here’s a great looking template that was an absolute pain to work with. The navigation consisted of images, the heading text were images. In fact, there were more images then anything else. So, in order to customize this template, I would have to make extended use of a web graphics software. Deleting the wrong image from the template could even break the whole design. There is just no way I can teach newbies how to customize this template without scaring them off.

I realize that one can go crazy looking through all the “to die for” templates out there but choosing the right template can make a lot difference.

What to Look For in A Template

Having said that, what is it that you should look for in a template?

Firstly, find templates that are simple. Forget about Flash animations and drop down menus, especially if this is the first time you’re you’re doing this. Simplicity is THE way to go. And find one that doesn’t make extensive use of images.

Secondly, a template which relies on CSS for its presentation is much better than a template that uses HTML for presentation. You don’t need to know what CSS is for now. All you need to know is that a template that uses CSS (properly) means that there is a separation between content and presentation.

What does this mean?

Put simply, you can add and manage your content easily without the risk of mucking up the design (presentation). This is as close to using a CMS as you can get.

When choosing a CSS based template, it is best that you look for a template that uses simple CSS coding. Nothing advanced, nothing fancy.

How do you tell if a template uses CSS or not. Well, most website template providers will group all their CSS templates together. So, look for a CSS category. If there’s none, go to another template provider. And how do you tell if they use simple CSS? Well, hopefully, they will have a description of the template that tells you so.

After watching the video tutorial, you will quickly appreciate why it is important to get the right template. I decided to use one of Andreas Viklund’s free website templates for this tutorial. I love the simplicity of his designs.

What to Change in A Template

To customize a template for your site, all you really need to change are:

  • The header
    The header would usually contain branding elements for your web site. This could be a logo, a header image or even just your sitename in simple text.
  • The menu items
    Different sites would obviously need different webpages. You will want to add, edit or delete items on the menu list to reflect the webpages you have on your site.
  • The footer
    Normally, all you need to do with the footer is just change the copyright notice.
  • The content
    And of course, the unique content that goes on each page.

Now, let’s take a look at the following video tutorial to see how it’s done. I’ll be using My Free Website Builder for this tutorial because it’s free and it’s the only other web design software I have on my computer other than Dreamweaver.

Just one more thing before you watch the video screencast tutorial. To make this process as easy as possible, it is important that you pick a template that is closest to what you’re after, this includes the layout, the images and the color schemes. Keep this in mind.