We do our best to provide you with a helpful resource to get your feet off the ground in the web development field.

With tutorials built for beginners, you shouldn't have a hard time understanding what to do next, regardless of your skill level.

And with our wide range of tutorials (including PHP, CSS, jQuery, and Ruby On Rails, for the time being), we're confident that you will be able to find what you're looking for.

If you would like to contact us (be it to ask questions, suggest new things for the site, or what have you), just send us an email at info@imawebdev.com, or tweet us at twitter.com/imawebdev.

In our "Getting Started" post we talked a bit about FTP clients, one of the FTP clients we talked about was Forklift.

Forklift is an FTP client for Mac. When I first saw Forklift I was a little sceptical about actually paying for an FTP client because of the quality of the free ones available. But they had an offer a while back and were selling licences for $10 or so, so I decided to make the plunge and buy it.

I was amazed by Forklift. All the other FTP clients I have used have had ugly hard to use interfaces, Forklift was simple and took just a few minutes to get everything up running.

Anyway.. After I wrote the post I emailed the developer (BinaryNights) asking if they would consider giving me one free licence to give to you, our awesome readers. BinaryNights responded the very next day offering us not one but two.

To be in with a chance of winning one of the two licences all you need to do is follow us on Twitter and tweet a link (http://wixyy.com/104a) to the contest and add the #imawebdev hash tag. Leave a comment with a link to the Tweet just incase we miss it :)

If you're just getting started out in web development then chances are that you're not going to know exactly what you need. I'm going to tell you the different applications I use as a PHP developer. Although I'm doing this based on my PHP experience the setup will be similar for other languages such as Ruby on Rails.

The first thing I install is XAMPP. It's available for Mac, PC and Linux. It's a great little application that installs everything you need, Apache, PHP, MySQL, phpMyAdmin and all that other stuff that you don't need to know about. Using something like XAMPP means you can get into coding right away without having to install lots of different packages. There are similar packages such as WAMP and MAMP, I have only use WAMP briefly on Windows but quickly went back to XAMPP.

For coding I use Coda, an excellent app from Mac software developers Panic. I used to use Dreamweaver which as a text editor was great but the bloat that came with it meant waiting minutes on the app loading just to make a quick edit to a site. Coda has built in FTP that works more like OSX's Finder as well as Terminal built it. It offers you an easy way to manage your different sites with different FTP and SSH connections. The built in browser in Coda makes debugging your CSS a breeze as you're not having to switch applications every time you make a tiny change.

For Windows users the best thing I've found to code in for me personally is Notepad++. Notepad++ is a free notepad, pretty basic and barebones but it does the job. You can download extra plugins from the site to add more functionality to it such as FTP and SVN.

Safari. My browser of choice. I know Firefox has the excellent developer plugins but it doesn't match Safari's sleek UI or speed. I use Firefox on occasion for things like the Web Developers Toolbar, Firebug and Colorzilla. Those plugins help speed up the development process significantly.

For FTP I usually use Coda's built-in FTP functionality as I find it's usually capable of doing what I want it to. But when I want a bit more control I use Forklift. Forklift is another Mac only app mimicking Finder's interface makes it really easy to get used to. It has the functionality of tabbed browsing which makes it really easy when uploading files from multiple directories or downloading. For Windows users I've found Filezilla to be the best though if you're not after a dedicated FTP client then there's a great little plugin for Firefox called FireFTP which I found to work pretty well.

Those are the main applications I use to build sites on a daily basis. What applications do you use to build sites? What would you recommend to beginners?

We thought it would be a good idea to have a series of interviews with some web developers. We will be publishing a new interview every Monday. Kicking things off is Abraham Vegh, a PHP developer.

Leave a comment if you have any questions for Abraham or if if. you would like to make some suggestions for future interviews!

1. First of all introduce yourself to our readers. Who are you and what is it that you do?

I'm Abraham Vegh. I was introduced to computers when DVD was just emerging, HTML just a few years after that, and since then I've been exploring all of the different aspects of client-side and server-side web design and development. I'm currently a student by day and developer the rest of the time. I've been working on computers in a professional capacity (read: getting paid) for nearly three years, and in an unofficial capacity for many more than that.

2. How did you get into the web development industry and how long did it take you to get to where you are today?

When I first started using really computers, I used an IBM Aptiva desktop which replaced my family's old no-name Windows 3.1 desktop. The IBM (as it came to be fondly called) shipped with some cool applications like Microsoft FrontPage. Together with an AOL dial-up connection, this was my first introduction to the web. For years after that, I played around with making "cool" websites, complete with frames for navigation, and all of those wonderful things everyone used back in 2002. Then, a few years ago I was laid up for a couple months with a bad leg fracture, and I was asked by someone that I knew if I would be interested in changing some of the content on his website. At that point I had never used any templating systems or CSS before. The website was a very rudimentary table-based layout without some CSS thrown in, but it used PHP includes to do a basic form of templating. That was the catalyst that got me looking at PHP, and as they say, the rest is history.

3. What server-side language do you work with most and why?

As my first language, PHP is my favourite, although I have experimented with Perl, Python, and a few others. It was the language that really introduced me to the path of creating, versus imagining. I have sketches and drafts from years ago of applications I wanted to create, but I simply didn't know how. PHP was simple for me to understand, and I rapidly progressed from functional concepts to object-oriented programming. This inspired me to pursue learning C and some other desktop languages, and I'm even beginning to learn Objective-C to try my hand at creating an iPhone application or two.

4. Are there any languages you would like to learn or wish you had learned sooner?

I am very happy with my knowledge of programming languages. I don't yet have any compelling reasons to really pursue learning other languages in-depth, but perhaps in the future I will learn something new just for fun, or because my work requires it.

5. Is there something you would do different if you were just starting out today?

I do wish I had come across CSS before tables, but I'm self-taught in everything that I know, so I could only do what the best of us do: look at someone's work, copy it, and then learn how to do it yourself. As I'm sure many of my fellow coders would, I'd love to be able to go back in time and explain to myself some core concepts which took me some time to master, but that's all part of the learning process, and nobody should try to skip that.

6. Do you enjoy what you do? What is it you like about web development?

Absolutely! I was recently asked what I would do if I won the lottery today and never had to work a day in my life again, and I immediately replied that I would continue what I do now: Have fun while experimenting and developing on the web. I absolutely love that with the web, everything is nearly instant. If you want to do something, all you need to do is write it and publish it. Boom, you've accomplished something.

7. What tools do you use on a daily basis and couldn't live without?

As a recent Mac convert, my MacBook Pro is my most valuable tool. On my laptop itself, TextMate is my most frequently used application for anything text-related, and Firefox is my browser of choice. I despise IDEs for the most part (my favorite Windows program is Notepad). Lately I've been finding Cultured Codes' Things to be an indispensable tool in managing my workflow. I publish a frequently updated list of software and hardware tools I use; you can find it on my blog.

8. Do you have any advice for our readers just starting out in the industry?

The best advice I can offer is to be yourself. Don't try to portray yourself as something you aren't, and don't try to bite off more than you can chew. Take everything one step at a time, and everything will fall into place. Strive for knowledge, as it is your greatest ally. Find someone who you can look up to and admire, strive to be like them, and you will become like them.

/waxing philosophical ;)

