16 KiB
vscode.dev प्रयोग गरेर रिजुमे-वेबसाइट बनाउनुहोस्
कति राम्रो होला जब कुनै भर्तीकर्ताले तपाईंको रिजुमे माग्छन् र तपाईंले उनीहरूलाई एउटा URL पठाउनुहुन्छ? 😎
उद्देश्यहरू
यस असाइनमेन्टपछि, तपाईंले सिक्नुहुनेछ:
- आफ्नो रिजुमे प्रदर्शन गर्न वेबसाइट बनाउने
पूर्व-आवश्यकताहरू
- GitHub खाता। GitHub मा जानुहोस् र यदि तपाईंले पहिले नै खाता बनाउनु भएको छैन भने खाता बनाउनुहोस्।
चरणहरू
चरण १: नयाँ GitHub Repository बनाउनुहोस् र यसलाई my-resume नाम दिनुहोस्।
चरण २: आफ्नो Repository मा index.html फाइल बनाउनुहोस्। हामी github.com मा कम्तिमा एउटा फाइल थप्नेछौं किनभने तपाईं खाली Repository लाई vscode.dev मा खोल्न सक्नुहुन्न।
creating a new file लिंकमा क्लिक गर्नुहोस्, index.html नाम टाइप गर्नुहोस् र Commit new file बटन चयन गर्नुहोस्।
चरण ३: VSCode.dev खोल्नुहोस् र Open Remote Repository बटन चयन गर्नुहोस्।
तपाईंले आफ्नो रिजुमे साइटको लागि सिर्जना गरेको Repository को URL कपी गर्नुहोस् र इनपुट बक्समा पेस्ट गर्नुहोस्:
your-username लाई आफ्नो GitHub प्रयोगकर्ता नामले बदल्नुहोस्
https://github.com/your-username/my-resume
✅ सफल भएमा, तपाईं आफ्नो प्रोजेक्ट र index.html फाइल ब्राउजरको टेक्स्ट एडिटरमा खुला भएको देख्नुहुनेछ।
चरण ४: 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>सीप १!</li>
<li>सीप २!</li>
<li>सीप ३!</li>
<li>सीप ४!</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>कार्य १ - तपाईंले के गर्नुभयो लेख्नुहोस्!</li>
<li>कार्य २ - तपाईंले के गर्नुभयो लेख्नुहोस्!</li>
<li>तपाईंको योगदानको परिणाम/प्रभाव लेख्नुहोस्</li>
</ul>
<h3>कामको शीर्षक २</h3>
<p>
यहाँ संस्थाको नाम लेख्नुहोस् | सुरु महिना – अन्त्य महिना
</p>
<ul>
<li>कार्य १ - तपाईंले के गर्नुभयो लेख्नुहोस्!</li>
<li>कार्य २ - तपाईंले के गर्नुभयो लेख्नुहोस्!</li>
<li>तपाईंको योगदानको परिणाम/प्रभाव लेख्नुहोस्</li>
</ul>
</section>
</article>
</main>
</body>
</html>
HTML कोडमा placeholder text लाई आफ्नो रिजुमे विवरणले बदल्नुहोस्।
चरण ५: My-Resume फोल्डरमा होभर गर्नुहोस्, New File ... आइकनमा क्लिक गर्नुहोस् र आफ्नो प्रोजेक्टमा २ नयाँ फाइलहरू बनाउनुहोस्: style.css र codeswing.json फाइलहरू।
चरण ६: 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;
}
चरण ६: codeswing.json फाइल खोल्नुहोस्, तलको कोड पेस्ट गर्नुहोस् र बचत गर्नुहोस्।
{
"scripts": [],
"styles": []
}
चरण ७: Codeswing extension स्थापना गर्नुहोस् ताकि रिजुमे वेबसाइटलाई कोड क्षेत्रमा देख्न सकियोस्।
Extensions आइकनमा क्लिक गर्नुहोस् र Codeswing टाइप गर्नुहोस्। विस्तारको थप जानकारी लोड भएपछि, ब्लू इन्स्टल बटन मा क्लिक गरेर स्थापना गर्नुहोस्। विस्तार स्थापना गरेपछि, आफ्नो कोड क्षेत्रमा प्रोजेक्टमा परिवर्तनहरू देख्नुहोस् 😃।
यो तपाईंको स्क्रिनमा देखिनेछ जब तपाईंले विस्तार स्थापना गर्नुहुन्छ।
यदि तपाईंले गरेका परिवर्तनहरू सन्तोषजनक छन् भने, Changes फोल्डरमा होभर गर्नुहोस् र + बटनमा क्लिक गरेर परिवर्तनहरू स्टेज गर्नुहोस्।
कमिट सन्देश टाइप गर्नुहोस् (प्रोजेक्टमा तपाईंले गरेको परिवर्तनको विवरण) र check क्लिक गरेर परिवर्तनहरू कमिट गर्नुहोस्। प्रोजेक्टमा काम सकिएपछि, GitHub मा Repository फर्कनको लागि माथि बायाँ रहेको ह्याम्बर्गर मेनु आइकन चयन गर्नुहोस्।
बधाई छ 🎉 तपाईंले केही चरणहरूमा vscode.dev प्रयोग गरेर आफ्नो रिजुमे वेबसाइट सिर्जना गर्नुभयो।
🚀 चुनौती
तपाईंले परिवर्तन गर्न अनुमति पाएको कुनै रिमोट Repository खोल्नुहोस् र केही फाइलहरू अपडेट गर्नुहोस्। त्यसपछि, आफ्नो परिवर्तनहरू सहित नयाँ ब्रान्च सिर्जना गर्ने प्रयास गर्नुहोस् र Pull Request बनाउनुहोस्।
समीक्षा र आत्म-अध्ययन
VSCode.dev र यसको अन्य सुविधाहरूको बारेमा थप पढ्नुहोस्।
अस्वीकरण:
यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी यथार्थताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।