I was just working on a project where a client misused FTP – or didn’t quite understand the role it plays in the hierarchy of a website, building a website, and the maintenance of ones web properties. So I thought I’d write a post today in the iNoobs series in relation to FTP. Sure, you could just wikipedia FTP, but you come here for the amazing prose and rapier wit that only I can offer. So read closely to learn what FTP is.

[infobox margin_bottom="0" margin_top="0" border_radius="all" color="white" title=""] iNoobs is a series of articles for those new to web design and web development, created by Zach Katkin, founder of Promana.net, a brilliant resource for small business software news. [/infobox]

As a potential web developer, you’ll be using FTP almost constantly outside of a program for editing code you’ll probably be using FTP more than any other technology (particularly if you’re building “static html” sites).

What is FTP?

FTP, or FILE TRANSFER PROTOCOL, is the name (and technology) involved in moving files from a client to a server, from your computer to a server, or from a server to your computer.

What is an FTP “Client”?

The tool you use to access this “FTP – File Transfer Protocol” is called your FTP Client (or FTP program/software/etc). This tool allows you to connect to a server in order to add files to the server (upload) or grab files from the server (download).

For the purposes of this explanation I will forgo any of the technical information regarding how passwords are handled, port numbers, etc. as – for the most part – that is completely unnecessary to know for a majority of your needs (and time) as a web developer. However, for a more complete explanation of the technical breakdown of FTP (as well as the technology’s history) please check out Wikipedia’s article on FTP.

Using FTP as a Web Developer

I remember when I first decided to crack open my crusty leather wallet, unsheath my debit card and pony up the dough for my first shared hosting account with LiquidWeb. After a couple of confirmation emails it was time to login to my server via CPANEL (control panel software for administering your server). I already knew how to upload/download files using the included software as I had done it at work and school – but I knew there had to be a better way! That’s when I learned about FTP.

Little story aside – you will be using FTP all the time as a web designer. You’ll either be uploading your HTML/CSS/Images to the server for testing, or to publish your efforts live to the world. FTP is also vital in the installation of CMS software like wordpress – as users we receive a file (or a bunch of files) that we must upload to the server in order to begin the installation process. Regardless of exactly how you use FTP the process is almost always the same. You are provided an address, a username, and a password – in order to connect to the server and manipulate your servers’ files as necessary.

  • ADDRESS: ftp.example.com
  • USERNAME: example.com
  • PASSWORD: example

Once connected you’ll be presented with the files, folders, etc. that your particular user account has the permission to access. Much like Windows, your account is assigned the ability to do things, access folders, etc. By default most shared server environments (about 99% of you will probably fall under this scenario) will provide you a default ftp account, address, username/password as soon as you purchase their service. This account will allow you to access the files on your server in their entirety.

An important thing to note about the files folders on a server (and this is different depending on each server) is that certain folders may be designated as “public” or visible via the web – and are the resources on the server that, when viewing your site through a web browser, is the website that appears.

Wow – that was a confusing sentence.

Let me explain a slightly different way:

You purchase some new server space and have told the service you’ll be hosting “example.com”. In your confirmation email you receive a username/password for FTP (we’ll use the above example) – you connect to the server using an FTP client and all of a sudden in the window you see one folder:

  • Example.com

You click on that folder and are presented with 3 new folders:

  • Web
  • Logs
  • Lib

You click on “web” and are presented with two more files:

  • Content
  • CGI Bin

You click on “content” and now you finally see a few files -

  • Index.html
  • Style.css
  • Image.jpg
ALRIGHT! Now we’re seeing some stuff that looks familiar. Here’s a quick breakdown of what’s going on you connected to the server and the hierarchy is much like windows in that you drill down folder by folder until you reach the destination you want. In this case the folder we want to get to as web developers in order to publish our site (or edit our site) live on the web is: Example.com > Web > Content > —— This folder is where, should you type your site live in a web browser will see your newly published website.
All you have to do is download, and then edit, or upload your own files and BAM! You can now see your new site at Example.com.