In today’s digital age, having an online presence is crucial, especially when it comes to professional endeavors. One effective way to showcase your skills, experiences, and accomplishments is by creating a compelling curriculum vitae (CV). In this article, we are going to build a CV using HTML, and CSS. Later, we will host it on GitHub, a popular platform for version control and code hosting. So let’s dive in and unlock the power of HTML and GitHub to craft a standout CV that truly represents your capabilities and accomplishments.
Approach
- Link CSS in the HTML head section, creating a structured layout for the resume using div blocks.
- Utilize five div blocks within the left section for Image, Contact, Skills, Language & Hobbies, populating each with relevant data.
- Incorporate five div blocks within the right section for Name, Summary, Experience, Education & Project, utilizing list and table elements.
- Apply class names like (.left) and (.right) in the CSS file for background color and positioning, ensuring a cohesive design.
- Implement the display flex property in the body and grid for the entire page layout, optimizing responsiveness and visual appeal.
Example: In this example code, we are using the above approach.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="resume.css">
</head>
<body>
<div class="full">
<div class="left">
<div class="image">
<img src=
alt="gfg-logo"
style="width:100px;
height:100px;">
</div>
<div class="Contact">
<h2>Contact</h2>
<p>
<b>Email id:</b>xyz@gmail.com
</p>
<p>
<b>Mobile no :</b>1234567890
</p>
</div>
<div class="Skills">
<h2>Skills</h2>
<ul>
<li>
<b>Programming Languages :
Python, Java, C++</b>
</li>
<li>
<b>Frontend : HTML5, CSS3,
JavaScript, React</b>
</li>
<li>
<b>Backend : Node.js</b>
</li>
</ul>
</div>
<div class="Language">
<h2>Language</h2>
<ul>
<li>English</li>
<li>Hindi</li>
</ul>
</div>
<div class="Hobbies">
<h2>Hobbies</h2>
<ul>
<li>Playing cricket</li>
<li>Swimming</li>
</ul>
</div>
</div>
<div class="right">
<div class="name">
<h1>GeeksforGeeks</h1>
</div>
<div class="title">
<p>Web Developer</p>
</div>
<div class="Summary">
<h2>Summary</h2>
<p>
To secure a challenging position in a
reputable organization
to expand my learning knowledge and skill
</p>
</div>
<div class="Experience">
<h2>Experience</h2>
<h3>Abc webdev pvt ltd - Senior Web Developer</h3>
<p>January 2022 to Present</p>
<ul>
<li>
Actively engaged in web creative
design and development.
</li>
<li>
Designing project & planning
</li>
</ul>
<h3>Xyz webdev pvt ltd - junior web developer</h3>
<p>August 2021 to December 2021</p>
<ul>
<li>
Actively engaged in web creative
design and development.
</li>
<li>Designing project & planning</li>
<li>Working on designing</li>
</ul>
</div>
<div class="Education">
<h2>Education</h2>
<table>
<tr>
<th>University/college </th>
<th>Passing year </th>
<th>percentage/cgpa</th>
</tr>
<tr>
<td>xyz</td>
<td>2020</td>
<td>8.9</td>
</tr>
<tr>
<td>pqr</td>
<td>2018</td>
<td>89%</td>
</tr>
</table>
</div>
<div class="project">
<ul>
<li>
<h2>Project1</h2>
<p>
This project is based on html
& used React
</p>
</li>
<li>
<h2>Project2</h2>
<p>
This project is based on html
& used React
</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
* { margin: 0;
padding: 0;
box-sizing: border-box;
}body { background-color: rgb(253, 254, 255);
display: flex;
justify-content: center;
align-items: center;
}.full { width: 50%;
max-width: 1000px;
min-height: 100px;
background-color: rgb(245, 239, 231);
margin: 0px;
display: grid;
grid-template-columns: 2fr 4fr;
}.left {
position: initial;
background-color: rgb(126, 219, 231);
padding: 20px;
}.right {
position: initial;
background-color: rgb(162, 202, 206);
padding: 20px;
}.image, .Contact, .Skills, .Language, .Hobbies, .title, .Summary, .Experience, .Education, .project { margin-bottom: 30px;
}.h2 {
background-color: rgb(4, 96, 150);
} |
Output:
Now, our CV-building part is finished and we will host it on GitHub. The step-by-step process to host is given below:
Step 1: Open your GitHub profile & click on + sign on the left side, then create a new repository.
Step 2: Write a repository name, description & checkbox of add readme file then click on create a repository
Step 3: Click on Add file & upload files.
Step 4: Click on Choose your files & upload all files from your local device.
Step 5: Click on commit changes.
Step 6: Now your all codes are uploaded on Github now we create a link for this to access anywhere. Go to the setting icon and then just go to the pages section.
Step 7: A new page is opened and in this make source none to the main branch and save now your link is created and you can use it anywhere.