Zero 3 Computers has been acquired by Future Design Group, please visit our new site for contact information.
Mississippi's Leading Website Design Firm on Google

Recent Articles


Community News

  • Designing Your Own Futuristic-Style Brochures in Photoshop

    If you ever find yourself needing a more modern, futuristic appeal to your brochures like for example in an 8.5 x 14 brochure, this is the perfect tutorial for you. This tutorial will help you design your own, techy looking brochure with included resource links so that you can see where you can find some free stuff to use on your own designs.

  • Creating a Bright Sparkled Text Effect in Photoshop

    If you need something really noticeable and prominent for your poster titles or web designs, you may want to try out this effect. Fortunately, it is not that hard really to setup your own styled bright sparkles for text.

  • Creating A Simple Godfather Type Design

    In this guide, you will learn the simple steps in making a simple "Godfather" like design in Adobe Photoshop perfect for posters or print flyers. The steps are pretty simple, so even a beginner should be able to easily handle it.

Submit Your Own | View More Submissions

For quality graphics display get ATI radeon HD 5850 graphic cards.

PHP Skill Set Tutorial

Categories: php, website development, tips, inspiration
Posted By Eric Oliver @ May 14th, 2011 11:22 PM

In any profession you will need to display your skill set. If you have a website, I present you with a colorful and simple way to display your skills to your visitors that will not only stand out among a crowd but is very easy to implement. I found a few promising designs, but unfortunately I could not find a good tutorial that would show me how to create a design that would do what I wanted it to without having to update it I designed one that suited my needs and i decided to let other people use it on their site.

Our design implements CSS and PHP to create a colorful, turn key solution for your needs. You can use our design and modify it to meet your skill set. You only need to change the skill and what year you started learning the skill and the PHP and CSS code will do the rest. I designed this to display on our contact page but you can use it for pretty much any job that you offer. Even if your skills are not related to website design a skill set is still applicable.

In this article we show you exactly what you need to do to get this skill set module to display properly on your site without very many modifications while it remains XHTML compliant.

PHP Skill Set Tutorial Featured Image

See it in action

PHP Function

This is the function you call that does all of the work for you. It is very simple and basically subtracts the year you learned the skill from the current year to display how many years you have in experience with the skill and will give you a percentage based on the first calculation. This calculation will be used in the CSS background.

<?php function skillLevel($year) { //display how many years you have known this skill echo date("Y") - $year + 1; } function percentage($year) { //of background showing based on the year you learned this skill echo 100 * (date("Y") - $year + 1) / 9 //it is 9 in this example since I started 9 years ago } ?>


This code displays the images needed for to show the progress bar and correctly and also formats the text displayed below the progress bar.

<style type="text/css"> .progress-bar { background: url("images/percentage-bg.png") no-repeat scroll left center transparent; height: 39px; width: 316px; } .progress-level { background: url("images/progress.png") no-repeat scroll left center transparent; height: 39px; } .progress-bar .small{ color:#666666; display:block; font-size:10px; font-weight:normal; margin-left: 10px; margin-top: -10px; } </style>


This is the HTML that you will have to place between the BODY tags on your page. You can create as many skills as you want by copying and pasting the code below. You only need to change the year in the PHP function to whatever year you learned the skill.

<div class="progress-bar"> <div class="progress-level" style="width: <?php precentage(2003) ?>%;"></div> <div class="small">CSS (<?php echo skillLevel(2003) years experience)</div> </div>

You can use the following images in your design or create your own to your specs. Just right click on the images and select save as.

Progress bar

Progress bar background


I hope you enjoyed our how-to and I hope that it is as simple for you as it was for me. It is an easy to implement, useful way to display your skill set to your potential clients or visitors. I have also attached the zip version of the entire project. You can download the entire project using the link below:
Entire Skill Set Project

Share Our Article With Your Friends


Have an opinion about our article? Please share your thoughts in the comments below.

Be sure to stay tuned: follow us on Twitter, become a fan on Facebook and grab the RSS.

Related Articles

Are you interested in reading other topics like this one? If you are then select from the following blog articles or page through the next or previous article and continue reading.

← Creative Design Is More Than Graphics

Share Your Own Opinion

Nibbler report for >