9. Finally, where can we see your work and get in touch?

You should follow me on Twitter @abrahamvegh. My open source projects are all hosted on GitHub, and everything else is on or linked from my website, AbrahamVegh.com. You can contact me using the contact form on my blog, email to "imawebdev at abrahamvegh dot com," or just give me a shout on Twitter. Thank you very much for this opportunity, and I hope someone gains something from my experiences.

Today we're going to have a look at a few popular font replacement methods. sIFR, Cufon and the new, still in beta TypeKit. All three of these services have their pros and cons, with Cufon you can't select text, sIFR relies on Flash and TypeKit... I don't know, haven't played with it yet.

We'll start with sIFR, I haven't used sIFR. sIFR stands for Scalable Inman Flash Replacement. sIFR is used to replace small amounts of text such as a heading, it's not meant to replace the full body content.

sIFR looks like the most complicated method from the three which is why I have avoided it until now.

First you need to download the sIFR files, when you do that unzip and open the folder and open up the sifr.fla file. I done this with Flash CS4 and it didn't work, I think it may be the same with CS3, so if you're having this problem try this download instead, the file you need top open is sifr-cs3-and-up.fla, not sifr.fla. It worked for me.

After you open sifr.fla double click the white area and from the properties panel choose a font. I chose the font "Aller Display" which is what imawebdev uses in the logo, nav and blog post titles.

