Resume
A resume is a 1–2 page formal document that summarizes your skills, experience, and achievements when you’re applying for a job, internship, or other career opportunity. Resumes are divided into sections that categorize different aspects of your professional background (e.g., work history, technical skills, and education). Each resume section includes a bold heading and lists of concise phrases.
How to create ?
Here we use HTML to create a webpage with full of our required contents and our personal details and use CSS for styling the webpage to make a perfect resume.
<div>- this tag is one of the main tags in HTML and it used to create container or layout of the webpages.<div class="container"- Here div class refers to class name, we take example as a name = "container". In our resume i plan to split two parts of the resume using<div>.<div>- inside the elements in<div>are called Attributes.Viewport Height -
vh, it is used to view the height of the box or anything we want to check the height means use this tag.Viewport Width -
vw, it is used to view the width of the box or anything we want to check the width means use this tag.Percentage -
%, it is used to size or position elements and is apply basis on parent.vh&vw- is applied basis on your screen.Grid - CSS Grid is a two-dimensional layout system that allows you to arrange elements in rows and columns.
display: grid;- this tag is used to display the grid layout in the webpages.grid-template-column: 1fr 2fr;- it is used to divide columns by required framesfr.grid-template-row: 1fr 2fr;- it is used to divide rows by required framesfr.<img src=" " alt = " ">- it used to upload and display the images in webpages, inside the " " we are required to add image address link and if that fails means we can use alt = " " in that we can add alternate image address link.display: flex;- it is used to make the elements flexible and its default direction is row.justify-content: center;- it is used to move the contents to center.flex-direction: column;- it is used to make the elements flexible to column direction.align-items: center- it works on opposite side of this tagjustify-content: center;direction.padding: 10px 10px;- in this first px refers to top & botttom and second px refers to left & right sides.<hr>- it gives the horizontal line to the web pages.justify-content: space-between;- it gives spaces between the sections or contents.<table>- it consists of data and meta data, inside the table we use some tags to create the tables.
<thead>
<tbody>
<tr>
<th>
<td>
<tbody>
<thead>
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.container{
height:100vh;
width:65vw;
margin:auto;
display:grid;
grid-template-columns:1fr 2fr;
box-shadow:0 0 10px rgba(0,0,0,0.1);
}
.left{
display:flex;
flex-direction:column;
justify-content:space-between;
background-color:moccasin;
padding:10px;
}
.right{
padding:10px 10px;
display:flex;
flex-direction:column;
justify-content:space-between;
}
img{
height:100px;
width:100px;
border-radius:50px;
display:flex;
justify-content:center;
}
h1{
text-align:center;
}ul{
margin-left:25px;
}
.profile{
display:flex;
justify-content:center;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="profile">
<img src="https://th.bing.com/th/id/OIP.BVqRl5JkZkoe4SuUU2ENggHaHa?w=167&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
</div>
<h2>Contact</h2>
<hr>
<p>Sivagangai, TamilNadu</p>
<p>Phone: 8838242470</p>
<p>Email: kavinloyola777@gmail.com</p>
<h2>Skills</h2>
<hr>
<ul>
<li>Programming: Java</li>
<li>Web development: HTML, CSS</li>
<li>Database: MySQL</li>
</ul>
<h2>Strengths</h2>
<hr>
<ul>
<li>Problem-solving skills</li>
<li>Good communication Skills</li>
<li>Team player</li>
<li>Adaptable to new technologies and environments</li>
</ul>
<h2>Language</h2>
<hr>
<ul>
<li>Tamil</li>
<li>English</li>
</ul>
</div>
<div class="right">
<h1>Kavin Loyola S</h1>
<h2>Summary</h2>
<hr>
<p>Entry-level Computer Science Engineer with hands-on experience in Software development, Machine learning and Database-driven applications with strong problem solving and debugging skills. Eager to learn and contribute in a fast-paced environment.</p>
<h2>Education</h2>
<hr>
<h3>Bachelor of Technology - Computer Science and Engineering</h3>
<p>Kalasalingam Academy of Research and Education (2022 - 2026)</p>
<p>Location: Srivilliputhur, Tamil Nadu</p>
<h2>Projects</h2>
<hr>
<h3>Bark based tree identification & CO2 Absorption estimation</h3>
<ul>
<li>Built a ResNet50V2 deep learning model to identify Indian tree species from bark images.</li>
<li>Developed an app displaying species, Thinai region, CO₂ absorption(kg/day-year), and interactive charts.</li>
</ul>
<h3>Portfolio Website</h3>
<ul>
<li>Designed and developed a responsive portfolio website to showcase my projects and skills.</li>
<li>Implemented using HTML & CSS ensuring cross-browser compatibility.</li>
</ul>
</div>
</div>
</body>
</html>
Output
Top comments (0)