Skip to content

Commit 2c39277

Browse files
SaipradyumnagoudSaipradyumnagoud
authored
Added How to create user info based Resume maker (#528)
* added How to create user info based Resume maker * added How to create user info based Resume maker cover * Made the changes
1 parent bcb3367 commit 2c39277

File tree

2 files changed

+240
-0
lines changed

2 files changed

+240
-0
lines changed

‎Web Development/How-To-Create-user-info-based-Resume-Maker/index.html

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="description" content="Learn how to create a user info-based resume maker, including data collection, rich text editing, template choices, live preview, and format options." />
7+
<meta name="keywords" content="Resume Maker, User Info, Data Collection, Rich Text Editor, Templates, Live Preview, PDF, Docx, TXT, Web Development, Tutorials, UI/UX" />
8+
<title>User Info Based Resume Maker: Step-by-Step Guide</title>
9+
<meta name="saipradyumnagoud" content="CSEdge" />
10+
<!-- Favicon-->
11+
<link rel="icon" type="image/x-icon" href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
12+
<!-- Core theme CSS (includes Bootstrap)-->
13+
<link rel="stylesheet" href="../main.css">
14+
<link rel="stylesheet" href="../styles.css">
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
16+
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
17+
</head>
18+
19+
<body>
20+
<!-- Responsive navbar-->
21+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
22+
<div class="container">
23+
<img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
24+
<a class="navbar-brand" href="./index.html">CSEdge Learn</a>
25+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
26+
<span class="navbar-toggler-icon"></span>
27+
</button>
28+
29+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
30+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 flex">
31+
<li class="nav-item me-2">
32+
<a class="nav-link" href="https://csedge.courses"><i class="fa-solid fa-house"></i> Home</a>
33+
</li>
34+
<li class="nav-item me-2">
35+
<a class="nav-link" href="https://csedge.courses/about"> <i class="fa-solid fa-circle-info"></i> About</a>
36+
</li>
37+
<li class="nav-item me-2">
38+
<a class="nav-link" href="https://csedge.courses#contact"><i class="fa-solid fa-phone"></i> Contact</a>
39+
</li>
40+
<li class="nav-item me-2">
41+
<a class="nav-link active" aria-current="page" href="#!"><i class="fa-solid fa-blog"></i> Blog</a>
42+
</li>
43+
</ul>
44+
</div>
45+
</div>
46+
</nav>
47+
48+
<!--Page Content-->
49+
50+
<div class="container mt-5">
51+
<div class="row">
52+
<!-- Blog entries-->
53+
<div class="col-lg-8 py-6">
54+
<h1 class="pt-5">User Info Based Resume Maker: Step-by-Step Guide</h1>
55+
<!-- Featured blog post-->
56+
<div class="card mb-4">
57+
<div class="card-body">
58+
<main class="container">
59+
<section>
60+
<p>A user info-based resume maker allows users to create professional resumes online, offering features like data collection, rich text editing, template choices, live preview, and format options.</p>
61+
</section>
62+
<section>
63+
<h3>Data Collection</h3>
64+
<p>Gather user's professional details, e.g., name, contact info, summary, skills, education, experience, projects, certifications, languages, references.</p>
65+
<pre><code>
66+
// Example of collecting user's professional details
67+
const userDetails = {
68+
name: "John Doe",
69+
contactInfo: "john.doe@example.com",
70+
summary: "Experienced web developer...",
71+
skills: ["HTML", "CSS", "JavaScript"],
72+
education: [
73+
{
74+
degree: "B.Sc. in Computer Science",
75+
institution: "XYZ University",
76+
year: "2020"
77+
}
78+
],
79+
experience: [
80+
{
81+
position: "Web Developer",
82+
company: "ABC Corp",
83+
duration: "Jan 2021 - Present",
84+
responsibilities: ["Developing web applications", "Collaborating with designers"]
85+
}
86+
],
87+
projects: [
88+
{
89+
title: "Portfolio Website",
90+
description: "A personal portfolio website showcasing projects and skills",
91+
technologies: ["HTML", "CSS", "JavaScript"]
92+
}
93+
],
94+
certifications: ["Certified Web Developer"],
95+
languages: ["English", "Spanish"],
96+
references: ["Jane Smith, j.smith@example.com"]
97+
};
98+
</code></pre>
99+
<h4>Rich Text Editor</h4>
100+
<p>Support detailed entries in sections requiring extensive writing.</p>
101+
<pre><code>
102+
// Example of integrating a rich text editor
103+
// HTML
104+
<textarea id="richTextEditor" name="editor"></textarea>
105+
106+
// JavaScript
107+
CKEDITOR.replace('richTextEditor', {
108+
height: 300
109+
});
110+
</code></pre>
111+
<h4>Template Choices</h4>
112+
<p>Allow selecting from various resume designs suiting industries or preferences.</p>
113+
<pre><code>
114+
// Example of template choices
115+
const templates = [
116+
{ id: 1, name: "Classic", preview: "classic-preview.png" },
117+
{ id: 2, name: "Modern", preview: "modern-preview.png" },
118+
{ id: 3, name: "Creative", preview: "creative-preview.png" }
119+
];
120+
121+
templates.forEach(template => {
122+
console.log(`Template: ${template.name}, Preview: ${template.preview}`);
123+
});
124+
</code></pre>
125+
<h4>Live Preview</h4>
126+
<p>Display a real-time view of the created resume alongside edits.</p>
127+
<pre><code>
128+
// Example of live preview functionality
129+
const resumePreview = document.getElementById('resumePreview');
130+
131+
function updatePreview() {
132+
const content = document.getElementById('richTextEditor').value;
133+
resumePreview.innerHTML = content;
134+
}
135+
136+
document.getElementById('richTextEditor').addEventListener('input', updatePreview);
137+
</code></pre>
138+
<h4>Format Choices</h4>
139+
<p>Offer output choices like PDF, Docx, or txt.</p>
140+
<pre><code>
141+
// Example of format choices
142+
function exportResume(format) {
143+
if (format === 'PDF') {
144+
console.log('Exporting as PDF...');
145+
} else if (format === 'Docx') {
146+
console.log('Exporting as Docx...');
147+
} else if (format === 'TXT') {
148+
console.log('Exporting as TXT...');
149+
}
150+
}
151+
152+
exportResume('PDF');
153+
</code></pre>
154+
</section>
155+
</main>
156+
</div>
157+
</div>
158+
</div>
159+
<!-- Side widgets-->
160+
<div class="col-lg-4 pt-5">
161+
<!-- Search widget-->
162+
<div class="card mb-4">
163+
<div class="card-header">Search</div>
164+
<div class="card-body">
165+
<div class="input-group">
166+
<input class="form-control" type="text" id="searchInput" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" />
167+
<button class="btn btn-primary" id="button-search" type="button" onclick="search()">
168+
Go!
169+
</button>
170+
</div>
171+
</div>
172+
<!-- Search Results -->
173+
<div id="searchResults"></div>
174+
</div>
175+
<!-- Categories widget-->
176+
<div class="card mb-4">
177+
<div class="card-header">Categories</div>
178+
<div class="card-body">
179+
<div class="row">
180+
<div class="col-sm-6">
181+
<ul class="list-unstyled mb-0">
182+
<li><a href="#!">Web Design</a></li>
183+
<li><a href="#!">HTML</a></li>
184+
<li><a href="#!">Freebies</a></li>
185+
</ul>
186+
</div>
187+
<div class="col-sm-6">
188+
<ul class="list-unstyled mb-0">
189+
<li><a href="#!">JavaScript</a></li>
190+
<li><a href="#!">CSS</a></li>
191+
<li><a href="#!">Tutorials</a></li>
192+
</ul>
193+
</div>
194+
</div>
195+
</div>
196+
</div>
197+
<!-- Side widget-->
198+
<div class="card mb-4">
199+
<div class="card-header">Recent Posts</div>
200+
<div class="card-body">
201+
<p>Coming Soon..!</p>
202+
</div>
203+
</div>
204+
<div class="card mb-4">
205+
<div class="card-body">
206+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409" crossorigin="anonymous"></script>
207+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409" data-ad-slot="9866674087"></ins>
208+
<script>
209+
(adsbygoogle = window.adsbygoogle || []).push({});
210+
</script>
211+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409" crossorigin="anonymous"></script>
212+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409" data-ad-slot="9866674087"></ins>
213+
<script>
214+
(adsbygoogle = window.adsbygoogle || []).push({});
215+
</script>
216+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409" crossorigin="anonymous"></script>
217+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409" data-ad-slot="9866674087"></ins>
218+
<script>
219+
(adsbygoogle = window.adsbygoogle || []).push({});
220+
</script>
221+
</div>
222+
</div>
223+
</div>
224+
</div>
225+
</div>
226+
<!-- Footer-->
227+
<footer class="py-5 bg-dark">
228+
<div class="container">
229+
<p class="m-0 text-center text-white">
230+
Copyright &copy CSEdge Learn 2024
231+
</p>
232+
</div>
233+
</footer>
234+
<!-- Bootstrap core JS-->
235+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
236+
<!-- Core theme JS-->
237+
</div>
238+
</body>
239+
240+
</html>

‎posts/images/How-to-create-user-info-based-Resume-maker.png

159 KB
Loading

0 commit comments

Comments
 (0)