Introduction
Creating a resume in HTML and CSS is a fantastic way to showcase both your technical skills and creativity. Unlike a traditional Word document, a web‑based resume allows you to experiment with layouts, colors, and responsive design. In this project, I designed a resume using CSS Grid and Flexbox to organize content into two neat sections: a sidebar with personal details and a main area with career information. This approach not only makes the resume visually appealing but also demonstrates practical front‑end development skills.
Code Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-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: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.left{
display:flex;
flex-direction:column;
justify-content: space-around;
background-color: blueviolet;
color: white;
}
.right{
display:flex;
flex-direction: column;
justify-content: space-around;
padding:25px 15px;
}
h1{
text-align: center;
}
img{
height: 100px;
width:100px;
border-radius: 50px;
}
.profile-img{
display:flex;
justify-content: center;
}
ul{
margin-left: 30px;
}
table,th,td{
border:1px solid;
border-collapse:collapse;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="profile-img">
<img src="Screenshot 2026-06-04 184043.png" alt="avatar">
</div>
<h3>Contact</h3>
<hr>
<p>INDIA,CHENNAI</p>
<h3>vishwav2022@gmail.com</h3>
<p>Contact No:7418****</p>
<h3>SKILLS</h3>
<hr>
<ul>
<li>java fullstack</li>
<li>slenium testing</li>
<li>english higher typewriting</li>
<li>excel</li>
<li>python</li>
</ul>
<h3>STRNGTH</h3>
<hr>
<ul>
<li>good communication skills</li>
<li>focus and confident with postive attitude</li>
<li>good team player</li>
<li>self learning and self motivated person</li>
</ul>
<h3>Language</h3>
<hr>
<ul>
<li>Tamil</li>
<li>English</li>
</ul>
</div>
<div class="right">
<h1>Vishwa</h1>
<h2>CAREER OBJECTIVE</h2>
<hr>
<p>“Seeking an entry level position where I can apply my passion for coding and design to create engaging digital experiences and expand my technical expertise</p>
<h2>Personal Details</h2>
<hr>
<ul>
<li>Name:vishwa</li>
<li>Married:No</li>
<li>Hobbies</li>
<ul>
<li>Reading</li>
<li>games</li>
<li>Swimming</li>
</ul>
</ul>
<h2>ACADEMIC Qualification</h2>
<hr>
<table>
<thead>
<tr>
<th>Qualification</th>
<th>Board/University</th>
<th>School/College</th>
<th>Year of passing</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>10th</td>
<td>CBSE</td>
<td>velammal residential school</td>
<td>2020</td>
<td>80%</td>
</tr>
<tr>
<td>12th</td>
<td>CBSE</td>
<td>velammal rseidential school</td>
<td>2022</td>
<td>83%</td>
</tr>
<tr>
<td>Btech</td>
<td>kalasalingam university</td>
<td>kare</td>
<td>2022</td>
<td>80%</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Code Breakdown
Container Layout
.container {
height:100vh;
width:65vw;
margin:auto;
display: grid;
grid-template-columns: 1fr 2fr;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
Uses CSS Grid to split the page into two columns:
Left (1 part) → Sidebar with contact, skills, strengths.
Right (2 parts) → Main content like career objective, academics.
box-shadow adds a professional card‑like effect.
Left Section (Sidebar)
.left {
display:flex;
flex-direction:column;
justify-content: space-around;
background-color: blueviolet;
color: white;
}
Sidebar styled with Flexbox for vertical alignment.
Contains profile image, contact info, skills, strengths, and languages.
Purple background with white text makes it stand out.
Right Section (Main Content)
.right {
display:flex;
flex-direction: column;
justify-content: space-around;
padding:25px 15px;
}
Holds the career objective, personal details, and academic qualifications.
Padding ensures readability and spacing.
Profile Image
img {
height: 100px;
width:100px;
border-radius: 50px;
}
Circular profile picture using border-radius.
Centered with .profile-img { display:flex; justify-content:center; }.
Lists and Tables
Skills, Strengths, Languages, Hobbies → displayed with <ul> lists.
Academic Qualification → structured with <table> for clarity.
border-collapse:collapse; ensures neat table lines.
Output
Top comments (0)