When you change the font you need to export it as a swf. Do this by going to File>Export and choose Flash Movie, name it as [fontname].swf and save it in your sites root directory.

When you do that you need to grab the sifr.js file and sIFR-screen.css and bring them into your sites directory. I made a CSS and scripts folder to keep everything together.

<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css"/>
<script src="scripts/sifr.js" type="text/javascript"></script>

Make sure to change the root to the files if yours are different from mine. Now you have everything you need to start.

<h1>This is a heading 1 tag.</h1>

Now you need to call sIFR:

<script type="text/javascript">
if(typeof sIFR == "function"){
    sIFR.replaceElement("h1", named({sFlashSrc: "allerdisplay.swf", sColor: "#000"}));
};
</script>

The important part here is "sIFR.replaceElement" this is where the magic stuff happens and makes our fonts look pretty. The first parameter is the selector, this can be the html element such as h1, h2 etc or a class (.className) or ID (#idName) Then we have the path to our font swf. Mine is in the same directory as the html page so make sure if you have your somewhere else you type the path correctly. The last parameter is the colour which is pretty self explanatory. So now you have a page using sIFR for font replacement, not as hard as it looks, is it?

sIFR in Safari

Next we'll try Cufon. I thought it took a lot less work with Cufon which is why I've never used it, but it's bout the same as sIFR only there's no Flash involved.

The only big disadvantages I've found with Cufon is that it waits until your page is loaded before it replaces the text so you see a plain font first and the second is that you cannot select the text properly. Despite those problems it is very easy to set up. All you have to do is download Cufon from the site, upload your font, get the generated JavaScript then add the JavaScript in the html page to tell it what to replace, quite simple.

First thing we'll do is download Cufon from the Cufon site. I saved mine as "cufon.js" in the scripts folder in my site.

Now you need to go find the font you want and copy it to the desktop. Once you do that you goto the Cufon generate page. Here you upload your font, select a few options and take the file it gives you. I leave everything the way it is as that's usually enough for what I need. You can choose to upload the bold and italic versions as well but I usually leave this as I only use it for headings so only need the one version.

You can choose to limit the usage to the one domain, this is sometimes required if you're using a commercial font. Once you click "Lets do this" it should automatically download the .js file.

That's the hard part done now. Call both files in or if you want you could save on http requests and put the code from the font file at the bottom of cufon.js. I will leave it how it is for this tutorial.

<script src="scripts/cufon.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/allerdisplay.font.js" type="text/javascript" charset="utf-8"></script>

It's very important to make sure that you call cufon.js before the font JavaScript.

Note: I was generating my font JavaScript using Google Chrome on Mac and it was giving me some problems, I used Safari to generate it and it worked fine. The font replacement still works fine in Chrome though.

Next we need to tell Cufon what we want to replace. The following code will do just that:

<script type="text/javascript">
	Cufon.replace('h1');
</script>

There are several other configuration options, you can see all of these over at the Cufon wiki.

Cufon in Safari

So now we've had a go with sIFR and Cufon we'll not have a go with TypeKit. TypeKit works slightly differently from sIFR and Cufon, you must se the fonts they provide, they do however have a wide range for you to choose from with a trial account and more as you go through the different payment options.

TypeKit is probably the easiest of the three to set up as the TypeKit site does most of the work for you. This is the first time I've used TypeKit and after watching the screencast by Jeffrey Way from nettuts+ and getting an idea of what's involved, I'd say it took less than two minutes to get it working.

When you login to TypeKit you'll be asked to create a new kit, enter the name of the site and the URL. I used "localhost" for the URL since I'm testing everything locally, you can change the URL later on if you wish.

On the next screen you will be presented with the HTML needed, put this in the <head> section of your page. Now you can go choose a font, look through the list and when you find one you like click add, I chose Good Dog as it was the first and it would be quite noticeable when I applied it to my page.

No all is left to do is tell TypeKit what selectors to use to apply the font to. I'm just going to apply it to all <h1>'s, do this simply by entering "h1" in the Selectors box and click add. I also got rid of the class they had in there for me as I wouldn't be using it.

Clicking on the "Advanced..." link gives you some other ways to use TypeKit using CSS giving you full control over it but what they offer is enough for me. Don't forget to click publish or else you won't see any of your settings applied.

And this is how TypeKit looks in Safari.

So that's three different methods of using cool fonts on your website. I'm really loving TypeKit at the minute, so much easier to set up than sIFR and Cufon.

Click the links to see each of the three services in action. sIFR, Cufon and TypeKit.

The awesome guys at TypeKit have given me an extra 50 invites to share with you guys. @imawebdev on Twitter and we'll send you one!

We continue our series of interviews this week with Noah Hendrix,a Computer Scienence student that writes the occassional piece for nettuts.

1. First of all introduce yourself to our readers. Who are you and what is it that you do?

My name is Noah Hendrix, and I am a Computer Science student at the University of Kansas currently studying C++. While not studying I can be found working at the University computer center where I am a part of the Web Services team. We work on websites for various departments around the University. In my free time I like to take on freelance web development work. Also I have been known to write a few tutorials for Nettuts.com (http://net.tutsplus.com/author/noahhendrix).

2. How did you get into the web development industry and how long did it take you to get to where you are today.

I first got involved in the community when I got a computer with Microsoft Frontpage. I enjoyed designing a personal website and uploading it to Geocities, RIP. It has taken me close to 6 years to get where I am now and it has required countless hours of research and programming. The way I learned was to find a feature of a website I liked and try to recreate it myself.

3. What server-side language do you work with most and why?

In my work for the University we primarily work in PHP. There has recently been a push to use the Symfony framework. We also do quite a bit of work with Wordpress. In my personal projects I stick to Ruby on Rails for any applications I am working on. I enjoy writing code in Ruby on Rails because it allows me to quickly go from nothing to a functioning application with very rapid iterations. I particulary enjoy the community that exists around Ruby on Rails as well, no other framework is quite as mature or active in my opinion.

4. Are there any languages you would like to learn or wish you had learnt sooner?

With the blossoming ecosystem that is the Apple App store I would really like to get into Objective-C and cocoa programming. I have dabbed a little in the language, but have yet to find time to really delve into the language.

5. Is there something you would do different if you were just starting out today?

I am not sure if there is something I would do differently, but I do wish there were more video tutorials. Websites like Peepcode and Railscasts are invaluable resources for me when I want to learn a new technique or delve into something with a great amount of detail. For instance I am watching the latest series from Peepcode to familiarize myself with iPhone programming.

6. Do you enjoy what you do? What is it you like about web development.

Web development is a great pleasure for me because I enjoy creating something that will help someone else increase their workflow and become more productive. I see facets of all work environments moving towards digital record keeping, and I enjoy being a part of this transition.

7. What tools do you use on a daily basis and couldn't live without?

I am on a Mac so my text editor of choice for writing code is Textmate. It is highly tuned for Rails development and is ridiculously fast. When working with clients I use to quickly create invoices. I recently found the application ExpanDrive which makes working with remote servers amazing simple, it mounts the server like a hard drive on the computer. There is lots of other software I use such as Photoshop and Safari, but they tend to be old hat so not really a lot of explanations required there.

8. Do you have any advice for our readers just starting out in the industry?

My advice is to get out there and become actively involved in the community. Create a twitter account, in fact create an account for any sort of new service. See how other companies are innovating and do your best to mimic them until you get your own unique style. I am constantly spending 5 or 10 minutes just playing with a web application to see how the user interface works or how certain problems are solved. Every URL you visit should be like a piece of study it, critique it, and try to improve upon it.

9. Finally, where can we see your work and get in touch?

The best way to see what I am up to is follow me on Twitter or Facebook. You can also contact me through my personal website noahhendrix.com where I also have a list of some projects I have been involved with.

Last week we had a contest to give away two licences for the awesome FTP clicent Forklift by BinaryNights. The winners of the two Forklift FTP licences are Tim Basham and Craig Paterson. Congrats to them :)

We've got another give away for you today. One lucky winner will receive a pro membership to TinyGrab the screen sharing application that runs on both Mac and PC.

"TinyGrab is a simple yet extremely powerful utility for Mac OS X and Windows. Harnessing the power of pre-existing and new OS screenshot taking capabilities, TinyGrab instantly uploads and allows you to share with a small URL— all in under thirty-seconds."

To be in with a chance of winning tweet a link to this contest using the #imawebdev hash tag and leave a comment with a link to the tweet.

This weeks interview is with Stuart Gibson, a web developer from Northern Ireland. Stuart\'s the brains behind the popular Twitter service, TwitLonger

1. First of all introduce yourself to our readers. Who are you and what is it that you do?

My name is Stuart Gibson, I'm a freelance web developer working mostly in PHP. I'm the developer of http://www.twitlonger.com which lets you post longer messages to your Twitter account and is integrated in several popular Twitter clients including Twitter and Twittelator.

2. How did you get into the web development industry and how long did it take you to get to where you are today.

I made my first web site back in 1997 when I went to uni, originally to study psychology. One year in and I made the switch to Applied Computing and spent my time when I was supposed to be doing uni work learning PHP, standards compliant HTML & CSS and studying usability & accessibility. I left university just as the Internet bubble burst and spent far too many years working in non-web dev jobs. About two years ago I decided it was time to get back to doing what I love and, through the power of Twitter, made some great contacts that allowed me to do this full time.

3. What server-side language do you work with most and why?

PHP. I learnt to code in C/C++ originally and, syntactically, PHP is pretty close. Its open source nature means there are loads of great frameworks like Code Igniter and CakePHP and the community is second to none. Despite some rather glaring holes in the language that make it easy to get into trouble or write bad code, the functionality built into the language makes rapid development easy and, with a bit of experience, writing good code isn't difficult.

4. Are there any languages you would like to learn or wish you had learnt sooner?

I keep meaning to sit down with Ruby/Rails as there are quite a few people locally that use and love it so it would be a great tool to add to the arsenal. I'd love to have the time to get my Cocoa skills up to scratch. I love writing server backends to integrate with iPhone apps, so being able to do the device coding too would be handy. Plus, everyone knows that iPhone developers are all multi-millionaires.

5. Is there something you would do different if you were just starting out today?

Be more confident and pushy. I'm naturally pretty shy, but work doesn't come and find you, you need to get out there, make contacts and actively look for it. I'd probably have started using frameworks a lot earlier too instead of being fanatical about writing every line of code myself.

6. Do you enjoy what you do? What is it you like about web development.

I've always been a bit of a computer nerd. I got my first computer (an Amstrad CPC464) for my sixth birthday, so being able to do what I love is wonderful. Working freelance is also great. It gives you the freedom to work when you want and fit the job around the family, not the other way round. For a while I was getting up at 5am and getting client work done by lunchtime, giving me the afternoon to work on personal projects. I love web dev because it's always changing, there's new things to learn and it gives you great freedom to experiment.

7. What tools do you use on a daily basis and couldn't live without?

Macs all the way. I have a Mac Mini hooked up to a 30" screen I use as my main development box and a 13" MacBook Pro for out and about and sofa work. I do all my coding in Coda from Panic Software http://www.panic.com/ (as well as using Transmit for FTP duties). It's a really beautiful text editor and makes handling sites so easy. Although it has Subversion support built in, I also use Versions (http://www.versionsapp.com/) for big SVN jobs (yeah, I'm not much one for the terminal I'm afraid). I recently switched from Opera to Safari as my day to day browser, but always have a copy of Firefox with Firebug about for debugging purposes.

Oh, and Spotify to keep me going through the day :)

