Solved

Resume template for HTML/Dreamweaver website

Posted on 2014-01-10
9
533 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

751 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