As daunting as it may sound for even the most seasoned of web designers, web development is just another beast to tame and it can honestly be quite fun at the same time!

I decided to take this step several years ago. I was faced with a predicament. I could put together all these lovely looking designs but who was I going to get to turn it into a fully fledged website for the whole world to see? I certainly couldn’t afford to pay anyone. I was faced with a challenge, how was I going to learn about heads, body’s, positions, heights, widths, tables, no tables… yes I’m talking about front end web development!

This article will give you my recommended first steps to becoming an designer/developer all rounder. Something that is very attractive to prospective employers or if you freelance, hey, you get to keep the full hourly rate! You can say goodbye to outsourcing!

Slicing PSD’s.

This is your starting motor to building a website. You’ve got your design but at the moment its a raw format you need to cut up your design into several different images. This process is made very easy with the Photoshop slicing tool. There are many resources out there to help you but I recommend you follow this tutorial: From Photoshop to HTML

HTML

HTML is the foundation of every website. Although this markup may look daunting to the untrained eye. Its a simple and user friendly language (if you can call it that). Not only is it easy to get to grips with but there are more resources than you can shake a stick at on the internet to help you along the way.

When I was first learning HTML I found experimenting, as with many things is the best way to learn. HTML can be quite flexible in many browsers meaning that it wont keel over and die if you don’t close a tag here or there.

Here is a selection of recommended resources to get you going:

• W3 Schools HTML Tutorial
• Quackit.com HTML Tutorial

Also here are some interesting articles on the up-and-coming HTML 5. For those of you who don’t know, HTML 5 is going to be the latest release of standard markup by WHATWG:

• HTML 5 from Scratch
• HTML 5 Cheet Sheet

Semantic Markup

You may hear many people ask you, dude, is your markup table-less? Well if you’re going to try and master HTML in this day and age then its probably worth readying up on this!

This is really part and parcel of today’s web, but if you don’t already know then why not take a moment to read up about it: SPAN and DIV Wiki

CSS

Way back in the dot com boom all websites where sliced with html using tables. This made websites very large in size and even more difficult to view and update the source code and single styles such as links were very difficult to update. CSS bought all the different styles into one place which allowed one style to be shared by many pages. Beware though, each different browser can render CSS in a slightly different ways resulting in many hours swearing at a screen and pulling your hair out. Earlier versions of Internet Explorer are the biggest offenders with a campaign to get the last 14% of the browsers market share making the rounds on social networks recently: IE 6 no more

Here are some recommended resources on CSS:

• W3 Schools CSS Tutorials
• Subcide CSS Layout Tutorial

Once you’ve got these core skills under you’re belt, you will be on your way to becoming an all rounder! If your still hungry or maybe already know all these languages, I recommend you try learning something like jQuery and/or PHP.

Here are some great resources:

jQuery:

• Getting Started with jQuery
• jQuery for Designers

PHP:

• PHP Getting Started
• PHP 101

This tutorial will take you through the process of developing a simple jQuery input hint in an unobtrusive manner, allowing the form to function as expected when JavaScript is not enabled.

Step One

Before we start on the plug-in itself, we need some basic HTML defining our form.

<form method="get" action="">
	<input type="text" value="" title="Search..." name="s" id="s" />
	<input type="submit" value="Search" />
</form>

Step Two

The first stage of plug-in creation is setting up the basic plug-in structure. I tend to stick to the custom aliasing method as this will prevent conflicts with other libraries or frameworks and still allow us to make use of the “$” alias.

To achieve this, we execute an anonymous function, passing jQuery through and using “$” as the alias (although this could be any variable name), creating the fn and then enable chaining by looping through and returning each matched element.

(function($) {
	$.fn.inputHint = function() {
		return this.each(function() {
			//...
		});
	};
})(jQuery);

You can read more about plug-in authoring on the jQuery site.

Step Three

This plug-in is going to allow the default value to be defined by either passing it in as a set value or fetching the value from the title attribute of the input.

To achieve the first method we are going to use the extend method, allowing us to globally set and re-define the customisations such as the hint value to use.

