Tuesday, July 10, 2012

Turn Your Resume Into A Website

I have given tips to people searching for employment to make a website out of their resume.  I have a lot of web development and marketing experience but I realize that others may not so I developed a template that people can copy and paste to make their own resume into a website.  With some simple changes/additions of text and a few technical steps, your resume can be out on the world wide web for employers to see.  Another thing that makes this more effective, especially for those in web marketing, web design or other types of design and video work is that you can easily guide employers to your work.  For example if you have websites that you have designed for clients or photographs or videos that you have done, you can link to these from within the experience section of the resume. 




Making a website out of your resume can also make it easier for an employer to communicate with you.  You can provide links to email you or to reach out to you on social media.  You can also install buttons to make it super easy for viewers to print your resume.  You don’t have to be an HTML or CSS wizard to accomplish this.  A basic understanding of HTML, CSS and File Transfer Protocol programs is required.  You will also need access to a file server. 


FTP clients like Filezilla can be downloaded for free however a server is a bit harder to come by.  If you are enrolled at a University, most institutions provide a small amount of space on their servers for students to do web design work for their courses.  Access is typically free.  Many colleges have rules whereby students are not allowed to use the server to run a business online and their will most certainly be bandwidth restrictions.  Unless you are selling your resume or expect one hundred thousand employers to view it in a week, you should be alright.  If you don't attend an institution that allows for use of their servers, you can set up a hosting account and purchase a domain name for under 20 dollars.  GoDaddy provides 3 month hosting services for 4.95 per month up front and you can also register a domain name there for about 12 bucks for the year.  GoDaddy also provides great instructions for how to use an FTP client and get your hosting account setup so that people can visit your website.   


Building your resume using HTML and CSS is rather simple.  If you have coding knowledge, simply build it the way you would any other HTML page.  If you have little or no coding knowledge, feel free to use my template below. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Online Resume</title>
<link href="resume.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1 align="center">Your Name</h1>
<h2 align="center">Your Phone Number | Your Email </h2>
<div id="title">
<p class="obj"><strong>Objective</strong></p></div>
<div id="objective"> <p align="left">I need a job, Duh!</p> </div>
<div id="title"><p class="obj"><strong>Experience</strong></p></div>

<div id="experience">
<table border="0">
<tr align="center">
<td style="width:300px; text-align:center;">Dates of employment</td>
<td style="width:300px; text-align:center;">Place that you worked</td>
<td style="width:300px; text-align:center;">City and State it was in</td>
</tr>
</table>

<p align="left"><strong>Your Title</strong></p>
<ul>
<li>This is an unordered list. You can use this space to describe things that you did in your previous job. You can add additional list elements by adding <li> tags.</li>
<li>These lines can also be used to add links to examples of past work experience whether it be videos, images, websites or social media accounts. Virtually anything that is related to the job that you are applying for can be linked to here.</li>
</ul>
</div>

<div id="experience2">
<table border="0">
<tr align="center">
<td style="width:300px; text-align:center;">Dates of employment</td>
<td style="width:300px; text-align:center;">Place that you worked</td>
<td style="width:300px; text-align:center;">City and State it was in</td>
</tr> </table>

<p align="left"><strong>Your Title</strong></p>
<ul>
<li>This is an unordered list. You can use this space to describe things that you did in your previous job. You can add additional list elements by adding <li> tags.</li>
<li>These line can also be used to add links to examples of past work experience whether it be videos, images, websites or social media accounts. Virtually anything that is related to the job that you are applying for can be linked to here.</li>
</ul>
</div>

<div id="experience4">
<table border="0">
<tr align="center">
<td style="width:300px; text-align:center;">Dates of employment</td>
<td style="width:300px; text-align:center;">Place that you worked</td>
<td style="width:300px; text-align:center;">City and State it was in</td>
</tr>
</table>

<p align="left"><strong>Your Title</strong></p>
<ul>
<li>This is an unordered list. You can use this space to describe things that you did in your previous job. You can add additional list elements by adding <li> tags.</li>
<li>These line can also be used to add links to examples of past work experience whether it be videos, images, websites or social media accounts. Virtually anything that is related to the job that you are applying for can be linked to here.</li>
</ul>
</div>

