Create your resume builder using HTML, CSS, and JavaScript with this detailed guide. Complete with source code and step-by-step instructions.
Table of Contents
In today's digital age, having a well-crafted resume is essential for securing that dream job. However, the process of creating and formatting a professional resume can be a daunting task. This is where a custom resume builder comes to the rescue. Imagine having the ability to design and generate your CV with just a few clicks, all within the confines of your web browser.
In this comprehensive guide, we will walk you through creating your very own resume builder using the dynamic trio of web development: HTML, CSS, and JavaScript. Whether you're an aspiring web developer looking to enhance your skills or someone who wants to simplify the resume-making process, this step-by-step tutorial is designed for you.
We'll provide you with the knowledge to construct a resume builder from the ground up and offer you the complete source code for your reference. With this, you'll have the power to customize and tailor your resume builder to meet your unique requirements.
So, let's embark on this exciting web development journey and resume crafting. By the end of this guide, you'll be equipped with the skills to create a personalized resume builder that can help you, and others, put your best professional foot forward. Let's get started!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our resume builder.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
1. <!DOCTYPE html>: This declaration at the very beginning of the HTML document specifies the document type and version being used, which is HTML5 in this case.
2. <html>: The root element that contains the entire HTML document.
3. <head>: This section contains metadata about the document and information for browsers. Inside the <head> element, you have:
- <meta charset="utf-8">: Specifies the character encoding for the document as UTF-8, which is a widely used character encoding for handling various character sets.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Suggests to Internet Explorer to use the latest rendering engine available.
- <title>Resume/CV Builder</title>: Sets the title of the web page to "Resume/CV Builder," which appears in the browser's title bar or tab.
- <meta name="description" content="">: Provides a brief description of the page content. The content attribute is empty in this case, but it can be filled with an actual description.
- <meta name="viewport" content="width=device-width, initial-scale=1">: Defines the viewport settings for responsive web design. It ensures that the webpage adapts to the width of the device's screen.
- <link>: These <link> elements are used to include external CSS stylesheets. One links to the Bootstrap CSS framework, and the other links to a custom stylesheet named "styles.css."
4. <body>: The main content of the web page is placed within the <body> element. It contains various elements, including buttons, forms, and sections for building a resume.
- <div class="nav">: This <div> represents a navigation bar at the top of the page. It contains buttons for actions like downloading, saving, and returning to the home page.
- <div class="resume" id="resume">: This <div> represents the main content area for building a resume. Inside it, there's a <section> element with the id "print," which presumably contains the resume content.
- Within the "resume" section, there are various sub-sections and elements for entering and displaying information related to a person's resume. These include name, contact details, skills, languages, achievements, interests, profile, education, and a customizable "new section."
5. <script>: These <script> elements are used to include JavaScript files for interactivity. One script includes jQuery, a popular JavaScript library. The second script includes html2pdf.js, a library for generating PDFs from HTML content. The third script includes a custom JavaScript file named "script.js," which contains functions and logic for handling user interactions and resume generation.
This is the basic structure of our resume builder using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the resume builder is in place, the next step is to add styling to the resume builder using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our builder.
Let's break down what each part of the code does:
1. @import statements:
- These statements import external CSS stylesheets from Google Fonts. They load the "Raleway" and "Barlow" fonts with specific font weights and display options.
2. * selector:
- This selector applies styles to all elements on the page.
- It sets margin and padding to 0%, font weight to 500, and font size to 14px for all elements.
3. body selector:
- This selector styles the <body> element.
- It sets the background to a linear gradient, centers content both vertically and horizontally using display: grid and place-items: center, and changes the font weight to 450 and opacity to 1.
4. .none and .resume selectors:
- These selectors are used to style elements with the class .none and .resume, respectively.
- .none sets the display property to none, effectively hiding elements with this class.
- .resume styles elements with a specific width and adds a box shadow.
5. #print selector:
- This selector styles an element with the ID print.
- It sets a white background, padding, and a fixed height.
6. .head, .main, .contacts, and .line selectors:
- These selectors style different sections of the page's header.
- .head and its children define a grid layout for the header.
- .main styles the main section of the header with different fonts and styles for the name and post.
- .contacts aligns and styles the contact information.
- .line adds a horizontal line with a gray background.
7. .mainbody, .border, .title, .skill, .button, .language, .edublock, and .education-head selectors:
- These selectors style various elements within the main body of the page.
- .mainbody defines a grid layout for the main content area.
- .border creates a vertical line with a gray background.
- .title styles section titles with a green-yellow bottom border.
- .skill, .button, .language, and .edublock style different content sections.
- .education-head styles the headings within the education section.
8. .navbtn and .input-checkbox selectors:
- These selectors style navigation buttons and input checkboxes.
- .navbtn creates circular buttons with a border and shadow and adjusts their positioning.
- .input-checkbox adds some margin to checkboxes.
This will give our resume builder an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap');
*{
margin: 0%;
padding: 0%;
font-weight: 500;
font-size: 14px;
}
body{
background:linear-gradient(135deg, #E3E3E3 0%,#9a9a9a 100%);
display: grid;
place-items: center;
font-weight: 450;
opacity: 1;
}
.none
{
display: none;
}
.resume
{
margin-top: 20px;
width: 800px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
#print
{
background-color: #fff;
padding: 30px 50px;
height: 1120px;
}
.head
{
display: grid;
grid-template-columns: 3fr 1.5fr;
}
.head .main .name
{
font-size: 55px;
font-family: 'Raleway', sans-serif;
}
.head .main span:nth-child(2)
{
color: rgb(100, 100, 100);
font-size: 55px;
font-family: 'Raleway', sans-serif;
margin-left: 5px;
}
.head .main .post
{
font-family: 'Barlow', sans-serif;
}
.head .contacts
{
text-align: right;
padding-top: 7px;
}
.head .contacts .content
{
font-weight: 500;
padding-right: 5px;
}
.head .contacts .symbol
{
margin-right: 5px;
font-size: 15px;
width: 17px;
height: 17px;
}
.line
{
height: 0.5px;
background-color: rgb(87, 87, 87);
margin: 25px 0;
margin-bottom: 50px;
}
.mainbody
{
display: grid;
grid-template-columns: 10fr 1fr 17fr;
height: 900px;
}
.mainbody .border
{
background-color: rgb(87, 87, 87);
width: 3px;
opacity: 2;
}
.mainbody .rightside
{
padding-left: 15px;
}
.title
{
font-weight: 700;
font-size: 18px;
border: none;
padding-bottom: 3px;
border-bottom: 2px greenyellow solid;
}
.skill
{
margin-bottom: 6px;
}
button
{
margin: 15px 0;
}
.language
{
margin-bottom:6px;
}
.language span:nth-child(odd)
{
font-weight: 700;
}
.edublock{
margin-bottom: 10px;
}
.edublock .head
{
font-weight: 700;
font-size: 17px;
}
.navbtn
{
position: fixed;
top: 40%;
left: 4%;
transform: translate(-40%,-4%);
height: 60px;
width: 60px;
border-radius: 50%;
border:#fff 2px solid;
transition: 300ms ease-in-out;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
.navbtn:nth-child(2)
{
top: 50%;
left: 4.4%;
transform: translate(-50%,-4.4%);
}
.navbtn:nth-child(3)
{
top: 60%;
left: 4.8%;
transform: translate(-60%,-4.8%);
}
.navbtn:hover
{
background-color: black;
color: #fff;
border: #000 2px solid;
height: 65px;
width: 65px;
}
.input-checkbox{
margin-right: 10px;
}
.education-head{
font-weight: 700;
font-size: 17px;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
Let's break down the code section by section to understand its functionality:
1. printpdf Function:
- This function is responsible for generating a PDF document from the content of a resume section.
- It first retrieves the resume content using document.getElementById("resume").
- It hides all the buttons and input checkboxes in the "print" section by adding a CSS class called "none" to them.
- Then, it removes the "none" class from the buttons and input checkboxes to make them visible again.
- It defines PDF generation options using the pdfOptions object.
- Finally, it uses the html2pdf library to convert the resume content to a PDF document with the specified options.
2. addedu, remedu, addskill, remskill, addLang, remLang, addAch, remAch, addInt, remInt, addsec, remsec Functions:
- These functions are responsible for adding and removing various sections (education, skills, languages, achievements, interests, and new sections) to and from the resume.
- Each function creates a new HTML element representing a section and appends it to the appropriate container (e.g., "education," "skills," etc.).
- Input checkboxes are added to each section to allow users to select sections for deletion.
- The rem... functions handle the removal of selected sections and provide feedback to the user through alerts if no sections are selected or if there are no sections to delete.
- The saveresume function updates the value of a hidden input field (info) with the current content of the "print" section. This is used to save the resume content on the server or perform other operations.
3. maxNewSection Variable:
- This variable is used to keep track of the number of "NEW SECTION" elements added. It is initialized to 1 and incremented when a new section is added. There is a limit of 2 "NEW SECTION" elements that can be added.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
function printpdf() {
var content = document.getElementById("resume");
const allButtons = document.querySelectorAll("#print button");
allButtons.forEach(button => {
button.classList.add("none");
});
let allInputCheckboxes = document.querySelectorAll(".input-checkbox");
allInputCheckboxes.forEach(input => {
input.classList.add("none");
})
allButtons.forEach(button => {
button.classList.remove("none");
})
allInputCheckboxes.forEach(input => {
input.classList.remove("none");
})
html2pdf(content, {
html2canvas: { scale: 1, logging: true, dpi: 500 }
});
}
function addedu() {
const head = document.createElement('div');
document.getElementById("education").appendChild(head);
head.innerHTML = ('<div class="edublock"><span><input type="checkbox" class="input-checkbox"></span><span class="education-head" contenteditable="true">YOUR DEGREE</span><div ><span contenteditable="true">Institute name</span> - <span contenteditable="true">Passing Year</span></div></div>');
saveresume();
}
function remedu(event) {
let val = 0;
let empty = true;
const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the required field!")
}
saveresume();
}
function addskill() {
const head = document.createElement('div');
document.getElementById("skills").appendChild(head);
head.innerHTML = ('<div class="skill"><span><input type="checkbox" class="input-checkbox"></span><span><i class="fas fa-chevron-circle-right"></i></span> <span contenteditable="true">write your skill here</span></div>');
saveresume();
}
function remskill(event) {
let val = 0;
const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the required field!")
}
saveresume();
}
function addLang() {
const head = document.createElement('div');
document.getElementById("languages").appendChild(head);
head.innerHTML = ('<div class="language"><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">LANGNAME</span> - <span contenteditable="true">level u know</span></div>');
saveresume();
}
function remLang(event) {
let val = 0;
const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the required field!")
}
saveresume();
}
function addAch() {
const head = document.createElement('div');
document.getElementById("achievement").appendChild(head);
head.innerHTML = ('<div class="achieve" ><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">Write your achievement</span></div>');
saveresume();
}
function remAch(event) {
let val = 0;
const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the required field!")
}
saveresume();
}
function addInt() {
const head = document.createElement('div');
document.getElementById("interest").appendChild(head);
head.innerHTML = ('<div class="achieve" ><span><input type="checkbox" class="input-checkbox"></span><span contenteditable="true">Write interest</span></div>');
saveresume();
}
function remInt(event) {
let val = 0;
const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
array.forEach(element => {
if (element.checked === true) {
val = 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the required field!")
}
saveresume();
}
let maxNewSection = 1;
function addsec() {
if (maxNewSection < 2) {
const head = document.createElement('div');
document.getElementById("newsec").appendChild(head);
if (maxNewSection === 0) {
head.innerHTML = ('<div><span><input type="checkbox" class="input-checkbox"></span><span class="title" contenteditable="true">NEW SECTION</span><br><br><div contenteditable="true">This is the description part of your new section. Try to stay within limit and write something which has less than 400 characters. The spaces and symbols you use will also be included so use them for an indentation effect.</div></div>');
}
else {
head.innerHTML = ('<div><br><br><span><input type="checkbox" class="input-checkbox"></span><span class="title" contenteditable="true">NEW SECTION</span><br><br><div contenteditable="true">This is the description part of your new section. Try to stay within limit and write something which has less than 400 characters. The spaces and symbols you use will also be included so use them for an indentation effect.</div></div>');
}
maxNewSection = maxNewSection + 1;
}
else {
alert("Atmost 2 NEW SECTION can be added!")
}
saveresume();
}
function remsec(event) {
let val = 0;
const allInputCheckboxes = event.target.parentElement.getElementsByClassName("input-checkbox");
const array = Array.from(allInputCheckboxes);
if (array.length === 0) {
alert("No fields are present to be deleted!")
}
else {
console.log(array);
array.forEach(element => {
if (element.checked === true) {
val = 1;
maxNewSection = maxNewSection - 1;
element.parentElement.parentElement.remove();
}
})
if (val === 0) alert("Please select the checkboxes to delete the required field!")
}
saveresume();
}
function saveresume() {
var sec = document.getElementById("print");
value1 = sec.innerHTML;
var info = document.getElementById("custinfo");
info.value = value1;
}Final Output:
See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.
Conclusion:
Congratulations, you've reached the final step of creating a resume builder from scratch using HTML, CSS, and JavaScript. We hope this comprehensive guide has equipped you with the technical know-how and ignited your creativity in web development.
In this guide, we've covered the importance of a well-structured resume and introduced you to the concept of a resume builder. You've learned how to set up your development environment, create the HTML structure, style it with CSS, and add interactivity using JavaScript. We've discussed the critical aspects of testing and debugging and provided you with a thorough overview of the complete source code.
Now, armed with your newfound knowledge and the source code at your disposal, you can craft a resume builder that suits your unique needs or even launch your own web-based CV generator for others to benefit from.
But remember, web development is an ever-evolving field. This project is just the beginning of your journey. There are endless possibilities to explore, from enhancing the user interface to integrating advanced features like real-time preview and export options.
As you continue to develop your skills and explore new horizons, don't forget that the most valuable resume is the one that reflects your growth and adaptability. Just as you've built this resume builder, you have the power to shape your career path. Keep updating and improving, both your technical skills and your professional story.
Thank you for joining us on this exciting web development adventure. We hope you found this guide informative, inspiring, and empowering. Now, it's time to take the reins and start building your resume builder. We can't wait to see the amazing creations you'll bring to life.
Remember, the road to success is paved with determination, creativity, and the knowledge you've gained here. Best of luck, and may your resume builder open doors to countless opportunities!
Credit: ZeroOctave
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