8. Do you have any advice for our readers just starting out in the industry?

Get out there and meet people. There are likely a ton of events locally - find out if there's an Open Coffee group, they are great to meet those already in the industry. If you want a job it helps if those who are likely to offer you one know who you are.

Make something of your own. The biggest complaint I hear from potential employers is of people coming in with a portfolio comprised of nothing but university assignments. If you're not passionate enough about web development to want to do it whether you're getting paid or not, people will wonder why you're applying to do it as a job.

If you're a developer, get friendly with a good designer, don't think you can muddle through. Know where your skills are and work on those.

9. Finally, where can we see your work and get in touch?

All my details and everywhere I can be found are available at http://www.imetstuart.com Mostly I can be found on Twitter as @stuartgibson

This tutorial will show you step-by-step how to make a PHP contact form that allows the user to choose which department they would like to send the email to. This is useful when you have multiple departments such as support, sales etc.

This contact form has no validation or spam control so I highly recommend you don't put it on a live server. A second part covering validation will be coming within the next day or two, follow us on twitter to find out when it's released.

First we'll start with our HTML. Create a file named index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>PHP Contact form</title>
</head>
<body>
<div id="container">
	<form action="send.php" method="post">
		<fieldset>
			<label for="recipient">Select department: </label>
			<select name="recipient" id="department">
				<option value="sales@some-company.com">Sales</option>
				<option value="customer_service@some-company.com">Customer Service</option>
				<option value="support@some-company.com">Support</option>
				<option value="marketing@some-company.com">Marketing</option>
			</select>
			<label for="name">Name: </label>
			<input type="text" name="name" id="name"/>
			<label for="email">Email Address: </label>
			<input type="text" name="email" id="email"/>
			<label for="subject">Subject: </label>
			<input type="text" name="subject" id="subject"/>
			<label for="message">Message: </label>
			<textarea name="message" id="message" rows="10" cols="30"></textarea>
			<input type="submit" name="submit" value="Send Message!"/><input type="reset" value="Reset Form!"/>
		</fieldset>
	</form>
