As a freelancer you will sometimes spend more time trying to manage the project then actually designing or developing. Most importantly you want to make sure the client is happy and you are compensated fair. Here are some free tools that can help you as a freelancer stay organized, meet client expectations and stay profitable.

CreativePro Office: project management system

Don’t get me wrong, BaseCamp is the leader in my opinion as far as PMS’s are concerned, however a little spendy for the starving artist. UpStart Productions released this free PMS, simply signup and use it. It doesnt have the messaging like some of the others do but it is great way to manage projects, tasks, contacts, notes and even has invoicing built right in. This is a great way to track your hours realtime and really see how much time a project takes.

http://www.creativeprooffice.com/

MyHours: online time tracking

This is a great online services to help you as a freelancer to manage your time and track all of your projects in one place. Adding projects and tasks is very simple and makes invoicing a smooth process. You can export reports many different ways helping you to avoid invoice disputes. The reports also help to see where you are spending most of your time using very readable graphs.

http://myhours.com/

In this tutorial I want to show you a unique way to create a row of buckets to put your content using minimal CSS. There are several ways to do this with div’s or crappy tables. This technique is similar to the way other developers have been doing navigation in CSS. Whether you are a beginner or an expert this tutorial will be helpful, however if you want to skip down to the bottom and simply copy and paste the CSS, be my guest.

View Demo

The HTML
Using an unordered list with three list items to build your three columns. Each list item is one column, you can have more or less with this same css you would just need to add or subtract a list item. Copy and paste the below code in your body of your HTML page. NOTE: This code is custom to this example, fiddle around with the HTML to add images or links to the same container.

<ul class="buckets">
	<li>
        <h1>Column One</h1>
        <p>Your content goes here...</p>
    </li>
	<li>
        <h1>Column Two</h1>
        <p>Your content goes here...</p>
	</li>
	<li class="last">
        <h1>Column Three</h1>
        <p>Your content goes here...</p>
    </li>
</ul>

The CSS
You can either use an external or internal stylesheet, but you really should use external when you can. You can modify the code provided as you see fit. Pay close attention to the widths, margins, and paddings. These attributes combined will make up the overall width. Copy and paste the code below into your page and there you have it.

.buckets {
   list-style-type: none;
   width:100%;
}
.buckets li {
   float: left;
   width: 250px;
   position: relative;
   margin: 0 10px 0 0;
   padding:3px;
   font:13px Arial;
   line-height:18px;
   border:1px solid #dddddd;
}
.buckets li h1{
   margin:0;
   padding:10px;
   width:230px;
   background-color:#000000;
   font:15px Arial;
   color:#FFFFFF;
}
.buckets p {
   margin:0;
   padding:10px;
}