Solved

Resume template for HTML/Dreamweaver website

Posted on 2014-01-10
9
508 Views
Last Modified: 2014-01-19
Does anyone have a recommendation for a high quality website template for a Resume?

I know there are tons out there; I just don't know if any one stands out as the "gold standard" for Resume website templates.

Thanks
Mark
0
Comment
Question by:karnac2020
  • 5
  • 4
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39772869
For what type of resume?   If you are a javascript developer you will probably have an interactive and unique mini site that nobody else has.  If you are a sales executive, you may have some charts showing your upward progress and a more formal downloadable  pdf or text.

I don't think this is really a dreamweaver question as it is layout.    What type of position is this for?
0
 

Author Comment

by:karnac2020
ID: 39772875
I am building a website (that I also want to put on a flashdrive) for a Pastor of a United Methodist Church. She is applying for an administrative job in the Church headquarters.

I could use Wordpress since there are a ton of themes for Resumes available, but I don't want to have to run a database program and worry about how to put that on a flash drive.

I would also like to have an option where viewers could download and print the resume.

Ideally the website should be responsive so viewers could also look at it on a smartphone.

Thanks
Mark
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39772884
You just need a simple html page and a pdf of the print version. Use http://getbootstrap.com/ and make a traditional 2 column responsive resume.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39772888
9 minute resume
http://jsbin.com/aheFAHEj/1/edit

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    .right{margin-bottom:30px;text-align:right;}
    .container{margin:20px 10px 0px 20px;}
  </style>
</head>
<body>
  <div class="container">
  <h2>My Info</h2>
  <div class="right">
    First M Last<br>
    Address<br>
    City, St Zip<br>
    555-555-1212<br>
    me@mydomain.com
    <hr>
  </div>
  <div class="row">
    <div class="col-sm-2">1900 - 1900</div>
    <div class="col-sm-10">
      <p>Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. </p>
    </div>
  </div><!-- row -->
  
  
  <div class="row">
    <div class="col-sm-2">1900 - 1900</div>
    <div class="col-sm-10">
      <p>Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. </p>
    </div>
  </div><!-- row -->
  
  <div class="row">
    <div class="col-sm-2">1900 - 1900</div>
    <div class="col-sm-10">
      <p>Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. </p>
    </div>
  </div><!-- row -->
  
  <div class="row">
    <div class="col-sm-2">1900 - 1900</div>
    <div class="col-sm-10">
      <p>Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. </p>
    </div>
  </div><!-- row -->
  
  <div class="row">
    <div class="col-sm-2">1900 - 1900</div>
    <div class="col-sm-10">
      <p>Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. </p>
    </div>
  </div><!-- row -->
  
  <div class="row">
    <div class="col-sm-2">1900 - 1900</div>
    <div class="col-sm-10">
      <p>Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. </p>
    </div>
  </div><!-- row -->
  </div><!-- container -->    
</body>
</html>

Open in new window

0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:karnac2020
ID: 39785324
Scott,

How can I create the resume so that I can have  headings on the left side that track with the content on the right side. For example:

Employment:                   Job1
                                          (description)
                                          Job2
                                          (description)
                                          ...
                                          Job N
                                          (description)

Education:                        School 1
                                          (description)
                                          School 2
                                          (description)
                                          ...
                                          School N

If I add more Jobs, the length of the Employment section will get longer, but I still want "Education" to line up with School 1.

It seems this is pretty easy with tables, but is there a better way to do this?

Thanks
mark
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39786271
If you look at the sample I gave you it already does that.  It is based on bootstrap http://getbootstrap.com/css/ which is a responsive grid meaning it can change from mobile to desktop.  If you look at the original link I gave you on your phone, you would notice the dates are over the content.  If you look at it on a screen over 700 px wide, it will look like your sample.  

I updated the class so it will not stack here http://jsbin.com/aheFAHEj/2/edit by changing the class so the columns will always stay in columns no matter the size of the screen.

<div class="row">
     <div class="col-xs-2">Employment:</div>
     <div class="col-xs-10">
            <p>
                 <strong>Job1</strong><br>
                  (description)
             </p>
            <p>
           <strong>Job2</strong><br>
           (description)
            </p>
           <p>
           <strong>JobN</strong><br>
           (description)
            </p>
     </div>
</div>

Open in new window

With actual content, as you go to the xs screen (phone), the word, "Employment" bleeds over to the right side.  This is why stacking on the small screen is nice.  
<div class="row">
     <div class="col-xs-12  col-sm-2">Employment:</div>
     <div class="col-xs-12 col-sm-10">
            <p><strong>Job1</strong><br>
               Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. 
            </p>
            <p><strong>Job2</strong><br>
             Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. 
            </p>
           <p><strong>JobN</strong><br>
           Vivamus suscipit, nibh sit amet condimentum scelerisque, dui turpis rhoncus justo, quis vehicula tortor lectus eget nisi. Nullam leo orci, interdum quis nunc sed, imperdiet lacinia nisi. Proin a eros diam. Praesent lacinia rutrum quam vel porta. Nam vitae enim nisl. 
           </p>
     </div>
    </div>

Open in new window

Look at this version above without the code http://jsbin.com/aheFAHEj/3/ and make  your screen narrow and wide and you can see what I mean.  I updated the top portion but left the bottom.
0
 

Author Comment

by:karnac2020
ID: 39786564
Thanks Scott,

So I am a little confused: which version should I be using?

Mark
0
 

Author Closing Comment

by:karnac2020
ID: 39792291
Great advice
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39792294
>which version should I be using?

I would go with stacking the columns on a small screen.  (The bottom of your selected answer).

I'm glad it worked out for you.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now