HTML 5

• Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 – HTML5 is the future of web development but believe it or not you can start using it today…
• Coding A HTML 5 Layout From Scratch – HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project….
• How to Make an HTML5 iPhone App – You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.
• Have a Field Day with HTML5 Forms – ere we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.
• Designing a blog with html5 – Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages…

Javascript

• Starbox Rating – Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework
• Using CSS and Mootools to simulate Flash horizontal navigation effect – I had a new “conversion” from FLASH to HTML when I discovered the CSS beauty. In particular using Flash I loved this kind of layout/effect: follow mouse sliding content.
• Coda Slider Effect – Create an amazing coda slider using Jquery. The code slider can be used for many things such as image galleries, content sliders, and much more. Go check it out.
• Sliding Top Panel – This tutorial explains how to realize a simple sliding top panel (top/down) using mootools, some line of css code and JavaScript.
• Scrollable – The main design goals of this tool are to provide visual customization, ease of use and programmability. The first version of the library was released on January 3, 2008. Since then, this tool has come a long way and it is now a stable and mature product.

WordPress

• How To: Create a Theme Options Page for Your WordPress Theme – Theme Options pages are growing in popularity among quality WordPress themes. They provide the user with greater customization control over their website without having to know a hint of HTML or CSS.
• WordPress 2.7+ User Link Feed Submit Form and Widget – In this article tripwire magazine provides a mini-tutorial on how to setup a User Link/News Feed solution in WordPress 2.7+. I really think it is a nice feature as it gives a blog dynamic content and it it may actually drive traffic from bloggers looking for sources to get some easy and free traffic for their own site.
• WordPress Multi-Level Drop Down menu using jQuery – As WordPress theme designers, we’re often faced between the choice of going for purely CSS drop-down menu or javascript drop-down menus in our struggle with cross-browser compatibility.
• PSD to WordPress Series Part 1 – I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress.
• Stylizing Threaded/Nested Comments in WordPress 2.7 – One of the features I love in WordPress 2.7 is the ability to have threaded (nested) comments up to 10 levels deep. While viewing comments on this – or any WordPress 2.7-powered – site, you’ll notice a Reply button (assuming nested discussions are enabled). Clicking that will enable you to reply directly to that comment,

Drupal

• Drupal 6 & 7 Theme Guide – This handbook is about customizing the look and feel of a Drupal site. If you are developing a module that outputs presentation data, then please read the module developer’s guide Using the theme layer section.
• PSD to Drupal Theme Conversion – This tutorial will show you how to take an existing design in either Photoshop or Illustrator to XHTML to a working Drupal theme.
• Building a multi-language site – The following steps are for those who want to have a simple site available in different languages. The goal is to have content translated to two or more languages and the visitor to be able to choose any of them.
• Building a Website with Drupal 6 – – I have decided to keep that website in Drupal 5 and create a whole new website in Drupal 6 for these series of tutorials because there is still sufficient interest in using Drupal 5. I will tag the tutorials “Drupal 6″ and “Drupal 5″ so that you can choose which ones you’re interested in
• Organizing content with taxonomy – You can set up a taxonomy that allows users to add terms (also known as tags or metadata) to content. The taxonomy for a site contains one or more vocabularies and each vocabulary contains a set of terms.

CSS 3

• Border-image: using images for your border – Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element.
• How to achieve cross browser font face support – At the moment, web fonts are all the buzz. Unfortunately, achieving cross browser support is not easy. In this tutorial, I’ll show you how to get custom fonts working in all of the major browsers.
• Awesome Buttons with CSS3 and RGBA – I never thought the day would come where you could create nice looking buttons without images. Well in this tutorial CSS3 is put to use to make a dream come true.
• Creating a Polaroid Photo Viewer with CSS3 and jQuery – Ever wanted to create a cool image gallery but you didn’t know flash? Well in this tutorial Mark creates a phenomenal tutorial on how to create a Polaroid photo viewer. Javascript is the new flash.
• How To Create Depth And Nice 3D Ribbons Only Using CSS3 – CSS3 is great especially when you do not have to use images or css sprites to achieve the depth boxes technique.

PHP

• Build a phpBB Forum in 5 Steps – If you’re thinking of setting up a forum for your Website, you need not start from scratch. The open-source script, phpBB, can easily be installed on most Web servers. This article will describe how to do it right, from downloading through to customisation.
• PHP Login script tutorial – Learn to create a simple login system with php + mysql script, this tutorial easy to follow, teach you step by step.
• Simple PHP Website tutorial – If you ever tried making a simple website with only a handful of pages, you probably noticed that once you need to edit some menu element, you have to edit all of your pages, which can be very irritating.
• Creating a Mail Client, Part 1 – This tutorial is Part 1 of a series on creating a Mail Client. In Part 1, I will show you how to send mail. You may download and print this tutorial as necessary.
• How to keep your website secure from hackers and attacks – Such as server “which are always on” is designed as a system for security is an important issue. Web servers are the backbone of the Internet. The basic services and functionality across the world billions of websites and therefore everyone’s personal information store that serves as the journey.

Other Resources

