# vscode.dev का उपयोग करके एक रिज़्यूमे वेबसाइट बनाएं _कितना अच्छा होगा अगर कोई रिक्रूटर आपसे आपका रिज़्यूमे मांगे और आप उन्हें एक URL भेज दें?_ 😎 ## उद्देश्य इस असाइनमेंट के बाद, आप सीखेंगे: - अपने रिज़्यूमे को दिखाने के लिए एक वेबसाइट बनाना ### आवश्यकताएँ 1. एक GitHub अकाउंट। [GitHub](https://github.com/) पर जाएं और यदि आपने पहले से अकाउंट नहीं बनाया है तो एक नया अकाउंट बनाएं। ## चरण **चरण 1:** एक नया GitHub रिपॉजिटरी बनाएं और इसे `my-resume` नाम दें। **चरण 2:** अपने रिपॉजिटरी में एक `index.html` फाइल बनाएं। हम github.com पर कम से कम एक फाइल जोड़ेंगे क्योंकि आप vscode.dev पर खाली रिपॉजिटरी नहीं खोल सकते। `creating a new file` लिंक पर क्लिक करें, नाम `index.html` टाइप करें और `Commit new file` बटन चुनें। ![github.com पर नई फाइल बनाएं](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.hi.png) **चरण 3:** [VSCode.dev](https://vscode.dev) खोलें और `Open Remote Repository` बटन चुनें। उस रिपॉजिटरी का URL कॉपी करें जिसे आपने अभी अपने रिज़्यूमे साइट के लिए बनाया है और इसे इनपुट बॉक्स में पेस्ट करें: _`your-username` को अपने GitHub यूजरनेम से बदलें_ ``` https://github.com/your-username/my-resume ``` ✅ यदि सफल हुआ, तो आप अपने प्रोजेक्ट और `index.html` फाइल को ब्राउज़र के टेक्स्ट एडिटर में खुला हुआ देखेंगे। ![नई फाइल बनाएं](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.hi.png) **चरण 4:** `index.html` फाइल खोलें, नीचे दिए गए कोड को अपने कोड एरिया में पेस्ट करें और सेव करें।
HTML कोड जो आपकी रिज़्यूमे वेबसाइट के कंटेंट के लिए जिम्मेदार है। आपका नाम यहां लिखें!

मेरे बारे में

अपने बारे में कुछ लिखें!

कार्य अनुभव

जॉब टाइटल

संगठन का नाम यहां लिखें | प्रारंभ महीना – समाप्ति महीना

  • कार्य 1 - आपने क्या किया, लिखें!
  • कार्य 2 - आपने क्या किया, लिखें!
  • अपने योगदान के परिणाम/प्रभाव लिखें

जॉब टाइटल 2

संगठन का नाम यहां लिखें | प्रारंभ महीना – समाप्ति महीना

  • कार्य 1 - आपने क्या किया, लिखें!
  • कार्य 2 - आपने क्या किया, लिखें!
  • अपने योगदान के परिणाम/प्रभाव लिखें
अपने रिज़्यूमे की जानकारी को HTML कोड में _प्लेसहोल्डर टेक्स्ट_ के स्थान पर जोड़ें। **चरण 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 एक्सटेंशन` इंस्टॉल करें ताकि आप कोड एरिया में रिज़्यूमे वेबसाइट को विज़ुअलाइज़ कर सकें। _`Extensions`_ आइकन पर क्लिक करें और Codeswing टाइप करें। या तो विस्तारित एक्टिविटी बार पर _ब्लू इंस्टॉल बटन_ पर क्लिक करें या कोड एरिया में इंस्टॉल बटन का उपयोग करें। एक्सटेंशन इंस्टॉल करने के तुरंत बाद, अपने प्रोजेक्ट में बदलाव देखें 😃 ![एक्सटेंशन इंस्टॉल करें](../../../../8-code-editor/images/install-extension.gif) एक्सटेंशन इंस्टॉल करने के बाद, आपकी स्क्रीन पर यह दिखाई देगा। ![Codeswing एक्सटेंशन का उपयोग](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.hi.png) यदि आप अपने द्वारा किए गए बदलावों से संतुष्ट हैं, तो `Changes` फोल्डर पर होवर करें और `+` बटन पर क्लिक करें। एक कमिट मैसेज टाइप करें _(आपने प्रोजेक्ट में जो बदलाव किए हैं उसका विवरण)_ और `check` पर क्लिक करके अपने बदलावों को कमिट करें। प्रोजेक्ट पर काम पूरा करने के बाद, टॉप लेफ्ट पर हैमबर्गर मेनू आइकन चुनें और GitHub पर रिपॉजिटरी पर वापस जाएं। बधाई हो 🎉 आपने कुछ ही चरणों में vscode.dev का उपयोग करके अपनी रिज़्यूमे वेबसाइट बना ली है। ## 🚀 चुनौती एक रिमोट रिपॉजिटरी खोलें जिसमें आपके पास बदलाव करने की अनुमति हो और कुछ फाइलें अपडेट करें। इसके बाद, अपने बदलावों के साथ एक नई ब्रांच बनाएं और एक Pull Request करें। ## समीक्षा और स्व-अध्ययन [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) और इसकी अन्य विशेषताओं के बारे में अधिक पढ़ें। --- **अस्वीकरण**: यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल दस्तावेज़, जो इसकी मूल भाषा में है, को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।