html css resume tutorial

Create a Resume Builder with HTML, CSS, and JavaScript (Source Code)

By Faraz - Last Updated: July 29, 2024

Create your resume builder using HTML, CSS, and JavaScript with this detailed guide. Complete with source code and step-by-step instructions.

Create a Resume Builder with HTML, CSS, and JavaScript.jpg

Project Introduction
JavaScript Code

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.

Learn how to detect internet connection using HTML, CSS, and JavaScript.jpg

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.

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.

Final Output:

See the Pen Untitled by Faraz ( @codewithfaraz ) on CodePen .

scroll-to-top button with progress indicator using html, css, and javascript.jpg

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.

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 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, latest post.

Create Form Validation with HTML, CSS, and JavaScript

Learn how to create form validation using HTML, CSS, and JavaScript. This guide offers step-by-step instructions for a user-friendly web form.

Learn How to Create Quote Generator using HTML, CSS, and JavaScript

October 28, 2024

Easy Tip Calculator Using HTML, CSS, and JavaScript

Make Your Own Notes App with HTML, CSS, and JavaScript

October 18, 2024

Create Simple Webpage Layout Using HTML and CSS

October 17, 2024

Create Marketing Hero Section using HTML and CSS

Learn how to create a responsive marketing hero section using HTML and CSS.

Create a Recording Toggle Switch Using HTML, CSS, and JavaScript

September 24, 2024

Create Animated Logout Button Using HTML and CSS

August 08, 2024

Create Fortnite Buttons Using HTML and CSS - Step-by-Step Guide

June 05, 2024

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

March 17, 2024

Create Pop It Game using HTML, CSS, and JavaScript

Learn how to create a fun and simple Pop It game using HTML, CSS, and JavaScript with this easy-to-follow step-by-step guide for beginners.

Create Trivia Quiz Game using HTML, CSS, and JavaScript

September 25, 2024

Create Dice Rolling Game using HTML, CSS, and JavaScript

August 21, 2024

Create a Breakout Game with HTML, CSS, and JavaScript | Step-by-Step Guide

July 14, 2024

Create a Whack-a-Mole Game with HTML, CSS, and JavaScript | Step-by-Step Guide

June 12, 2024

Tooltip Hover to Preview Image with Tailwind CSS

Learn how to create a tooltip hover effect to preview images using Tailwind CSS. Follow our simple steps to add this interactive feature to your website.

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

January 23, 2024

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

November 30, 2023

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

October 30, 2023

Create Sticky Bottom Navbar using HTML and CSS

Learn how to create a sticky bottom navbar using HTML and CSS with this easy-to-follow guide.

Creating a Responsive Footer with Tailwind CSS (Source Code)

February 25, 2024

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

Please allow ads on our site🥺

JS Tutorial
JS Exercise
JS Interview Questions
JS Operator
JS Projects
JS Examples
JS Free JS Course
JS A to Z Guide
JS Formatter

Dynamic Resume Creator using HTML CSS and JavaScript

Creating a well-designed and professional resume can be a challenging and time-consuming task for job seekers. Many individuals struggle with formatting, organizing information, and ensuring their resume stands out among others. To address this problem, a Resume Creator project was developed to simplify the resume-building process and provide users with a user-friendly interface to generate effective resumes effortlessly.

Prerequisites:

Create an HTML form with input fields for resume information.
Use JavaScript to toggle between the input form and resume preview.
Retrieve user input from the form and dynamically populate the preview.
Include a button for printing the resume.
Style the elements using CSS for the desired layout and design.

Example: In this example, we will illustrate the Dynamic Resume Creator using HTML, CSS, and JavaScript

Please Login to comment...

Improve your coding skills with practice.

What kind of Experience do you want to share?

DEV Community

Posted on May 15

Creating a Professional CV in HTML: A Comprehensive Guide

In today's competitive job market, having a standout CV is crucial for showcasing your skills, qualifications, and experiences to potential employers. While traditional paper resumes are still prevalent, creating a digital CV using HTML offers several advantages, including customization, interactivity, and easy sharing. In this comprehensive guide, we'll walk through the process of creating a professional CV in HTML step by step, using examples and explanations to help you craft an impressive resume.

