16 KiB
vscode.dev वापरून एक रिझ्युमे-वेबसाइट तयार करा
जर एखाद्या भरती करणाऱ्या व्यक्तीने तुमचा रिझ्युमे मागितला आणि तुम्ही त्यांना URL पाठवला, तर ते किती छान होईल? 😎
उद्दिष्टे
या असाइनमेंटनंतर, तुम्ही शिकाल:
- तुमचा रिझ्युमे दाखवण्यासाठी एक वेबसाइट तयार करणे
पूर्वअट
- GitHub खाते. GitHub वर जा आणि तुमच्याकडे आधीपासूनच खाते नसेल तर एक खाते तयार करा.
पायऱ्या
पायरी 1: एक नवीन GitHub रिपॉझिटरी तयार करा आणि त्याला my-resume असे नाव द्या.
पायरी 2: तुमच्या रिपॉझिटरीमध्ये index.html नावाची फाईल तयार करा. आपण github.com वर किमान एक फाईल जोडू कारण तुम्ही vscode.dev वर रिकामी रिपॉझिटरी उघडू शकत नाही.
creating a new file लिंकवर क्लिक करा, index.html नाव टाइप करा आणि Commit new file बटण निवडा.
पायरी 3: VSCode.dev उघडा आणि Open Remote Repository बटण निवडा.
तुमच्या रिझ्युमे साइटसाठी तुम्ही नुकतीच तयार केलेल्या रिपॉझिटरीचा URL कॉपी करा आणि तो इनपुट बॉक्समध्ये पेस्ट करा:
your-username ला तुमच्या GitHub युजरनेमने बदला.
https://github.com/your-username/my-resume
✅ जर यशस्वी झाले, तर तुम्हाला तुमचा प्रोजेक्ट आणि index.html फाईल ब्राउझरवरील टेक्स्ट एडिटरमध्ये उघडलेली दिसेल.
पायरी 4: index.html फाईल उघडा, खालील कोड तुमच्या कोड एरियामध्ये पेस्ट करा आणि सेव्ह करा.
तुमच्या रिझ्युमे वेबसाइटवरील सामग्रीसाठी HTML कोड.
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>तुमचे नाव येथे लिहा!</title>
</head>
<body>
<header id="header">
<!-- रिझ्युमे हेडर तुमच्या नाव आणि टायटलसह -->
<h1>तुमचे नाव येथे लिहा!</h1>
<hr>
तुमची भूमिका!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>संपर्क</h2>
<!-- संपर्क माहिती, सोशल मीडिया सहित -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">तुमचा ईमेल येथे लिहा</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">तुमचा युजरनेम येथे लिहा!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">तुमचा युजरनेम येथे लिहा!</a>
</p>
</section>
<section>
<h2>कौशल्ये</h2>
<!-- तुमची कौशल्ये -->
<ul>
<li>कौशल्य 1!</li>
<li>कौशल्य 2!</li>
<li>कौशल्य 3!</li>
<li>कौशल्य 4!</li>
</ul>
</section>
<section>
<h2>शिक्षण</h2>
<!-- तुमचे शिक्षण -->
<h3>तुमचा कोर्स येथे लिहा!</h3>
<p>
तुमची संस्था येथे लिहा!
</p>
<p>
सुरुवात - समाप्ती तारीख
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>माझ्याबद्दल</h2>
<!-- तुमच्याबद्दल -->
<p>तुमच्याबद्दल थोडक्यात लिहा!</p>
</section>
<section>
<h2>कामाचा अनुभव</h2>
<!-- तुमचा कामाचा अनुभव -->
<h3>नोकरीचे शीर्षक</h3>
<p>
संस्थेचे नाव येथे लिहा | सुरुवातीचा महिना – समाप्तीचा महिना
</p>
<ul>
<li>कार्य 1 - तुम्ही काय केले ते लिहा!</li>
<li>कार्य 2 - तुम्ही काय केले ते लिहा!</li>
<li>तुमच्या योगदानाचा परिणाम/परिणाम लिहा</li>
</ul>
<h3>नोकरीचे शीर्षक 2</h3>
<p>
संस्थेचे नाव येथे लिहा | सुरुवातीचा महिना – समाप्तीचा महिना
</p>
<ul>
<li>कार्य 1 - तुम्ही काय केले ते लिहा!</li>
<li>कार्य 2 - तुम्ही काय केले ते लिहा!</li>
<li>तुमच्या योगदानाचा परिणाम/परिणाम लिहा</li>
</ul>
</section>
</article>
</main>
</body>
</html>
HTML कोडमधील placeholder text बदलून तुमच्या रिझ्युमेचा तपशील भरा.
पायरी 5: My-Resume फोल्डरवर होवर करा, New File ... आयकॉनवर क्लिक करा आणि तुमच्या प्रोजेक्टमध्ये 2 नवीन फाईल तयार करा: style.css आणि codeswing.json.
पायरी 6: style.css फाईल उघडा, खालील कोड पेस्ट करा आणि सेव्ह करा.
साइटच्या लेआउटचे स्वरूप ठरवण्यासाठी CSS कोड.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 960px;
margin: auto;
}
h1 {
font-size: 3em;
letter-spacing: .6em;
padding-top: 1em;
padding-bottom: 1em;
}
h2 {
font-size: 1.5em;
padding-bottom: 1em;
}
h3 {
font-size: 1em;
padding-bottom: 1em;
}
main {
display: grid;
grid-template-columns: 40% 60%;
margin-top: 3em;
}
header {
text-align: center;
margin: auto 2em;
}
section {
margin: auto 1em 4em 2em;
}
i {
margin-right: .5em;
}
p {
margin: .2em auto
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2, h3 {
font-weight: 100;
margin-bottom: 0;
}
#mainLeft {
border-right: 1px solid lightgray;
}
पायरी 6: codeswing.json फाईल उघडा, खालील कोड पेस्ट करा आणि सेव्ह करा.
{
"scripts": [],
"styles": []
}
पायरी 7: Codeswing extension इन्स्टॉल करा जेणेकरून कोड एरियामध्ये रिझ्युमे वेबसाइट पाहता येईल.
Extensions आयकॉनवर क्लिक करा आणि Codeswing टाइप करा. विस्तार निवडल्यानंतर अतिरिक्त माहिती लोड करण्यासाठी ब्लू इन्स्टॉल बटण किंवा कोड एरियामध्ये दिसणारे इन्स्टॉल बटण वापरा. विस्तार इन्स्टॉल केल्यानंतर, तुमच्या कोड एरियामध्ये तुमच्या प्रोजेक्टमध्ये झालेल्या बदलांचे निरीक्षण करा 😃
विस्तार इन्स्टॉल केल्यानंतर तुमच्या स्क्रीनवर हे दिसेल.
जर तुम्ही केलेल्या बदलांवर समाधानी असाल, तर Changes फोल्डरवर होवर करा आणि बदल स्टेज करण्यासाठी + बटण क्लिक करा.
बदलांचे वर्णन करणारा एक कमिट मेसेज टाइप करा आणि check क्लिक करून तुमचे बदल कमिट करा. तुमच्या प्रोजेक्टवर काम पूर्ण झाल्यावर, GitHub वरील रिपॉझिटरीवर परत जाण्यासाठी वरच्या डाव्या बाजूला असलेल्या हॅमबर्गर मेनू आयकॉन निवडा.
अभिनंदन 🎉 तुम्ही काही पायऱ्यांमध्ये vscode.dev वापरून तुमची रिझ्युमे वेबसाइट तयार केली आहे.
🚀 आव्हान
तुमच्याकडे बदल करण्याची परवानगी असलेली रिमोट रिपॉझिटरी उघडा आणि काही फाईल्स अपडेट करा. पुढे, तुमच्या बदलांसह एक नवीन ब्रँच तयार करण्याचा प्रयत्न करा आणि एक Pull Request तयार करा.
पुनरावलोकन आणि स्व-अभ्यास
VSCode.dev आणि त्याच्या इतर वैशिष्ट्यांबद्दल अधिक वाचा.
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.