Here we take the globally defined values from the $.fn.inputHint.settings object and over-ride them with any values passed in by the callerSettings object. (Although we are using a deep / recursive merge in the example, it’s not totally necessary for this plug-in in it’s current state.)

(function($) {
	$.fn.inputHint = function(callerSettings) {
		var settings = $.extend(true, {}, $.fn.inputHint.settings, callerSettings);
		return this.each(function() {
			//...
		});
	};
	$.fn.inputHint.settings = {
		value: false,
		className: false
	};
})(jQuery);

Step Four

Now that we can define any custom options, let’s move on to actually doing something useful.

We need the ability to set the value of the input to the predefined value if the input is empty and clear the default value when the input receives focus.

Setting the default value if the input is empty:

$(this).blur(function() {
	$(this).val($(this).val() == '' ? settings.value : $(this).val());
});

Clearing the default value  on focus:

$(this).focus(function() {
	$(this).val($(this).val() == settings.value ? '' : $(this).val());
});

If we added these two events to our plug-in directly, it would look as follows:

(function($) {
	$.fn.inputHint = function(callerSettings) {
		var settings = $.extend(true, {}, $.fn.inputHint.settings, callerSettings);
		return this.each(function() {
			$(this).blur(function() {
				$(this).val($(this).val() == '' ? settings.value : $(this).val());
			});
			$(this).focus(function() {
				$(this).val($(this).val() == settings.value ? '' : $(this).val());
			});
		});
	};
	$.fn.inputHint.settings = {
		value: false,
		className: false
	};
})(jQuery);

We should however make use the chaining ability to cut down the amount of code we need to write.

The following introduces a couple of additions to go alongside the chaining, including the triggering of the blur event that will fire when the page loads and set the default value if necessary.

Here we have also included the ability to take the default value from the title attribute instead of the settings array (see variable v).

$.fn.inputHint = function(callerSettings) {
	var settings = $.extend(true, {}, $.fn.inputHint.settings, callerSettings);
	return this.each(function() {
		var n = $(this), v = settings.value || $(this).attr('title');
		n.focus(function() {
			n.val(n.val() == v ? '' : n.val());
		})
		.blur(function() {
			n.val(n.val() == '' ? v : n.val());
		})
		.blur();
	});
};

Using what has been written so far will provide us with a working version, but there are a few additions.

We should unset the default value when the form is submitted, as most back end scripts will be checking against an empty value. This can be achieved by checking the existence of a parent form and unsetting the default value on submission by triggering the focus event.

The second addition is the ability to add and remove a class name to the input,  so we can set a style when the default value is present and a class name is defined (see addClass and removeClass).

Step Five: The Completed Plug-in:

(function($) {
	$.fn.inputHint = function(callerSettings) {
		var settings = $.extend(true, {}, $.fn.inputHint.settings, callerSettings);
		return this.each(function() {
			var n = $(this), v = settings.value || $(this).attr('title'), f = $(this.form);
			n.focus(function() {
				n.val(n.val() == v ? '' : n.val())
					.removeClass(settings.className);
			})
			.blur(function() {
				n.val(n.val() == '' ? v : n.val())
					.addClass(settings.className);
			})
			.blur();
			if (f) {
				f.submit(function(e) {
					n.trigger('focus');
				});
			}
		});
	};
	$.fn.inputHint.settings = {
		value: false,
		className: false
	};
})(jQuery);

To make the whole effect work, add either of the following snippets to your page or script.
The first will attempt to use the title attribute as there are no custom settings.

$(function() {
	$('#s').inputHint();
});

The second specifies a defined hint value and a class to add to the input when the hint is visible, which are passed through in the settings object.

$(function() {
	$('#s').inputHint({
		value: "Search",
		className: 'faded'
	});
});

You should place the plug-in inside a file called jquery.inputHint.js and include this file in your page, this conforms to the jQuery plug-in author guidelines (“Name your file jquery.[insert name of plugin].js”).

Additional Notes

This is just one method of achieving an input hint, an alternative method would be to use the the label tag instead of input and set the hint value based on this, or even place the label tag itself on top of the input.