Resume Maker by Using HTML CSS JavaScript



In today's digital age, having a well-designed and professional CV is essential for job seekers. However, manually creating and updating a CV can be time-consuming and tedious.

That's where a dynamic CV generator comes in handy. In this article, we will explore how to create a dynamic CV generator using JavaScript. This tool will help streamline the process, allowing you to quickly generate and update your CV with ease.

Key Concepts

Before we dive into the code, let's understand the key concepts behind our dynamic CV generator:

  1. DOM Manipulation: We will use JavaScript to manipulate the Document Object Model (DOM) to dynamically add and update CV fields.

  2. Event Handling: We will attach event listeners to buttons and input fields to trigger specific actions, such as adding new fields or generating the CV.

  3. Template Rendering: We will use HTML templates to structure the CV layout and dynamically populate the content based on user input.

Code Structure

Our code consists of several functions, each responsible for a specific task:

  1. addNewLanField(): This function adds a new language input field to the CV form.

  2. addNewEdField(): This function adds a new education input field to the CV form.

  3. addNewTiField(): This function adds a new title input field to the CV form.

  4. addNewWEField(): This function adds a new work experience input field to the CV form.

  5. addNewAQField(): This function adds a new professional skill input field to the CV form.

  6. generateCV(): This function generates the CV based on the user's input. It retrieves the values from the input fields and dynamically updates the corresponding sections in the CV template.

  7. printCV(): This function hides the CV form, displays the generated CV template, and triggers the print functionality.


Here are the snapshots of this Resume Maker Web Application:

Resume Details Form

Resume Generator Web Application using HTML, CSS, and JS

Generated CV

Resume Generator Web Application using HTML, CSS, and JS

Printable CV

Resume Generator Web Application using HTML, CSS, and JS

How to Run

  • Download the Source Code zip file. (Download Button is located below this article)
  • Unzip the source code zip file.
  • Locate the index.html inside the extracted source code directory
  • Browse the said file on your preferred web browser.

There you have it! I hope this Resume Generator Web Application developed using HTML, CSS, and Javascript will help you with what you are looking.

Explore more on this website for more Tutorials, Free Source Codes, Articles covering various programming languages.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment