Creating an HTML Resume with a Picture
This tutorial will guide you through creating a visually appealing and professional HTML resume, complete with a picture. The target audience is beginners in web development looking to create a digital representation of their resume.
Step 1: Include Header Assets
First, you need to include necessary CSS and JavaScript libraries in the header of your HTML document. This will provide the styling and functionality for your resume.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel='stylesheet' href='https://www.rugstudio.com/Shared/Themes/RugStudio2015/css/deputy.css'>
Step 2: Create the HTML Structure
This is the main part where you define the layout and content of your resume using HTML elements and classes. The code uses a two-column layout to organize information.
<div class="container cv pad-t-40 no-pad-lr">
<!-- Left Column -->
<div class="col-md-4 matchHeight no-pad-lr gray">
<div class="col-md-12 avatar">
<img src="https://www.w3schools.com/howto/img_avatar.png">
</div>
<div class="col-md-12 bio pad-b-20">
<div class="center">
<h1 class="name">John Doe</h1>
<hr>
<h2>Web Developer</h2>
</div>
<div class="about m-t-50">
<h3>About</h3>
<div class="pad-l-30">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis dapibus augue at eleifend. Aenean volutpat purus nibh, quis ultricies tellus gravida vel. Donec dictum, massa ut accumsan feugiat, ex leo vestibulum odio, vitae accumsan metus ipsum quis mauris.</p>
<p>Suspendisse sed porttitor nisl. Nunc tristique dapibus mi, nec mattis lectus interdum et. Nunc vitae feugiat dui, a dignissim erat. </p>
</div>
</div>
<div class="contact m-t-30">
<h3>Contact</h3>
<div class="pad-l-30">
<p><span class="glyphicon glyphicon-earphone circle" aria-hidden="true"></span> (555) 123-4567</p>
<p class="m-t-20"><span class="glyphicon glyphicon-map-marker circle" aria-hidden="true"></span> 1234 Example Dr.<br><span class="m-l-50">My City, ST 12345</span></p>
<p class="m-t-20"><span class="glyphicon glyphicon-envelope circle" aria-hidden="true"></span> email@example.com</p>
<p class="m-t-20"><span class="glyphicon glyphicon-link circle" aria-hidden="true"></span> www.example.com</p>
</div>
</div>
</div>
</div>
<!-- End Left Column -->
<!-- Right Column -->
<div class="col-md-8 matchHeight no-pad-r">
<!-- Start Experience -->
<div class="col-md-12 m-t-20">
<div class="experience">
<p><span class="glyphicon glyphicon-briefcase"></span><span class="h3"> EXPERIENCE</span></p>
<hr>
<!-- Row 1 -->
<div class="row m-b-10">
<div class="col-md-4">
<p class="date"><b>Company 1</b><br><i>Feb 2013 - Jun 2014</i></p>
</div>
<div class="col-md-7 col-md-offset-1">
<p class="title">Job Title Here</p>
<p>Fusce efficitur pharetra lorem nec convallis. Aenean hendrerit semper metus. Cras pharetra rhoncus mauris non malesuada.</p>
</div>
</div>
<!-- Row 2 -->
<div class="row m-b-10">
<div class="col-md-4">
<p class="date"><b>Company 2</b><br><i>Jun 2014 - Mar 2015</i></p>
</div>
<div class="col-md-7 col-md-offset-1">
<p class="title">Job Title Here</p>
<p>Aenean at accumsan leo. Aliquam aliquet odio elit, et blandit est dictum in. Aenean sagittis ultricies interdum. Phasellus in varius dolor. Proin luctus velit ac nisl ullamcorper interdum. Vivamus ut odio sed augue eleifend bibendum.</p>
</div>
</div>
<!-- Row 3 -->
<div class="row m-b-10">
<div class="col-md-4">
<p class="date"><b>Company 3</b><br><i>Mar 2015 - Present</i></p>
</div>
<div class="col-md-7 col-md-offset-1">
<p class="title">Job Title Here</p>
<p>Pellentesque ultrices ullamcorper odio, scelerisque sodales massa congue in. Morbi facilisis purus sit amet ipsum rutrum aliquam. Etiam vel posuere purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<!-- End Experience -->
<!-- Start Education -->
<div class="col-md-12">
<div class="education">
<p><span class="glyphicon glyphicon-education"></span><span class="h3"> EDUCATION</span></p>
<hr>
<!-- Row 1 -->
<div class="row m-b-10">
<div class="col-md-4">
<p class="date"><b>Diploma</b><br><i>2009 - 2013</i></p>
</div>
<div class="col-md-7 col-md-offset-1">
<p class="title">Example High School</p>
<p>Fusce efficitur pharetra lorem nec convallis. Aenean hendrerit semper metus. Cras pharetra rhoncus mauris non malesuada.</p>
</div>
</div>
<!-- Row 2 -->
<div class="row m-b-10">
<div class="col-md-4">
<p class="date"><b>Associates Degree</b><br><i>2013 - 2015</i></p>
</div>
<div class="col-md-7 col-md-offset-1">
<p class="title">Example College</p>
<p>Aenean at accumsan leo. Aliquam aliquet odio elit, et blandit est dictum in. Aenean sagittis ultricies interdum. Phasellus in varius dolor.</p>
</div>
</div>
<!-- Row 3 -->
<div class="row m-b-10">
<div class="col-md-4">
<p class="date"><b>Masters Degree</b><br><i>2015 - Present</i></p>
</div>
<div class="col-md-7 col-md-offset-1">
<p class="title">Example University</p>
<p>Pellentesque ultrices ullamcorper odio, scelerisque sodales massa congue in. Morbi facilisis purus sit amet ipsum rutrum aliquam.</p>
</div>
</div>
</div>
</div>
<!-- End Education -->
<!-- Start Work Skills -->
<div class="col-md-12">
<div class="work-skills">
<p><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><span class="h3"> Work Skills</span></p>
<hr>
<!-- Start Skills Left -->
<div class="col-md-6 no-pad-l">
<dl class="skills">
<dt>Skill 1</dt>
<dd>90</dd>
<dt>Skill 2</dt>
<dd>86</dd>
</dl>
</div>
<!-- End Skills -->
<!-- Start Skills Right -->
<div class="col-md-6 no-pad-r mobile-no-pad">
<dl class="skills">
<dt>Skill 3</dt>
<dd>56</dd>
<dt>Skill 4</dt>
<dd>28</dd>
</dl>
</div>
<!-- End Skills -->
</div>
</div>
<!-- End Work Skills -->
<!-- Start Personal Skills -->
<div class="col-md-12 m-t-20">
<div class="personal-skills">
<p><span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="h3"> Personal Skills</span></p>
<hr>
<!-- Start Skills Left -->
<div class="col-md-6 no-pad-l">
<dl class="skills">
<dt>Skill 1</dt>
<dd>75</dd>
<dt>Skill 2</dt>
<dd>63</dd>
</dl>
</div>
<!-- End Skills -->
<!-- Start Skills Right -->
<div class="col-md-6 no-pad-r mobile-no-pad">
<dl class="skills">
<dt>Skill 3</dt>
<dd>94</dd>
<dt>Skill 4</dt>
<dd>80</dd>
</dl>
</div>
<!-- End Skills -->
</div>
</div>
<!-- End Personal Skills -->
</div>
<!-- End Right Column -->
</div>
Step 3: Add CSS Styling
Here’s the CSS code that styles the different sections of your resume, giving it a clean and professional look. Pay attention to the classes used in the HTML, as they are referenced here.
.cv {
border: 1px solid #000;
box-shadow: 0 1px #FFFFFF inset, 0 1px 3px rgba(34, 25, 25, 0.4);
}
.avatar {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#454545', GradientType=0);
height: 300px;
text-align: center;
}
.avatar img {
padding: 5px;
border-radius: 50%;
margin-top: 25px;
background: #fff;
max-width:250px;
}
.gray {
background: #454545;
}
.bio {
background: #454545;
color: #fff;
}
.bio hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}
.about h3,
.contact h3 {
background-color: #4886a5;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
color: #fff;
font-size: 1.4em;
margin: 0 0 24px 26px;
padding: 4px 0 4px 12px;
position: relative;
width: 100%;
}
.about h3:after,
.contact h3:after {
border-color: #263746 transparent transparent #263746;
border-style: solid;
border-width: 6px;
bottom: -12px;
content: "";
position: absolute;
right: 0;
}
.about h3:before,
.contact h3:before {
color: #fff;
content: "";
font: 26px sans-serif;
position: absolute;
right: 12px;
top: -2px;
}
.contact {
font-size: 1.2em;
}
.circle {
padding: 10px;
border: 2px solid #fff;
border-radius: 50%;
}
.experience .glyphicon,
.education .glyphicon,
.work-skills .glyphicon,
.personal-skills .glyphicon {
font-size: 1.5em;
}
.experience hr,
.education hr,
.work-skills hr,
.personal-skills hr {
border-top: 1px dashed #000;
}
.experience .date,
.education .date,
.work-skills .date,
,
.personal-skills .date {
font-size: 1em;
}
.experience .title,
.education .title,
.work-skills .title,
.personal-skills .title {
color: #4886a5;
font-weight: bold;
}
.skills dt {
margin: 0;
padding: 1rem 0;
font-family: 'VT323', ;
font-size: 24px;
color: #3D3D3D;
}
.skills dt:first-child {
padding-top: 0;
}
.skills dt:after {
width: 100%;
background-color: #3D3D3D;
height: 0.5rem;
content: "";
display: block;
}
.skills dd {
width: 100%;
height: 0.5rem;
position: relative;
right: 0;
margin: -1.5rem 0 0;
overflow: hidden;
text-indent: -1000px;
}
.skills dd {
background-color: #4886a5;
}
body {
padding: 40px 0;
}
@media (max-width: 768px) {
.mobile-no-pad {
padding-left:0!important;
padding-right:0!important;
}
body {padding: 0;}
.about h3,
.contact h3 {
margin: 0 0 10px 0;
padding: 4px 0 4px 12px;
}
.about h3:after,
.contact h3:after {
display:none;
}
.about h3:before,
.contact h3:before {
right: 0;
top: -2px;
}
}
Step 4: Include Footer Assets and JavaScript
Finally, include additional JavaScript libraries and functions in the footer to make the skills bars interactive and ensure proper layout using matchHeight.js.
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js'></script>
//Used for the Skills bar
$('.skills dd').each(function() {
$(this).css({
width: $(this).text() + '%'
});
});
// matchHeight.js
$(function() {
$('.matchHeight').matchHeight();
});
Congratulations! You’ve successfully created your HTML resume with a picture. Remember to customize the content to reflect your own details and experiences.