• Halftone Navigation Menu With jQuery & CSS3 – Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
• Nice CSS3 Gradient Buttons – There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript.
• Creating Modules for Drupal – This tutorial describes how to create a module for Drupal 6. It is an update to the tutorial for Drupal 5.
• Delicious Recipes for WordPress Page Menus and Page Listings – There are so many awesome ways to display your WordPress pages. Out of the box, WordPress provides two different template tags for displaying lists of your site’s pages.
• Drag and drop HTML 5 – As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature.
• Making a Mosaic Slideshow With jQuery & CSS – Today we are making a jQuery & CSS mosaic gallery, which will feature an interesting tile transition effect when moving from one slide to another.

The Nice Designer

Ever since I have been freelancing I have considered myself to be the nice freelancer. By nice freelancer I mean I was the guy that would take projects when the client said they have x amount of dollars and I would just be the best guy to all my clients. As a freelancer when most of us begin we are open to take on anything and every time an offer and thrown our way we accept it. I mean your making money so what is there to argue about? Right? Well that’s not the point. See I’m going to give you guys an example of a situation where I was considered the Nice Freelancer.

Note: Story is just an example

BEFORE:

TOM: Hey Marcell! Great portfolio. I’ve just received your emailed and you said that you could create that website for us for X amount of dollars and in X amount of days. Also what is this wordpress CMS that you speak of? Can it help our business?

Marcell: Thanks Tom! Yes that is correct, I could have your website completed for X amount of dollars in just a matter of X days. WordPress is a Content Management System that allows you manage your website from the back-end but still giving you the ability to control what happens on the front end of the site. WordPress is also very easy to learn via admin section. Yes it can help your business out tremendously because there are tons of plugins which allow you to add anything you would like to the site.

TOM: Sounds good to me. So what do you need to begin? Also I would need a hosting company do you know of any?

Marcell: All I will need is your FTP information. Yes I know of a hosting company. Try Host gator, or media temple etc.

Ok so above I have contacted Tom about a website that he wants created. Your probably wondering what is the problem. Well if you read below I will tell you the mistakes I have made.

Mistakes

1. I went on craigslist for a job
2. I told the client about WordPress(Indepth)
3. I am working for “$200″
4. I told client about hosting companies
5. I did not ask for a payment up front
6. I did not show client a contract
7. I did not ask client what websites he like
8. I am not thinking straight

So I completed his website and I told him if he ever needed help with anything just email me. HELP. Yes that is the problem! The main problem is that I setup the client website on a Content Management System where he no longer needs my help after he gets the hang of it. I mean wordpress is pretty simple once you mess with it for a couple of days. In as for upgrades he can update his website with the click of a button. I also gave him hosting companies name and without putting my affiliate links in there. So as you can see I did not handle this client correctly and yes I may have gotten paid and he may of been happy but what I am not prepaid for is a time when there is no client and no cash rolling in.

Hard times

Hard times can/will approach you if you let your guard down. By guard I mean slacking. Many freelancers do work and get paid then they wait until their money is gone or low and try to find work again. Yes there are alternate ways to make money like sell stock, and etc but do you really want to compete with others in 1 market? Whenever times got difficult for me I would think should I create a stock files or how can I make more money asap. See my problem was I were trying to make money asap now because I did not have any more money and I was becoming very desperate. I even entered those contest where many designers submit a design and the client would choose one. I quickly found out that submitting my designs or trying to create stock was not for me.

The “Nice” designer

As a freelancer we try to be as nice as possible to clients. I like to call my next technique the “nice” freelancer. As you can see above I have made many bad mistakes. In my new example you will see how you can increase your payment by hundreds of dollars.

Note: Story is just an example

After:

TOM: Hey Marcell! Great portfolio. I’ve just received your emailed and you said that you could create that website for us for X amount of dollars and in X amount of time. Also what is this CMS that you speak of? Can it help our business?

Marcell: Thanks Tom! Yes that is correct, I could have your website completed for X amount of dollars in just a matter of X time. A CMS also known as a Content Management System allows you manage your website from the back-end but still giving you the ability to control what happens on the front end of the site. Yes, I think it is great for business and business owners because you can do many things with it like add workers to site and so forth. You will not have to write one line of code since everything is updated via back-end. Also the only thing that may need to be done is the updating and maintenance of your site. It may not seem important at the moment but I strongly recommend updating and impatience your site at least every 1-3 months to avoid getting hack.

TOM: Sounds good to me. As for maintenance I would be very interested in that service. How much would that cost if included? What do you need to begin? Also I would need a hosting company do you know of any?

Marcell: I could do update the site and do maintenance work for X amount of dollars every X amount of time. Well before I begin I will need you to read and agree to my terms/contract then once agreed I will need a X % of dollars paid then I can begin working. Yes I know of a great hosting company. Try

 <b><a href="affilate link here!">Hostgator</a></b>.

They are very good in they have customer support 24/7 so if something went wrong and I was not available at the moment then they would be able to assist you.

So above you can see that I have properly handle my client the right way. I told them when I can have the project done, I gave them information about the CMS but not too much detail, I offered a service that they will accept 90% of the time, gave them my contract so they can read/accept my requirements, then I added an affiliate link to the hosting service. See you are the same nice freelancer just a bit smoother.