</div><!--close container-->
</body>
</html>

As you can see we're referencing an external stylesheet (style.css), the CSS will just make the form a bit more user friendly. Then we have our form. We have a label for each field in the form so the user knows what they are being asked for. The select is used to allow the user to select the department they wish to contact. The form then asks for a name, email address, message subject and the message itself followed by a submit button and reset button in case the user needs to start over again.

When the submit button is clicked the form contents will be sent to the file send.php which will send the message to the department they specified. Next we'll make our style.css file. Create a new file names style.css in the same directory as your index.html. In style.css put the following:

label {
	display:block;
}
textarea {
	display:block;
}

This just makes sure that all labels and textareas are on a line of their own and not shared with any other form elements. Now we'll start work on send.php. Again make a new file in the same directory as index.html and call it send.php. Once you make send.php, put the following PHP in there:

<?php
if(isset($_POST['submit'])){
	$recipient=$_POST['recipient'];
	$name=$_POST['name'];
	$email=$_POST['email'];
	$subject=$_POST['subject'];
	$message=$_POST['message'];
	$headers = "From: $email" . "\r\n" . "Reply-To: $email" . "\r\n";
		if(mail($recipient,$subject,$message,$headers)){
			echo "Thank you $name, we'll be in touch shortly.";
		}else{
			echo "Sorry, there was a problem sending your message";
		}
}else{
	header("location:index.html");
}
?>

