Solved

Resume template for HTML/Dreamweaver website

Posted on 2014-01-10
9
541 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

632 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