Keeping a steady Income$

Keeping a steady income can be very difficult if you do not think situations through. Below I will list multiple ways you can sustain a steady income.

• Updating client website- After you have completed the clients website tell them you can keep their site safe and clean by doing maintenance work every 3 months or so.
• Tell client to spread the word- Tell your client to pass on the word about you to anyone he/she knows that may be interested in your service
• Keep work posted via design sites- Upload your work to places like flickr, deviant art, Creattica , and etc to showcase your work.
• Write for websites in your niche- Contribute a post or 2 to a website to get your name out there.
• Create stock files- Create stock files via Themeforest
• Post sign locally- Put up business cards or letters in your local area telling people about your service
• Pass out business cards- Pass out your business cards to people you think might be a potential client.
• Network with people-Network with others via social networking website and let them know what you do
• Make video blogs-Stay connected with your followers or bring in new followers
• Stay on top of your game- Always look for more work and when you have too much work sort it out so when you finish a project another one is waiting for you.

Freelancers make many mistakes and I must say that we all have had time where we would work for nothing, become desperately in need of cash and so fort. The important to remember that there are a colossal amount of clients out there they just do not know about you. By building yourself a name your building yourself to what I like to call a steady income.

Time Consuming

When competing in a contest, trying to come up with a design can be very overwhelming and time consuming. Often designers get the picture in their heads that they can come up with a rocking pixel perfect design in just a matter of hours. I will agree that a design can be done within a mater of hours but I can guarantee that it will not be rocking nor pixel perfect. Designs roughly take about a day or more to complete if you’re trying to create something very fascinating. When designing a website or graphic, designers have to plan out many things such as.

• Color Scheme
• Typography
• Layout/Mockup
• Functions

Those are the main topics that designers often have to take time to think about before making a decision. I will explain below why each one is very important.

Color Scheme: Color Scheme is very important when designing a website or graphic. Whenever you’re trying to find the right colors for something you must always find at least 3 colors to use for your design. Choosing 3-5 colors will give you many options and will basically give your design a good look. I will give 2 sub examples why you will need about 3-5 colors for your design below.

Website

• Background
• Container
• Navigation
• Links
• Logo

Graphic

• Background
• Elements
• Image
• Environment
• Logo

Typography: Typography can be very frustrating when creating a new design. Whether its for a website or poster it can take time looking through thousands of fonts just to find the right one for you specific project. Typography can also determine the look and feel of your website. Thin fonts tend to be more elegant while bold fonts tend to be more fun-ish.

Layout: Creating a layout or Mockup can save you a ton of time. Most designers do not like sketching things out and just decide to open up photoshop in begin working. That fine if that works for you but for me I find sketching out my designs or creating a mockup can really make a difference with my designs rather then me just creating it step by step in photoshop.

Functions: This only applies for web designers. Whenever you create a design of a website make sure you keep in mind what functionality you might like your website to have when everything is over with. for example if you’re going to have a button and you want it to be a rollover button, make sure you create the rollover effect even if users cannot see it in the final layout.

Losing hope / inspiration

When competing in contest many designers often lose inspiration in their own work. The reason for such a thing is because when you’re in a contest you are competing against some of the best. Someone design will always be better than yours in most cases or at least you will think that and will not know what to create. For example I was once in a contest and I was very excited about it especially the cash prize but when I started to see designers entries I thought to myself that there was no way I could create something that good. I lost hope and inspiration. I could not think of a design and was very frustrated. Looking at others work made me feel like I was not designer and did not belong in the design community.

Less time for personal work

Most of the time when you enter contest you find that a design might take you quite the time to complete and yet you are unsure if you’re going to win it. I often hear many designers say “I lost but it will make me a better designer”. I strongly disagree with that. The time you spent designing that poster or website you could of been following a tutorial or creating something for yourself that is worth while. Working on personal projects or following a tutorial will add to your knowledge and make you better at designs. You can also learn new techniques that you did not know of. In a contest you are not guaranteed the prize so you’re basically taking a big risk. Why take a risk in lose time when you could do something productive with that time.

How to become a better designer

Becoming a better designer takes time in practice. If you would like to become a better designer just follow my steps.

1. Do not look at others work to often
2. Take a walk for inspiration
3. Always brainstorm & sketch ideas before turning to a computer
4. Work on personal projects instead of entering contest
5. Follow design tutorials and pick up various techniques from it
6. See what the latest trend is in design in creating something that is opposite from it

If you follow my steps above you will be a better designer in no time. Stay away from contest in work on personal projects so you can build your portfolio and become better at what you love to do. Sometimes you have to keep your secret hidden and release it when least expected(In terms of design). Good luck at becoming a better designer. Hope all goes well

Oxford

Chino ITC Pro

Serif-Beta

Tenderness

Bellerose

Print Clearly

Alexandria

Blue Plate Special

The Real Font

Vlaanderen

Speakeasy

League Gothic

Cantarell

Capricorn OSF

Teen

Fertigo Pro

Delicious

Nirvana

NovemberMedium Font