Online Resume Builder using Django
Last Updated :
29 Apr, 2025
In this article, we will create an online resume builder web app. We will start by filling out a form with our personal information. Once the form is completed, we can generate a resume. Additionally, we will ensure the PDF generation quality to make the final result closely resemble the original resume in a professional and proper format. To use this service, you only need to input your information and submit the form.
Online Resume Builder using Django
To install Django follow these steps.
Starting the Project Folder
To start the project use this command
django-admin startproject core
cd home
To start the app use this command
python manage.py startapp home
Then register the app in settings.py file
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"home",
]
File Structure :
File Structure
Note: Developing a resume builder is an excellent way to practice Django. For those looking to expand their knowledge, the Django Web Development Course covers advanced techniques that can help refine your skills.
Setting up Necessary files
home/views.py
The given code in Python handles two web pages: "home" and "gen_resume." The "home" view renders an HTML template named 'index.html' when the user accesses it. The "gen_resume" view is used to generate a resume and handles POST requests containing form data. The view collects data from the POST request and then renders an HTML template named 'resume.html' with the collected data passed as context to the template.
Python
from django.shortcuts import render
def home(request):
return render(request, 'index.html')
def gen_resume(request):
if request.method == 'POST':
name = request.POST.get('name', '')
about = request.POST.get('about', '')
age = request.POST.get('age', '')
email = request.POST.get('email', '')
phone = request.POST.get('phone', '')
skill1 = request.POST.get('skill1', '')
skill2 = request.POST.get('skill2', '')
skill3 = request.POST.get('skill3', '')
skill4 =request.POST.get('skill4', '')
skill5 =request.POST.get('skill5', '')
degree1 = request.POST.get('degree1', '')
college1 = request.POST.get('college1', '')
year1 = request.POST.get('year1', '')
degree2 = request.POST.get('degree2', '')
college2 = request.POST.get('college2', '')
year2 = request.POST.get('year2', '')
college3 = request.POST.get('college3', '')
year3 = request.POST.get('year3', '')
degree3 = request.POST.get('degree3', '')
lang1 = request.POST.get('lang1', '')
lang2 = request.POST.get('lang2', '')
lang3 = request.POST.get('lang3', '')
project1= request.POST.get('project1', '')
durat1 = request.POST.get('duration1', '')
desc1 = request.POST.get('desc1', '')
project2 = request.POST.get('project2', '')
durat2 = request.POST.get('duration2', '')
desc2 = request.POST.get('desc2', '')
company1 = request.POST.get('company1', '')
post1 = request.POST.get('post1', '')
duration1 = request.POST.get('duration1', '')
lin11 = request.POST.get('lin11', '')
company2 = request.POST.get('company2', '')
post2 = request.POST.get('post2', '')
duration2 = request.POST.get('duration2', '')
lin21 = request.POST.get('lin21', '')
ach1 = request.POST.get('ach1', '')
ach2 = request.POST.get('ach2', '')
ach3 = request.POST.get('ach3', '')
return render(request, 'resume.html', {'name':name,
'about':about, 'skill5':skill5,
'age':age, 'email':email,
'phone':phone, 'skill1':skill1,
'skill2':skill2, 'skill3':skill3,
'skill4':skill4, 'degree1':degree1,
'college1':college1, 'year1':year1,
'college3':college3, 'year3':year3,
'degree3':degree3, 'lang1':lang1,
'lang2':lang2, 'lang3':lang3,
'degree2':degree2, 'college2':college2,
'year2':year2, 'project1':project1,
'durat1':durat1, 'desc1':desc1,
'project2':project2, 'durat2':durat2,
'desc2':desc2, 'company1':company1,
'post1':post1, 'duration1': duration1,
'company2':company2, 'post2':post2,
'duration2': duration2,'lin11':lin11,
'lin21':lin21, 'ach1':ach1,
'ach2':ach2,'ach3':ach3 })
return render(request, 'index.html')
Creating GUI
templates/index.html
This HTML code creates a structured form for gathering personal information, skills, educational history, and work experience, and it is styled using CSS for a visually appealing user interface.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
.form-container {
width: 60%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input[type="text"],
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group textarea {
height: 100px;
}
/* Apply styles to the skills input elements */
.om {
width: 100%;
padding: 10px 20px;
display: flex;
gap: 10px;
}
.ed {
width: 100%;
padding: 10px 20px;
display: flex;
gap: 4%;
}
.com {
width: 80%;
padding: 5px 20px;
display: flex;
gap: 7%;
}
.op {
margin: 10px;
}
.btn1 {
margin-left: 43%;
padding: 15px 15px;
font-size: 15px;
font-weight: bold;
background-color: rgb(35, 144, 208);
border-radius: 10px;
}
/* You can add more styles as needed */
</style>
</head>
<body>
<h1 style="text-align: center; color:green; font-size:40px; ">GeeksforGeeks</h1>
<form action="{% url 'resume' %}" method="post">
{% csrf_token %}
<!-- ===================PERSONAL INFORMATION====================== -->
<div class="form-container">
<h2>Personal Information</h2>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div class="form-group">
<label for="name">About:</label>
<input type="text" id="name" name="about">
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="text" id="age" name="age">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone">
</div>
<div class="form-group ">
<label for="skills">Skills:</label>
<div class="om">
<input type="text" id="skills" name="skill1">
<input type="text" id="skills" name="skill2">
<input type="text" id="skills" name="skill3">
<input type="text" id="skills" name="skill4">
<input type="text" id="skills" name="skill5">
</div>
</div>
<!-- =====================EDUCATION SECTION ================== -->
<!-- -----EDUCATION 1----- -->
<div class="form-group">
<label for="education1">Education 1:</label>
</div>
<div class="ed">
<div class="form-group">
<label for="degree1">Degree :</label>
<input type="text" id="degree1" name="degree1">
</div>
<div class="form-group">
<label for="college1">College :</label>
<input type="text" id="college1" name="college1">
</div>
<div class="form-group">
<label for="year1">Year :</label>
<input type="text" id="year1" name="year1">
</div>
</div>
<!-- -----EDUCATION 2----- -->
<div class="form-group">
<label for="education1">Education 2:</label>
</div>
<div class="ed">
<div class="form-group">
<label for="degree1">Degree:</label>
<input type="text" id="degree1" name="degree2">
</div>
<div class="form-group">
<label for="college1">College:</label>
<input type="text" id="college1" name="college2">
</div>
<div class="form-group">
<label for="year1">Year:</label>
<input type="text" id="year1" name="year2">
</div>
</div>
<!-- -----EDUCATION 3----- -->
<div class="form-group">
<label for="education1">Education 3:</label>
</div>
<div class="ed">
<div class="form-group">
<label for="degree1">Degree:</label>
<input type="text" id="degree1" name="degree3">
</div>
<div class="form-group">
<label for="college1">College:</label>
<input type="text" id="college1" name="college3">
</div>
<div class="form-group">
<label for="year1">Year:</label>
<input type="text" id="year1" name="year3">
</div>
</div>
<!-- ================LANGUAGAES======================= -->
<div class="form-group ">
<label for="skills">Languages :</label>
<div class="om">
<input type="text" id="skills" name="lang1">
<input type="text" id="skills" name="lang2">
<input type="text" id="skills" name="lang3">
</div>
</div>
<!-- =====================PROJECT SECTION=================== -->
<!-- PROJECT 1 -->
<div class="form-group">
<label for="experience1">Project 1 :</label>
</div>
<div class="com">
<div class="form-group ">
<label for="company1">Project Title :</label>
<input type="text" id="company1" name="project1">
</div>
<div class="form-group">
<label for="post1">Duration :</label>
<input type="text" id="post1" name="durat1">
</div>
</div>
<div class="form-group">
<label for="description1">Description :</label>
<input type="text" id="duration1" name="desc1">
</div>
<!-- PROJECT 2 -->
<div class="form-group">
<label for="experience1">Project 2 :</label>
</div>
<div class="com">
<div class="form-group ">
<label for="company1">Project Title :</label>
<input type="text" id="company1" name="project2">
</div>
<div class="form-group">
<label for="post1">Duration :</label>
<input type="text" id="post1" name="durat2">
</div>
</div>
<div class="form-group">
<label for="description1">Description :</label>
<input type="text" id="duration1" name="desc2">
</div>
<!-- =======================EXPERICNECE SECTION===================== -->
<div class="form-group">
<label for="experience1">Experience 1:</label>
</div>
<div class="com">
<div class="form-group ">
<label for="company1">Company Name :</label>
<input type="text" id="company1" name="company1">
</div>
<div class="form-group">
<label for="post1">Post :</label>
<input type="text" id="post1" name="post1">
</div>
<div class="form-group">
<label for="duration1">Duration :</label>
<input type="text" id="duration1" name="duration1">
</div>
</div>
<div class="form-group ">
<label for="description1">Description :</label>
<div class="op">
<input type="text" id="duration1" name="lin11">
</div>
</div>
<div class="form-group">
<label for="experience1">Experience 2:</label>
</div>
<div class="com">
<div class="form-group ">
<label for="company1">Company Name :</label>
<input type="text" id="company1" name="company2">
</div>
<div class="form-group">
<label for="post1">Post :</label>
<input type="text" id="post1" name="post2">
</div>
<div class="form-group">
<label for="duration1">Duration :</label>
<input type="text" id="duration1" name="duration2">
</div>
</div>
<div class="form-group">
<label for="description1">Description :</label>
<input type="text" id="duration1" name="lin21">
</div>
<!-- ==========================ACHIEVEMENT================= -->
<div class="form-group">
<label for="experience1">Achievement :</label>
</div>
<div class="form-group ">
<label for="company1">First :</label>
<input type="text" id="company1" name="ach1">
</div>
<div class="form-group">
<label for="post1">Second :</label>
<input type="text" id="post1" name="ach2">
</div>
<div class="form-group">
<label for="duration1">Third :</label>
<input type="text" id="duration1" name="ach3">
</div>
<button type="submit" class=" btn1 ">Submit</button>
</div>
</form>
</body>
</html>
templates/resume.html
This HTML code is a structured template for creating a personal resume or CV. Additionally, there's a JavaScript code snippet at the bottom that defines the myfun function. This function is responsible for generating and printing the resume when the button is clicked.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: montserrat;
}
.container {
background-color: #f5f5f5;
max-width: 800px;
margin: 60px auto;
height: 1100px;
padding: 20px;
box-shadow: 10px 2em 30px rgba(0, 0, 0, 0.3);
}
.header {
text-align: center;
}
.header h1 {
margin-bottom: 5px;
}
.header h3 {
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
}
.main {
display: flex;
flex-wrap: wrap;
}
.left {
flex: 1;
padding: 30px;
}
.left p {
line-height: 1;
}
.left ul li {
line-height: 1;
}
h2 {
padding: 5px;
color: #584d4d;
margin: 30px 0;
text-decoration: underline;
font-size: 25px;
border-radius: 0 20px 20px 0;
}
.right {
flex: 1;
padding: 20px;
}
.right h3 {
margin-bottom: 5px;
}
.right ul li {
line-height: 1;
}
.btn1 {
margin-left: 43%;
padding: 15px 15px;
font-size: 15px;
font-weight: bold;
background-color: rgb(106, 233, 106);
border-radius: 10px;
}
</style>
<body>
<h1 style="text-align: center; color:green; font-size:40px; ">GeeksforGeeks</h1>
<div id="mn" class="container">
<div class="header">
<br><br>
<h1>{{name}}</h1>
<h3>{{about}}</h3>
</div>
<div class="main">
<div class="left">
<h2>Personal Information</h2>
<p><strong>Name :</strong>{{name}}</p>
<p><strong>Age :</strong>{{age}} </p>
<p><strong>Email</strong> {{email}}</p>
<p><strong>Phone</strong> +91-{{phone}}</p>
<h2>Skills</h2>
<ul>
<li>{{skill1}}</li>
<li>{{skill2}}</li>
<li>{{skill3}}</li>
<li>{{skill4}}</li>
<li>{{skill5}}</li>
</ul>
<h2>Education</h2>
<h3>{{degree1}} </h3>
<p>{{college1}}</p>
<p>{{year1}}</p>
<br>
<h3>{{degree2}} </h3>
<p>{{college2}}</p>
<p> Year : {{year2}}</p>
<h3>{{degre3}} </h3>
<p>{{college3}}</p>
<p> Year : {{year3}}</p>
<h2>Languages</h2>
<ul>
<li>{{lang1}}</li>
<li>{{lang2}}</li>
<li>{{lang3}}</li>
</ul>
</div>
<div class="right">
<h2>Projects</h2>
<h3>{{project1}}</h3>
<p><strong>Duration :</strong> {{durat1}}</p>
<ul>
<li>{{desc1}}</li>
</ul>
<br>
<h3>{{project2}}</h3>
<p><strong>Duration :</strong> {{durat2}}</p>
<ul>
<li>{{desc2}}</li>
</ul>
<h2>Work Experinece</h2>
<h3>{{company1}}</h3>
<p><strong>Position:</strong> {{post1}}</p>
<p><strong>Duration :</strong> {{duration1}}</p>
<ul>
<li>{{lin11}}</li>
</ul>
<br><br>
<h3>{{company2}}</h3>
<p><strong>Position: </strong>{{post2}}</p>
<p><strong>Duration</strong> {{duration2}}</p>
<ul>
<li>{{lin21}}</li>
</ul>
<h2>Achievements :</h2>
<ul>
<li>{{ach1}}</li>
<li>{{ach2}}</li>
<li>{{ach3}}</li>
</ul>
</div>
</div>
</div>
<button onclick="generatePDF('mn')" type="button" class="btn1">Download PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.0/mammoth.browser.min.js"></script>
<script type="text/javascript">
function generatePDF(containerId) {
const container = document.getElementById(containerId);
// Download as PDF
const pdfOptions = {
margin: 10,
filename: 'resume.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf()
.from(container)
.set(pdfOptions)
.outputPdf()
.then(function (pdf) {
const pdfBlob = new Blob([pdf], { type: 'application/pdf' });
const pdfUrl = URL.createObjectURL(pdfBlob);
const pdfLink = document.createElement('a');
pdfLink.href = pdfUrl;
pdfLink.download = 'resume.pdf';
pdfLink.click();
});
}
</script>
</body>
</html>
urls.py
The provided code is configuring URL patterns for a Django web application. It includes mappings for two URLs: the root URL, which is associated with the 'home' view rendering the website's homepage, and a '/resume/' URL, which maps to the 'gen_resume' view for generating a resume. These URL patterns make up the application's routing, allowing users to access specific views based on the URLs they visit. The 'name' parameter provides a way to reference these patterns throughout the application.
Python
from django.contrib import admin
from django.urls import path
from home.views import *
urlpatterns = [
path('', home, name = 'home'),
path('resume/', gen_resume, name = 'resume'),
path("admin/", admin.site.urls),
]
Deployement of the Project
Run these commands to apply the migrations:
python3 manage.py makemigrations
python3 manage.py migrate
Run the server with the help of following command:
python3 manage.py runserver
Output
Similar Reads
Online Survey Tool using Django In this article, we'll help you make an Online Survey Tool using Django. In our tool, only admin users can create forms to keep things in control and ensure quality. But, we've also made it so that authenticated users can fill out surveys. If you're not logged in, you can't submit a survey anonymous
6 min read
Python Compiler Using Django In this article, we will explore the creation of a Python compiler using Django. Users can input their Python code into the designated code area, and upon clicking the "Run" button, the compiler will generate the corresponding output. What is Python Compiler?A Python compiler is a program or tool th
4 min read
Blog Post Recommendation using Django In this article, we will guide you through the creation of a blog post recommendation system using Django. Our article covers the integration of a user-friendly login system with a registration form, ensuring a seamless experience for your website visitors. Additionally, we have implemented a sophis
10 min read
Recipe Meal Planner using Django We will create the Recipe Meal Planner using Django step-by-step. Generally, we will implement the CRUD (Create, Read, Update, Delete) operations, allowing users to add the recipe name, day, and the recipe itself. Additionally, we will establish a login system, requiring users to register and log in
8 min read
Job Board using Django In this article, we will guide you through creating a Job Board using Django in Python. Job Board Using DjangoBelow, is the step-by-step Implementation of a language learning app using Django in Python: Starting the Project FolderTo start the project use this command django-admin startproject Job_Bo
3 min read
Blogging Platform using Django Our task is to build a simple blogging platform using Django. We will learn how to create, display, edit, and delete blog posts with images using Django’s models, views, templates, and admin panel. Step-by-step, we’ll set up the project, connect it to a database, and run it locally.Project SetupPrer
4 min read