Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Resume template for HTML/Dreamweaver website

Posted on 2014-01-10
9
Medium Priority
?
551 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 53

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 53

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
Command Line Tips and Tricks

The command line is a powerful tool at the disposal of every Linux user. Although Linux distros come with beautiful user interfaces, it's worthwhile to learn the command line because it allows you to do a number of things that you otherwise cannot do from the GUI.  

 
LVL 53

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
 

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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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 53

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

715 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