The first thing the PHP does is check to see if the submit button has been clicked, it takes the 'submit' value from the name we gave it earlier. If the submit button hasn't been presses and the user has went to send.php from their browser then they will be redirected back to index.html. If they have clicked the button the first thing that happens is that we assign variables to the parameters passed by the form, as you can see we're using $_POST as opposed to $_GET, this is because we set the forms method as post.

We assign the form values to variables to make it easier to work with. We assign the variables by typing the variable name e.g. $name then we tell it what it's equal to e.g. $name=$_POST['name'], we get the $_POST['name'] from the name attribute on the text input. So if the inputs name was 'email' our $_POST would be $_POST['email']. The variable $headers contains the from and reply to email address, we'll use the email address the user gave us for both.

Next we send the email and if it has been sent successfully it thanks the user using their name and if there was a problem it notifies the user. If you only want the user to send their message to one email address take out the select element in index.html and replace $recipient=$_POST['recipient']; with $recipient='yourname@yourdomain.com';

So that's how to make a pretty simple PHP contact form. Next time we'll add some PHP server-side validation and a some of jQuery for client-side.

If you have any problems, questions or suggestions leave a comment below and we'll get back to you. Also don't forget we're giving away 5 TypeKit invites between now and Friday, to be in for a chance of winning all you need to do is leave a comment.