# 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.pa.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.pa.png) **ਕਦਮ 4:** `index.html` ਫਾਈਲ ਖੋਲ੍ਹੋ, ਹੇਠਾਂ ਦਿੱਤਾ ਕੋਡ ਆਪਣੇ ਕੋਡ ਖੇਤਰ ਵਿੱਚ ਪੇਸਟ ਕਰੋ ਅਤੇ ਸੇਵ ਕਰੋ।
ਤੁਹਾਡੇ ਰਿਜ਼ੂਮੇ ਵੈਬਸਾਈਟ ਦੇ ਸਮੱਗਰੀ ਲਈ HTML ਕੋਡ। ਤੁਹਾਡਾ ਨਾਮ ਇੱਥੇ ਲਿਖੋ!

ਬਾਰੇ

ਆਪਣੇ ਬਾਰੇ ਕੁਝ ਲਿਖੋ!

ਕੰਮ ਦਾ ਤਜਰਬਾ

ਨੌਕਰੀ ਦਾ ਟਾਈਟਲ

ਸੰਸਥਾ ਦਾ ਨਾਮ ਇੱਥੇ ਲਿਖੋ | ਸ਼ੁਰੂ ਮਹੀਨਾ – ਖਤਮ ਮਹੀਨਾ

  • ਟਾਸਕ 1 - ਤੁਸੀਂ ਕੀ ਕੀਤਾ!
  • ਟਾਸਕ 2 - ਤੁਸੀਂ ਕੀ ਕੀਤਾ!
  • ਤੁਹਾਡੇ ਯੋਗਦਾਨ ਦੇ ਨਤੀਜੇ/ਅਸਰ ਲਿਖੋ

ਨੌਕਰੀ ਦਾ ਟਾਈਟਲ 2

ਸੰਸਥਾ ਦਾ ਨਾਮ ਇੱਥੇ ਲਿਖੋ | ਸ਼ੁਰੂ ਮਹੀਨਾ – ਖਤਮ ਮਹੀਨਾ

  • ਟਾਸਕ 1 - ਤੁਸੀਂ ਕੀ ਕੀਤਾ!
  • ਟਾਸਕ 2 - ਤੁਸੀਂ ਕੀ ਕੀਤਾ!
  • ਤੁਹਾਡੇ ਯੋਗਦਾਨ ਦੇ ਨਤੀਜੇ/ਅਸਰ ਲਿਖੋ
ਆਪਣੇ ਰਿਜ਼ੂਮੇ ਦੇ ਵੇਰਵੇ _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 ਟਾਈਪ ਕਰੋ। ਜਾਂ ਤਾਂ ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲੋਡ ਕਰਨ ਲਈ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਚੁਣਨ 'ਤੇ ਕੋਡ ਖੇਤਰ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ _ਬਲੂ ਇੰਸਟਾਲ ਬਟਨ_ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਹੋਏ ਬਦਲਾਵਾਂ ਨੂੰ ਦੇਖੋ 😃। ![ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰੋ](../../../../8-code-editor/images/install-extension.gif) ਇਹ ਤੁਹਾਡੇ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦੇਵੇਗਾ ਜਦੋਂ ਤੁਸੀਂ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰ ਲਵੋਗੇ। ![Codeswing ਐਕਸਟੈਂਸ਼ਨ](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.pa.png) ਜੇ ਤੁਸੀਂ ਕੀਤੇ ਬਦਲਾਵਾਂ ਨਾਲ ਸੰਤੁਸ਼ਟ ਹੋ, ਤਾਂ `Changes` ਫੋਲਡਰ 'ਤੇ ਹਵਰ ਕਰੋ ਅਤੇ ਬਦਲਾਵਾਂ ਨੂੰ ਸਟੇਜ ਕਰਨ ਲਈ `+` ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਕਮਿਟ ਮੈਸੇਜ _(ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕੀਤੇ ਬਦਲਾਵਾਂ ਦਾ ਵੇਰਵਾ)_ ਟਾਈਪ ਕਰੋ ਅਤੇ `check` 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਆਪਣੇ ਬਦਲਾਵਾਂ ਨੂੰ ਕਮਿਟ ਕਰੋ। ਜਦੋਂ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਕੰਮ ਮੁਕੰਮਲ ਹੋ ਜਾਵੇ, ਤਾਂ GitHub 'ਤੇ ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਵਾਪਸ ਜਾਣ ਲਈ ਉੱਪਰ ਖੱਬੇ ਹਿਸੇ ਵਿੱਚ ਹੈਮਬਰਗਰ ਮੀਨੂ ਆਈਕਨ ਚੁਣੋ। ਵਧਾਈਆਂ 🎉 ਤੁਸੀਂ ਕੁਝ ਕਦਮਾਂ ਵਿੱਚ vscode.dev ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ ਰਿਜ਼ੂਮੇ ਵੈਬਸਾਈਟ ਬਣਾਈ ਹੈ। ## 🚀 ਚੁਣੌਤੀ ਕਿਸੇ ਰਿਮੋਟ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਖੋਲ੍ਹੋ ਜਿਸ 'ਤੇ ਤੁਹਾਨੂੰ ਬਦਲਾਵ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਹੈ ਅਤੇ ਕੁਝ ਫਾਈਲਾਂ ਅਪਡੇਟ ਕਰੋ। ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਆਪਣੇ ਬਦਲਾਵਾਂ ਨਾਲ ਇੱਕ ਨਵੀਂ ਸ਼ਾਖਾ ਬਣਾਉ ਅਤੇ ਇੱਕ ਪੁਲ ਰਿਕਵੇਸਟ ਬਣਾਉ। ## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ [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) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਨਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।