How To Make A resume in 2022 | Create Resume
What is a Resume?
Resumes tell the employer about your experiences, skills and work history. Use your resume to highlight items that indicate you are a good worker, are qualified for the position and bring desirable skills to the job. If you are a student and have little or no previous job experiences, enhance information about your school and community activities.
A resume can be defined as a document that is prepared and used by a person to showcase their background skills, and achievements. Usage of a resume can be for different reasons but the primary reason to prepare a resume is to establish new employment. A typical resume can be defined as a wherein brief description of the applicable job experience and information about the educational information is mentioned in detail. It also includes a cover letter and an application letter of employment which helps the potential employer to screen the number of applicants which is also followed by a one-to-one interview.
How To Make a Resume Using HTML & CSS Only
Important Key Elements of a Resume
Personal Information
Objective
Education
Work and Related Experience
Awards and Honors
Activities/Hobbies
Skills
Other Considerations
In this article I Will teach you how to make attractive resume design using html and CSS. I will provide you all source code in this article. when you go to interview the first impression is how to looks your resume in seeing. all things your resume is properly manage or not. when your resume is ok then your first impression is very good. so, in this article I will teach you how to make a creative and unique resume design using html and CSS only.
so, let’s start our project. first step you can make a folder that name is blue-resume. you can change name according to your need. then you make two another’s folder inside of blue-resume folder. first one is CSS folder and second one is image folder. CSS folder contain all CSS file. and image folder contain all image file. after then you can copy the below code your html document.
Top 10 Resume Templates in 2022
HTML Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Resume Design</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="resume"> <div class="left"> <br> <img src="image\profile.png" class="profile"> <p class="left-p">Hello, I am</p> <h2 class="name">Manoj <strong>Adhikari</strong> </h2> <p class="p1">Web Designer/ Developer</p> <br> <h2 class="heading-1"><i class="fa fa-user-o"></i> Contact</h2> <p class="com-p"><i class="fa fa-phone"></i> 0123-3443-4544</p> <p class="com-p"><i class="fa fa-envelope"></i> demo@gmail.com</p> <p class="com-p"><i class="fa fa-map-o"></i> street 234 your address</p> <p class="com-p"><i class="fa fa-globe"></i> www.demo.com</p> <br> <h2 class="heading-1"><i class="fa fa-comments-o"></i> Language</h2> <p class="com-p">Hindi</p> <p class="com-p">English</p> <br> <h2 class="heading-1"><i class="fa fa-archive"></i> Hobbies</h2> <p class="com-p">Cricket</p> <p class="com-p">Cycling</p> <p class="com-p">Reading</p> <p class="com-p">Writing</p> <br> </div> <div class="right"> <div class="sect-one"> <p class="label-1">Education</p> <div class="circle2"></div> <div class="circle"></div> <div class="content"> <br> <p class="p4"><span class="span1">2013-2015</span><span class="timeline"></span><span class="span2">CBSE Board Delhi</span></p><br> <p class="p4"><span class="span1">2013-2015</span><span class="timeline"></span><span class="span2">CBSE Board Delhi</span></p><br> <p class="p4"><span class="span1">2013-2015</span><span class="timeline end"></span><span class="span2">CBSE Board Delhi</span></p> </div> <div class="icon"> <i class="fa fa-mortar-board icon-1"></i> </div> </div> <div class="sect-two"> <p class="label-1 label-2">Experience</p> <div class="circle"></div> <div class="content"> <br> <p class="p4"><span class="span1">2016-2017</span><span class="timeline"></span><span class="span2">Company Name</span></p><br> <p class="p4"><span class="span1">2017-2019</span><span class="timeline"></span><span class="span2">Company Name</span></p><br> <p class="p4"><span class="span1">2019-2022</span><span class="timeline end"></span><span class="span2">Company Name</span></p> </div> <div class="icon"> <i class="fa fa-suitcase icon-1" style="color: #91c917;"></i> </div> </div> <div class="sect-three"> <p class="label-1 label-3">skills</p> <div class="circle"></div> <div class="content"> <br> <div style="margin-top: 20px;"></div> <p class="p5" style="text-align: left;">HTML <div class="span-all"> <span class="circle-span"></span> <span class="circle-span1"></span> <span class="circle-span2"></span> <span class="circle-span3"></span> <span class="circle-null"></span> </div></p> <div class="clearfix"></div> <p class="p5" style="text-align: left;">CSS <div class="span-all"> <span class="circle-span"></span> <span class="circle-span1"></span> <span class="circle-span2"></span> <span class="circle-span3"></span> <span class="circle-null"></span> </div></p> <div class="clearfix"></div> <p class="p5" style="text-align: left;">JQUERY <div class="span-all"> <span class="circle-span"></span> <span class="circle-span1"></span> <span class="circle-span2"></span> <span class="circle-span3"></span> <span class="circle-null"></span> </div></p> <div class="clearfix"></div> <p class="p5" style="text-align: left;">JAVASCRIPT <div class="span-all"> <span class="circle-span"></span> <span class="circle-span1"></span> <span class="circle-span2"></span> <span class="circle-span3"></span> <span class="circle-null"></span> </div></p> </div> <div class="icon"> <i class="fa fa-desktop icon-1" style="color: #f50545;"></i> </div> </div> <div class="sect-four"> <p class="label-1 label-4">certification</p> <div class="circle"></div> <div class="content"> <br> <div style="margin-top: 40px;"></div> <p class="p6"><span class="circle-null1"></span>Name of Certification<br> <span class="span3">Lorem Dummy text</span></p> <p class="p6"><span class="circle-null1"></span>Name of Certification<br> <span class="span3">Lorem Dummy text</span></p> </div> <div class="icon"> <i class="fa fa-certificate icon-1" style="color: #69009d;"></i> </div> </div> <div class="sect-five"> <p class="label-1 label-5">Achievements</p> <div class="content"> <div class="circle1"></div> <br> <p class="p4"><span class="span1">2016-2017</span><span class="timeline"></span><span class="span2">Award Name</span></p><br> <p class="p4"><span class="span1">2017-2019</span><span class="timeline"></span><span class="span2">Award Name</span></p><br> <p class="p4"><span class="span1">2019-2022</span><span class="timeline end"></span><span class="span2">Award Name</span></p> </div> <div class="icon"> <i class="fa fa-trophy icon-1" style="color: #05a3fa;"></i> </div> </div> </div> <div class="clearfix"></div> </div> </body> </html>
Copy the css code in below
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Mukta&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200&display=swap');
:root{
--lightred:#001729;
--darkred:#08243b;
--white:#ffffff;
--lightwhite: #dfdfdf;
--black:#010103;
}
body{
background: linear-gradient(45deg, #9a9a9a, #808080);
font-family: 'Mukta', sans-serif;
}
.left-p{
font-size: 19px;
background: var(--lightred);
padding: 0px 0px;
text-align: center;
}
.resume{
width: 700px;
background: var(--white);
margin: 50px auto;
position: relative;
}
.clearfix{clear: both;}
.left{
width: 200px;
float: left;
padding: 25px;
color: var(--white);
background: var(--darkred);
}
.name{font-size: 24px; text-align: center; text-transform:uppercase; font-weight: 100;
letter-spacing: 2px; margin-bottom: 0px;}
.p1{color: var(--lightwhite); text-align: center; margin-top: -5px; font-size: 14px;}
.right{width: 450px;float: left;text-align: center;overflow: hidden;}
.profile{width: 93%;
border-radius: 50%;
border: 7px solid white;}
.heading-1{
background: #001729;
margin: 0px -25px;
padding-left: 25px;
margin-bottom: 15px;
text-transform: uppercase;
font-weight: 200;
}
.com-p{margin: 0px; color:var(--lightwhite);}
.sect-one, .sect-two, .sect-three,.sect-four,.sect-five {position: relative; height: 195px;}
.label-1{
background: #f87701;
color: white;
position: absolute;
width: 41%;
padding: 5px;
transform: rotateZ(270deg);
left: -81px;
top: 67px;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 3px;
font-weight: 600;
}
.label-2{
background: #91c917;
}
.label-3{
background: #f50545;
}
.label-4{
background: #69009d;
}
.label-5{
background: #05a3fa;
}
.content{
width: 350px;
float: left;
height: 190px;
}
.icon{
width: 100px;
float: left;
text-align: center;
margin-top: 70px;
}
.icon-1{
font-size: 51px!important;
color: #f87701;
transform: rotateY(180deg);
}
.circle{
width: 50px;
height: 50px;
background: #ffffff;
position: absolute;
bottom: -27px;
z-index: 9;
left: 0px;
border-radius: 0px 36px 36px 0px;
transform: rotateZ(182deg);
}
.circle1{
width: 50px;
height: 50px;
background: #ffffff;
position: absolute;
bottom: -27px;
z-index: 9;
left: 0px;
border-radius: 0px 36px 36px 0px;
transform: rotateZ(182deg);
}
.circle2{
width: 50px;
height: 50px;
background: #ffffff;
position: absolute;
top: -27px;
z-index: 9;
left: 0px;
border-radius: 0px 36px 36px 0px;
transform: rotateZ(182deg);
}
.p4{padding-left: 70px; position: relative;}
.timeline{
width: 10px;
height: 10px;
background: transparent;
position: absolute;
left: 180px;
border-radius: 10px;
border: 3px solid #001729;
top: 5px;
}
.timeline::after{
content: '';
position: absolute;
height: 32px;
width: 3px;
background: #08243b;
top: 11px;
left: 3.5px;
}
.end::after{
background: transparent;
}
.span1{float: left;}
.span2{float: right;}
.clearfix{clear: both;}
.p5{padding-left: 70px; position: relative; display: inline-block;float: left;
margin: 0px; width: 80px;}
.span-all{
width: 137px;
height: 20px;
float: left;
margin-top: 5px;
position: relative;
margin-left: 62px;
}
.circle-span{
background: #08243b;
height: 15px;
width: 15px;
position: absolute;
border-radius: 10px;
left: 13px;
}
.circle-span1{
background: #08243b;
height: 15px;
width: 15px;
position: absolute;
border-radius: 10px;
left: 36px;
}
.circle-span2{
background: #08243b;
height: 15px;
width: 15px;
position: absolute;
border-radius: 10px;
left: 59px;
}
.circle-span3{
background: #08243b;
height: 15px;
width: 15px;
position: absolute;
border-radius: 10px;
left: 82px;
}
.circle-null{
background: #ffffff;
height: 11px;
width: 11px;
position: absolute;
border-radius: 10px;
left: 105px;
border: 2px solid #001729;
}
.circle-null1{
background: #ffffff;
height: 11px;
width: 11px;
position: absolute;
border-radius: 10px;
left: 70px;
border: 2px solid #001729;
}
.p6{
vertical-align: text-top;
line-height: 17px;
text-align: left;
padding-left: 97px;
}
.span3{
font-size: 12px;
color: #001729;
}if you have any issue then you can also watch video tutorial
