How to make a resume with HTML and Bootstrap
In today’s competitive job market, having an impressive and visually appealing resume can make a significant difference in capturing the attention of employers. While traditional paper resumes are still widely used, creating a digital resume using HTML and Bootstrap can provide you with a dynamic and interactive way to showcase your skills and qualifications. In this article, we will guide you through the process of creating a professional resume using HTML and leveraging the power of Bootstrap’s responsive design framework.
Why Use HTML and Bootstrap for Your Resume?
HTML (Hypertext Markup Language) is the standard markup language for creating web pages. By using HTML, you can structure the content of your resume in a semantic and meaningful way, making it easier for search engines to index and potential employers to read.
Bootstrap, on the other hand, is a popular CSS (Cascading Style Sheets) framework that simplifies the process of designing responsive and mobile-friendly websites. By incorporating Bootstrap into your resume, you can ensure that it looks great on various devices, such as desktops, tablets, and smartphones, providing a seamless user experience.
Setting Up the Project
Before diving into creating your resume, you need to set up your project environment. Follow these steps:
- Create a New HTML File: Open a text editor of your choice and create a new file. Save it with a
.htmlextension (e.g.,resume.html). - Include Bootstrap: In the
<head>section of your HTML file, add the following code to include Bootstrap’s CSS and JavaScript files:
Final Code Below
<!DOCTYPE html>
<html>
<head>
<title>Curriculum vitae</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<style type="text/css">
@media print {
.hide-on-print {
display: none;
}
}
</style>
</head>
<body >
<div class="container">
<div class="text-center sticky-button">
<button onclick="window.print()" class="btn btn-success ">Print or Save as PDF CV</button>
</div>
<h2 class="text-center m-2">KRISHNA KUMAR SINGH</h2>
<h4 class="text-center m-0" >Software Enginner</h4>
<br>
<h6 class="text-center m-0"><a href="tel:+919540434299">(+91)- 95404 434299</a> | <a href="emalto:singhkrishna512@gmail.com">singhkrishna512@gmail.com</a> | <a href="https://www.linkedin.com/in/krishna-singh-rajput/">linkedin.com/in/Krishna Singh </a> | <a href="https://www.linkedin.com/in/krishna-singh-rajput/">github.com/</a> | <a href="https://www.c-sharpcorner.com/members/krishna-rajput/blogs">Articles C# Corner</a> </h6>
<br>
<hr>
<div class="row">
<div class="col">
<h4 class="p-3 mb-2 bg-light text-dark">Technical Skills</h4>
<p><strong>Languages:</strong> PHP, Python, JavaScript, HTML, CSS, Bootstrap</p>
<p><strong>Frameworks:</strong> Laravel, CMS, CI, WordPress, .NET </p>
<p> <strong>Developer Tools:</strong> Postman, MySQL Workbench, VS Code, IntelliJ, Github</p>
<p><strong>Libraries:</strong> Collections, HTTP Libraries</p>
<p><strong>Databases:</strong> SQL SERVER, MySQL, MongoDB</p>
</div>
<div class="col">
<h4 class="p-3 mb-2 bg-light text-dark">Education</h4>
<ul>
<li>10TH PASSED FROM P.H.E, SCHOOL, BIHAR (2006) 68%.</li>
<li>12TH PASSED FROM T.N.B, COLLAGE, BHAGALPUR (2007-2009) 65.6%.</li>
<li>BACHELOR OF COMPUTER APPLICATION (BCA) FROM SHOBHIT UNIVERSITY ,MEERUT, (2012-2014), 65%.</li>
<li>MASTER OF COMPUTER APPLICATION (MCA) FROM AMITY UNIVERSITY ,NOIDA, (2016-2018), 7.4 CGPA.</li>
<li>GNIIT SOFTWARE ENGINEERING GNIIT PROGRAM FROM NIIT GURUGRAM</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<h4 class="p-3 mb-2 bg-light text-dark">Experience</h4>
<h6 >Zeeve Deeptech PVT LTD-(Software Engineer) | OCT, 2022 - Till Now </h6>
<ul>
<li>Developed and designed education website and ERP application.</li>
<li>Maintain existing website .Net CMS</li>
<li>Web hosting and server Managment</li>
<li>Custom plugin and theme development</li>
<li>Worked with Laravel Website </li>
<li>Design and development LMS with Moodle (Open source Framework)</li>
<li>Convert Figma Design WordPress pages with elementors(page builder)</li>
<li>ZOHO CRM integrations</li>
<li>Google ads UTM parameters integration with wordpress website</li>
<li>Integration with third party APIs</li>
<li>GIThub </li>
</ul>
<h6 >IMPRESSIONANDYOU-(WEBSITE DEVELOPER) | JAN 2019 - JULY 2020 </h6>
<ul>
<li>Developed and designed ecommerce website single vendor and multivendor.</li>
<li>Integration 3rd party API.</li>
<li>Managed backend server and complete website.</li>
<li>Web hosting and server Managment</li>
<li>Custom plugin and theme development</li>
<li>Work with single vendor and multivendor ecommerce website </li>
</ul>
<h6 >K.R. MANGALAM PVT LTD-(PHP DEVELOPER) | JUL, 2020 - SEP, 2022 </h6>
<ul>
<li>Developed and designed education website and ERP application.</li>
<li>Maintain existing website .Net CMS</li>
<li>Web hosting and server Managment</li>
<li>Custom plugin and theme development</li>
<li>Worked with Laravel Website </li>
<li>Design and development LMS with Moodle (Open source Framework)</li>
</ul>
</div>
<div class="col">
<h4 class="p-3 mb-2 bg-light text-dark">Projects</h4>
<ul>
<li>Highest Views & Downloaded my Article in C-sharp corner Community website. <a href="https://www.c-sharpcorner.com/members/krishna-rajput"> Articles Here</a></li>
<li>GDG Gurugram , Speaker</li>
<li>Trained 50+ students online Session Web development</li>
</ul>
<br>
<h4 class="p-3 mb-2 bg-light text-dark">Achievements and Co-Curricular Activities</h4>
<ul>
<li>Highest Views & Downloaded my Article in C-sharp corner Community website. <a href="https://www.c-sharpcorner.com/members/krishna-rajput"> Articles Here</a></li>
<li>GDG Gurugram , Speaker</li>
<li>Trained 50+ students online Session Web development</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
Below Final Output