Setting Up the HTML Document:

Example 1: Basic HTML Structure

Setting up the HTML document is the first step in creating a well-structured webpage. In Example 1, we begin with the essential components: the <!DOCTYPE html> declaration, which tells the browser to interpret the document as HTML5, followed by the <html> element, enclosing the entire document. Inside the <html> tags, we have the <head> section, where metadata like the page title is defined using the <title> element. This title appears in the browser's title bar and search engine results, providing a concise description of the page's content. Additionally, the <body> section contains the main content of the CV, structured using semantic elements like <table>. Within the table, we use <tr> and <th> tags to define table rows and headings, respectively, ensuring a clear and organized layout. The use of attributes like bgcolor, border, align, and width further customizes the appearance and alignment of elements within the document, enhancing its visual presentation. Overall, setting up the HTML document lays the foundation for building a well-designed and accessible webpage, ensuring optimal readability and user experience.

Personal Information Section

In the personal information section of your resume, it's essential to provide comprehensive details that give a clear picture of who you are. Start with a <h2> tag to prominently display your name, ensuring it stands out as a key element. Next, include a professional photograph using the <img> tag, setting attributes like src for the image path, alignment for placement, and height and width for dimensions, which enhances your resume's visual appeal.

Directly beneath your name, list your professional title and company affiliation using bold tags (<b>) for emphasis. This highlights your current role and company in a clear and impactful manner.

Then, provide your contact information, including your mobile number and email address, formatted with line breaks (<br>) to maintain a clean and organized appearance.

The section continues with another <h2> heading for "Personal Information", followed by an unordered list (<ul>) of additional details such as your father's name, religion, national identification number (CNIC), date of birth, nationality, and marital status. Each piece of information is enclosed in a list item (<li>) , which helps in structuring the data clearly and making it easy for readers to scan.

Including this detailed personal information in your HTML resume ensures that potential employers or clients can quickly learn important aspects about you, enhancing your professional presentation.

Adding Qualifications:

Example 3: Qualifications Section In the qualifications section, it is crucial to present your educational background clearly and systematically. Using a table to organize this information ensures that it is both easy to read and professionally presented.

Begin with a heading (<h2>) titled "Qualifications" to clearly define this section. Then, create a table (<table border="1">) to list your educational achievements. The border attribute helps delineate the table, making it visually distinct and easier to follow.

The table starts with a header row (<tr>) containing column titles for "Examination," "Division," and "Board/University," each enclosed in a header cell (<th>) . These headers provide context for the data that follows.

Subsequent rows (<tr>) detail your qualifications. Each qualification is listed in a separate row, with details of the examination (e.g., Matric, B.Sc, MAS), the division or grade achieved (e.g., 1st), and the name of the board or university (e.g., Rocwes Company Board, Egerton University), all enclosed in data cells (<td>) .

By structuring your qualifications in this manner, you ensure that potential employers or academic institutions can quickly and easily assess your educational background. This format not only highlights your achievements but also maintains a clean, professional appearance, enhancing the overall readability and effectiveness of your resume.

Highlighting Certificates and Skills:

Highlighting certificates and skills is essential to showcase your expertise and competencies. Use the heading (<h2>) to clearly label this section. An unordered list (<ul>) is an effective way to organize and present each certificate and skill. Each item (<li>) should detail a specific certificate or skill, providing a clear and concise summary of your qualifications. This format ensures that key competencies are easy to read and stand out, making a strong impression on potential employers. Example 4: Certificates and Skills Section

Showcasing Work Experience: When showcasing your work experience, it's important to present it in a clear and organized manner. Start with a heading (<h2>) titled "Experience" to highlight this section. Use an unordered list (<ul>) to list each job, ensuring a clean and structured format.

Each list item (<li>) should include your job title, the company name, and the dates of employment. Listing work experience in reverse chronological order (most recent job first) allows potential employers to quickly see your latest and most relevant positions.

This approach ensures that your work history is easy to follow and effectively communicates your career progression and stability. Including specific job titles and dates also helps to highlight your professional development and the duration of your roles, providing a comprehensive overview of your experience. Example 5: Work Experience Section