<div id="title">
<p class="obj"><strong>Education</strong></p>
</div> <div id="education">
<table border="0">
<tr align="left">
<td style="width:400px; text-align:center;"><strong>The prestigious college you attended</strong></td>
<td style="width:300px; text-align:center;">City and State of said college</td>
</tr> </table>
<p align="center">The title of the fancy degree you earned</p>
<ul>
<li>Here you can list any other fancy certificates, skills, clubs, organizations or other fantastic things you did.</li>
</ul>
<table border="0">
<tr align="center">
<td style="width:400px; text-align:center;"><strong>Maybe you have more than one degree</strong></td>
<td style="width:300px; text-align:center;">City and State</td>
</tr>
</table>
<p align="center">You are pretty smart if you have two degrees. Or you have no life.</p>
</div>
<div id="title">
<p class="obj"><strong>References</strong></p></div>
<div id="references"> <p align="left" style="padding-bottom:50px;"> Here is a great place to list links to people on linkedin that can act as references for you. Just like in a traditional hiring process, make sure these people are aware that they are acting as references.</p>
<br /> </div>
<div id="print"> <form> <input name="print" type="button" value="Send To Printer" onclick="javascript:window.print()" /> <input type="button" value="Email Me" onclick="parent.location='mailto:youremail@putyouremailhere.com?subject=I'd like to talk about your resume'" />
</form>
</div>
</div>
</body>
</html>

Here is the corresponding CSS that will style the above HTML

*note:  You can name the HTML file whatever you want but you must name the CSS file "resume.css" or else change the name of the CSS document in the HTML code to whatever you name the file. 

<--Resume CSS


body {background-color:#0080FF; }

#wrapper {width:900px;           
                  background-color:White;           
                  text-align:left;           
                  margin-right:auto;           
                  margin-left:auto;           
                  padding:0;}

#title {width:900px; height:20px;}

#title .obj {float:left;}

#wrapper {padding:0px 40px 0px 40px;}

#objective {width:600px;             
                   margin-right:auto;             
                   margin-left:auto;             
                   border-top-style:solid;             
                   border-top-width:2px;             
                   border-top-color:Black;}

#experience {width:600px;             
                      margin-right:auto;             
                      margin-left:auto;             
                      border-top-style:solid;             
                      border-top-width:2px;             
                      border-top-color:Black;}

#experience2 {width:600px;             
                        margin-right:auto;             
                        margin-left:auto;             
                        border-top-style:solid;             
                        border-top-width:2px;             
                        border-top-color:Black;}

#experience3 {width:600px;             
                        margin-right:auto;             
                        margin-left:auto;             
                        border-top-style:solid;             
                        border-top-width:2px;             
                        border-top-color:Black;}

#experience4 {width:600px;             
                        margin-right:auto;             
                        margin-left:auto;             
                        border-top-style:solid;             
                        border-top-width:2px;             
                        border-top-color:Black;}


#education {width:600px;             
                    margin-right:auto;             
                    margin-left:auto;             
                    border-top-style:solid;             
                    border-top-width:2px;             
                    border-top-color:Black;}

#references {width:600px;             
                      margin-right:auto;             
                      margin-left:auto;             
                      border-top-style:solid;             
                      border-top-width:2px;             
                      border-top-color:Black;}

#print {width: 600px;          
            height:100px;          
            margin-right:auto;          
            margin-left:auto;}

Resume CSS-->




Now that you have your resume as a website and loaded online, you have to make sure employers see it.  One of the best ways that I have found to get this done it to find out a hiring managers name and email.  Once you have these two pieces of information, you can send a short email introducing yourself and providing a link to the resume.  This strategy may be hit or miss.  Some people hate receiving unsolicited emails and even if they don’t, they may not be inclined to click on a link for fear of downloading a virus.  On the other hand, this is your shot to make a strong and lasting first impression.  Hiring managers at good companies sift through hundreds of resumes no matter what the position.  They may build a pool of good resumes that first come in when the position opens and then stop looking or merely glance over the rest quickly.  Turning your resume into a website enables them to perform less steps to look at your qualifications and definately makes you stand out.  All they have to do is click a link in an email and bam, there you are.

You can also share your resume website link on professional social networking sites like LinkedIn.  Some job opportunities require you to send a resume in via email.  These particular jobs are great opportunties to email a link to your resume.  If you are using this for the first time, I hope it helps to set you apart from your employment competition!


Do you have any great ideas on how to find a job using the web or social media?  Leave them in the comments section.   


No comments:

Post a Comment

3 Attorney Blogs That Are Crushing the Content Game

I always recommend to lawyers that they should have a blog on their site. There are several fundamental reasons that blogs are a good idea f...