CSS Trick: Turning a background image into a clickable link
One of the things I most often get asked by people trying to master HTML and CSS is “How do I make a background image clickable?” It’s easy to wrap a regular image tag in a link, but what if your design or situation required that you use a background image? It’s actually quite simple. Just follow these steps and I’ll show you how to make a clickable background image like this:
Becoming a Freelance Web Developer/Designer
It wasn’t all that long ago (although in “web years” it’s been ages) that I was trying to break into web development as a career. Now that I’m more established, people are asking me the same questions I asked others when I was starting. They all amount to one thing: How can I take this from a hobby to a career?
In my experience, most web developers and designers (especially those trying to begin a career) enjoy what they do. They usually start building small sites or themes as a hobby, often getting together with other like-minded people at sites such as Open Designs. They do what they do because they like it, but who can fault them for wanting to get paid for doing something they love? It’s the ultimate goal.
So what do you do? First off, you need to understand that it’s a highly saturated market, and you’re going to have to put in serious time and effort to turn this into a career. You’re going to be putting in 40 hours at work to pay the bills, and another 20-30 hours laying the foundation for your future career. If you aren’t ready to put in the time and effort, you can stop reading right now. This is not a get rich quick scheme, it’s a plan that you can follow if you’re really serious about it.
Now that you’ve agreed to put in the necessary effort, here are some steps to follow:
Step 1:
Register a domain name, and get some inexpensive hosting. You can get hosting through GoDaddy for less than $5/mo, and if you do, you can get a domain name from them for $2 for the first year. Install something like WordPress or Drupal on the site, and put up some general info. As you go, you will build this out into a portfolio, but you need to start somewhere.
Step 2:
If you haven’t already, you should join a community like Open Designs. If you are a designer, create and submit designs. You’re not looking for quantity, you’re looking for quality. Your designs need to stand out as better than all the rest. Be unique. Find out what you’re good at, and perfect it. While you are aiming for quality, quantity DOES matter. However, that won’t be a problem since you’re spending 20-30 hours per week doing this right? I’m sure you can turn out a design every week or two, so you worry about quality, and quantity will handle itself. Release your designs as public domain, but keep your absolute best design for yourself. Creative Commons is more hassle than it’s worth, and you want your designs to be used.
If you are not a designer, try to network with designers. Offer to code their designs into themes for common CMSs, etc. You probably won’t make it very far as a freelance programmer if you don’t have some designers you can use. Build relationships with the quality designers, and remember that quantity will handle itself as you put in those extra hours. Also try to post helpful tidbits in the forums and answer people’s questions when you can. Networking is important.
Step 3:
Continue to build the site you started in step one. Take your best design and add it to your site. If you are a developer, ask a quality designer if you can barter work for a custom design. Document your work on there. Not just a gallery, post some content. Walk a visitor through your design process or make a tutorial on converting a design to a theme. Make sure to set up a contact page with your info so clients can reach you.
Step 4:
Do some inexpensive work for hire. Consider finding a charity or a socially proactive business and do some work for almost nothing. Get used to working with clients and doing things up to their standards. An alternative to the charities is to try out a freelance website. The competition is massive, because the market is global, but if you’re persistent you can get work.
Step 5:
Go for clients with a vengeance. Make a form-style E-Mail that has information about you, links to your portfolio (which should look pretty good at this point), etc. Leave room at the beginning (NOT the end, this is important) for a personal note that will let the potential client know that you personally read and replied to their request. Find places where jobs are posted for work that you are especially good at. Consider finding niche places like a WordPress or Drupal job list where there may be less competition.
Don’t limit yourself to job lists. More than 80% of jobs are never posted anywhere. Find local businesses that have poor sites or no site at all, and take them a proposal (in person) with specific ways they will benefit from it. If they have a bad site, make sure to be careful what you say, it’s VERY common to hear an owner say “my {insert relative here} made that site for us” and you don’t want to be insulting. Base your argument on facts and statistics, possibly taking mockups or printouts of sites that are similar to what you are recommending.
Step 6:
Make the leap. At some point, you have to let go of your regular job and switch to this full time. I haven’t really found a rule of thumb for when this is. It’s different for every person. If you’re having a hard time deciding if you’re ready to drop the 9-5, consider getting a part-time job elsewhere and doing this full-time. Maybe the extra income will help ease the transition. Mostly remember that freelancing is still a job, it’s just one you like. And it’s not against the rules to like your job.
New Web Development Resource Launched
As a web developer, I know that there are tons of resources out there. I also know that many of them are outdated, contain limited information, or seem to only cover the very basics. I decided that we needed something better. A place where developers, programmers, and designers could share their knowledge in a variety of areas, and we could all benefit. I decided to launch WebDevNews – News For Web Developers. Web Dev News is a collaborative blog, where the content is generated by people who really know what they’re talking about.
If you are a professional in the web development field, please consider contributing to Web Developer News.
Free Template: Minimalist
Minimalist is an extremely light weight, configurable template, with no images at all! It’s completely fluid, so no matter what the user’s screen width, you don’t waste any space, browser font resizing is completely supported, and it is source-ordered. It includes stylesheets to display main content on the left or right, as well as many alternative colors including grey, green, blue, purple, red, and brown! It validates as XHTML Strict 1.0, and is released as Public Domain. It is available for download over at OpenDesigns.org.
I just converted Minimalist to a WordPress theme, and uploaded it here for anyone that wants it. I was lazy, so it defaults to green/grey with content to the left. If you want to use a different combination, edit the header.php file to use whatever css files you want (all are included). I also included a contact page template, but again was a little lazy, so you will need to edit contact.php and put your contact info on lines 73-75, as well as your E-Mail address on line 17. The only other real changes that were made was styling for comments (as well as unique styling for admin comments), and I added a pencil icon to use for “editing” (it’s still image free for your users).
Free Template: BlueBox
BlueBox is an extremely light weight template. It has no images at all! It’s completely fluid, so no matter what the user’s screen width, you don’t waste any space, and browser font resizing is completely supported. Changing the color of this template should be very easy, since it has no images simply modify the colors in the stylesheet. It validates as XHTML Strict 1.0, and is released as Public Domain. It is available for download over at OpenDesigns.org,and you can see it in use at a few sites:




