Creating a stylish resume template using HTML and CSS is a fantastic way to showcase your skills and personality. A well-designed resume not only highlights your qualifications but also makes a strong visual impression. In this blog, we will walk through the steps to create a modern, stylish resume template that is both eye-catching and functional.
A resume and a CV (Curriculum Vitae) are both documents used to provide a summary of an individual’s education, work experience, skills, and accomplishments. While they serve similar purposes, there are distinct differences between the two, particularly in terms of their usage, format, and content.
Resume vs CV
| Feature | Resume | CV (Curriculum Vitae) |
| Length | 1-2 pages | Multiple pages (varies by experience) |
| Purpose | Job applications in various industries | Academic, research, medical fields, grants, fellowships, scholarships |
| Content | Summary of qualifications, work experience, skills, education | Detailed overview of academic and professional history, including education, experience, publications, research. |
| Detail Level | Concise and focused | Comprehensive and detailed |
| Format | Tailored for each job application | Consistent, includes all professional and academic information |
Qualities of an Ideal Resume
An ideal resume should effectively communicate your qualifications, experience, and skills in a clear and concise manner. Here are some key qualities that make an ideal resume:
- Clarity and Simplicity
- Tailored Content
- Professional Experience
- Accuracy and Honesty
- Keywords and Phrases
- Strong Summary or Objective
- Quantifiable Achievements
- Relevant Skills
- Consistent and Professional Tone
- Contact Information
- Education and Certifications
By ensuring your resume has these qualities, you can create a strong, compelling document that effectively showcases your qualifications to potential employers.
Follow this video for complete guidance :
You may also like : Design a Lovely Professional Visiting Card using HTML and CSS
Source Code : Resume Design using HTML and CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resume</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: "Montserrat", sans-serif;
}
*:before{
box-sizing: unset;
}
.container{
width: 800px;
}
body{
background: #ddd;
}
.resume-left{
background-color: #0bb5f4;
}
.resume .icon{
width: 35px;
height: 35px;
background: #fff;
color: #0bb5f4;
border-radius: 50%;
margin-right: 15px;
font-size: 16px;
position: relative;
}
.resume-left ul li{
color:#b1eaff;
margin-bottom:10px;
}
.bold{
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
color:#fff;
}
.resume .icon i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.borderb{
border-bottom:2px solid #b1eaff;
}
.resume-left .title{
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
color:#fff;
margin-bottom:20px;
margin-top:20px;
}
.skill-progress{
width: 60%;
margin: 0 5px;
height: 5px;
background: #009fd9;
position: relative;
}
.skill-progress span{
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #fff;
}
.skills ul li{
display: flex;
margin-bottom: 10px;
color: #b1eaff;
justify-content: space-between;
align-items: center;
}
.semi-bold{
color: #fff;
margin-bottom: 3px;
font-weight: 500;
font-size: 16px;
}
.resume-right{
padding: 23px;
background-color:#fff;
}
.resume-right .title{
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
color:#0bb5f4;
margin-bottom:20px;
}
.experience ul{
padding-left: 40px;
overflow: hidden;
}
.experience ul li{
position: relative;
}
.experience ul li:before{
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
.experience ul li:after{
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 125px;
background: #0bb5f4;
}
.experience ul li .date{
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
margin-top:20px;
}
.experience ul li .info{
margin-bottom:20px;
}
.hobby ul li{
width: 80px;
height: 80px;
border: 2px solid #0bb5f4;
border-radius: 50%;
position: relative;
color: #0bb5f4;
}
.hobby ul li:before{
content: "";
position: absolute;
top: 40px;
right: -60px;
width: 60px;
height: 2px;
background: #0bb5f4;
}
.hobby ul li i{
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hobby ul li:last-child:before {
display: none;
}
</style>
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>
<body>
<div class="container">
<div class="resume my-5">
<div class="row">
<div class="col-md-4 p-0">
<div class="resume-left">
<img class="w-100" src="https://i.imgur.com/eCijVBe.png">
<div class="p-4 pb-0">
<div class="personal-info borderb">
<div class="bold">STEPHEN COLBERT</div>
<small class="semi-bold">Designer</small>
<ul class="p-0 mt-4">
<li class="d-flex align-items-center justify-content-start">
<div class="icon">
<i class="fas fa-map-signs" aria-hidden="true"></i>
</div>
<div class="icon-text">
21 Street, Texas
</div>
</li>
<li class="d-flex align-items-center justify-content-start">
<div class="icon">
<i class="fas fa-mobile-alt" aria-hidden="true"></i>
</div>
<div class="icon-text">
+324 4445678
</div>
</li>
<li class="d-flex align-items-center justify-content-start">
<div class="icon">
<i class="fas fa-envelope" aria-hidden="true"></i>
</div>
<div class="icon-text">
[email protected]
</div>
</li>
<li class="d-flex align-items-center justify-content-start">
<div class="icon">
<i class="fab fa-weebly" aria-hidden="true"></i>
</div>
<div class="icon-text">
www.stephen.com
</div>
</li>
</ul>
</div>
<div class="skills borderb">
<div class="title">SKILLS</div>
<ul class="p-0">
<li>
<div class="skill-name">HTML</div>
<div class="skill-progress">
<span style="width: 80%;"></span>
</div>
<div class="skill_per">80%</div>
</li>
<li>
<div class="skill-name">CSS</div>
<div class="skill-progress">
<span style="width: 65%;"></span>
</div>
<div class="skill_per">65%</div>
</li>
<li>
<div class="skill-name">JavaScript</div>
<div class="skill-progress">
<span style="width: 90%;"></span>
</div>
<div class="skill_per">90%</div>
</li>
<li>
<div class="skill-name">PHP</div>
<div class="skill-progress">
<span style="width: 95%;"></span>
</div>
<div class="skill_per">95%</div>
</li>
<li>
<div class="skill-name">jQuery</div>
<div class="skill-progress">
<span style="width: 55%;"></span>
</div>
<div class="skill_per">55%</div>
</li>
</ul>
</div>
<div class="social">
<div class="title">
SOCIAL
</div>
<ul class="p-0">
<li class="d-flex">
<div class="icon">
<i class="fab fa-facebook-square" aria-hidden="true"></i>
</div>
<div class="data">
<p class="semi-bold">Facebook</p>
<p>Stephen@facebook</p>
</div>
</li>
<li class="d-flex">
<div class="icon">
<i class="fab fa-twitter-square" aria-hidden="true"></i>
</div>
<div class="data">
<p class="semi-bold">Twitter</p>
<p>Stephen@twitter</p>
</div>
</li>
<li class="d-flex">
<div class="icon">
<i class="fab fa-youtube-square" aria-hidden="true"></i>
</div>
<div class="data">
<p class="semi-bold">YouTube</p>
<p>Stephen@youtube</p>
</div>
</li>
<li class="d-flex">
<div class="icon">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</div>
<div class="data">
<p class="semi-bold">Linkedin</p>
<p>Stephen@linkedin</p>
</div>
</li>
<li class="d-flex">
<div class="icon">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</div>
<div class="data">
<p class="semi-bold">Linkedin</p>
<p>Stephen@linkedin</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-8 p-0">
<div class="resume-right">
<div class="about-me borderb mb-4">
<div class="title">
About Me
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis illo fugit officiis distinctio culpa officia totam atque exercitationem inventore repudiandae?</p>
</div>
<div class="experience borderb mb-4">
<div class="title">
About Me
</div>
<ul>
<li>
<div class="date">2013 - 2015</div>
<div class="info">
<p class="semi-bold text-dark">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
</div>
</li>
<li>
<div class="date">2015 - 2017</div>
<div class="info">
<p class="semi-bold text-dark">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
</div>
</li>
<li>
<div class="date">2017 - Present</div>
<div class="info">
<p class="semi-bold text-dark">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
</div>
</li>
</ul>
</div>
<div class="experience borderb mb-4">
<div class="title">
Education
</div>
<ul>
<li>
<div class="date">2010 - 2013</div>
<div class="info">
<p class="semi-bold text-dark">Web Designing (Texas University)</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
</div>
</li>
<li>
<div class="date">2000 - 2010</div>
<div class="info">
<p class="semi-bold text-dark">Texas International School</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatibus!</p>
</div>
</li>
</ul>
</div>
<div class="hobby">
<div class="title">Hobby</div>
<ul class="p-0 d-flex justify-content-between">
<li><i class="fas fa-book" aria-hidden="true"></i></li>
<li><i class="fas fa-gamepad" aria-hidden="true"></i></li>
<li><i class="fas fa-music" aria-hidden="true"></i></li>
<li><i class="fab fa-pagelines" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
