Link to home
Start Free TrialLog in
Avatar of karnac2020
karnac2020Flag for United States of America

asked on

Resume template for HTML/Dreamweaver website

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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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?
Avatar of karnac2020

ASKER

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
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.
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

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
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks Scott,

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

Mark
Great advice
>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.