Highlighting Language Proficiency:

Highlighting language proficiency is essential, especially if you are applying for international job opportunities. Begin with a heading (<h2>) titled "Languages" to clearly define this section. Use an unordered list (<ul>) to present each language you are proficient in. Each list item (<li>) should simply state the language, ensuring clarity and ease of reading.

You may also consider adding additional details to each language, such as proficiency level (e.g., fluent, intermediate, basic) or specific certifications (e.g., TOEFL, DELF) if applicable. For instance:

Example 6: Language Section

This additional information can provide more context to potential employers about your language skills, demonstrating your ability to communicate effectively in different languages and environments. This section not only showcases your linguistic abilities but also highlights your adaptability in diverse professional settings.

Adding Additional Sections:

Adding additional sections to your resume can provide a more comprehensive picture of your qualifications and accomplishments. The "Awards and Achievements" section is an excellent way to highlight significant recognitions that showcase your skills and contributions. Use an unordered list (<ul>) to detail each award or achievement, including the title, organization, and year. This format makes your accomplishments stand out and easy to read.

The "References" section is also important. While specific references can be included directly, it is often sufficient to note "Available upon request." This indicates that you can provide references if the employer requests them, maintaining privacy for your contacts while signaling your preparedness.

These additional sections help differentiate you from other candidates by showcasing unique accomplishments and providing further evidence of your professional capabilities and integrity. They add depth to your resume, demonstrating not only your experience and skills but also the recognition and trust you have earned in your career.

Example 7: Additional Sections

When you run the HTML code snippets provided in this article, you will generate a comprehensive and visually structured CV (curriculum vitae). This CV showcases various sections, including personal information, qualifications, work experience, language proficiency, and additional sections like awards and references. Here’s an output of the code when you run:

Creating a professional CV in HTML allows you to customize and present your skills and experiences in a visually appealing and structured format. By following the steps outlined in this guide and customizing the examples provided, you can create an impressive digital resume that effectively showcases your qualifications to potential employers. Remember to regularly update your CV with new experiences and skills to keep it relevant and up-to-date in the ever-evolving job market. With a well-crafted HTML CV, you'll stand out from the competition and increase your chances of landing your dream job.

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

AI Tools Every Mobile Developer Needs to Use

Anna Boiko - Oct 30

Shopping card using the html css and javascript

Prince - Oct 30

How to Use ENV variables in GitHub Actions

CiCube - Oct 30

Guide to Building a REST API with Deno and Oak Framework

nnamdi nwaocha - Oct 30

We're a place where coders share, stay up-to-date and grow their careers.

IMAGES

HTML CSS Resume
Step by Step Guide to Build Resume using HTML and CSS
How to Create Responsive Resume Website using HTML and CSS
Resume HTML CSS
HTML CSS Resume Tutorial
How to create the Resume CV design using HTML and CSS -- Resume Design -- CV Design

VIDEO

HTML CSS Resume
How to create a Resume Using HTML CSS
How to Create Responsive Resume Website using HTML and CSS
How to Create a Responsive Resume Website using HTML and CSS
HTML CSS Resume Tutorial
How to Create a Responsive Resume CV Website using HTML and CSS

COMMENTS

How to create an online resume
The resume is an overview of your experience, competence, and skills. It is most known for being a document, used to apply for jobs. Companies and hiring managers use the resume to get an understandi…
Create a Resume Builder with HTML, CSS, and ...
Create your resume builder using HTML, CSS, and JavaScript with this detailed guide. Complete with source code and step-by-step instructions.
A simple HTML Resume
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. You can also link to another Pen here (use the .css URL Extension ) and …
Full Responsive Resume (CV) using html and css
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. You can also link to another Pen here (use the .css URL Extension) and …
Dynamic Resume Creator using HTML CSS and JavaScript
Use JavaScript to toggle between the input form and resume preview. Retrieve user input from the form and dynamically populate the preview. Include a button for printing the resume. Style the elements using CSS for the …
Creating a Professional CV in HTML: A Comprehensive …
In this comprehensive guide, we'll walk through the process of creating a professional CV in HTML step by step, using examples and explanations to help you craft an impressive resume. Setting Up the HTML …