13 KiB
وی ایس کوڈ ڈاٹ ڈیوی کے ذریعے ریزیوم ویب سائٹ بنائیں
کتنا زبردست ہوگا اگر کوئی ریکروٹر آپ سے آپ کا ریزیوم مانگے اور آپ انہیں ایک یو آر ایل بھیج دیں؟ 😎
مقاصد
اس اسائنمنٹ کے بعد، آپ سیکھیں گے کہ:
- اپنی ریزیوم کو دکھانے کے لیے ایک ویب سائٹ کیسے بنائیں
ضروریات
- ایک گٹ ہب اکاؤنٹ۔ گٹ ہب پر جائیں اور اگر آپ کے پاس پہلے سے اکاؤنٹ نہیں ہے تو ایک اکاؤنٹ بنائیں۔
مراحل
مرحلہ 1: ایک نیا گٹ ہب ریپوزیٹری بنائیں اور اسے my-resume نام دیں۔
مرحلہ 2: اپنے ریپوزیٹری میں ایک index.html فائل بنائیں۔ ہم گٹ ہب ڈاٹ کام پر کم از کم ایک فائل شامل کریں گے کیونکہ آپ وی ایس کوڈ ڈاٹ ڈیوی پر خالی ریپوزیٹری نہیں کھول سکتے۔
creating a new file لنک پر کلک کریں، index.html نام لکھیں اور Commit new file بٹن منتخب کریں۔
مرحلہ 3: وی ایس کوڈ ڈاٹ ڈیوی کھولیں اور Open Remote Repository بٹن منتخب کریں۔
اپنے ریزیوم سائٹ کے لیے ابھی بنائی گئی ریپوزیٹری کا یو آر ایل کاپی کریں اور اسے ان پٹ باکس میں پیسٹ کریں:
اپنے گٹ ہب یوزر نیم کے ساتھ your-username کو تبدیل کریں
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 انسٹال کریں تاکہ کوڈ ایریا میں ریزیوم ویب سائٹ کو دیکھ سکیں۔
ایکسٹینشنز آئیکن پر کلک کریں اور Codeswing ٹائپ کریں۔ یا تو ایکسپینڈڈ ایکٹیویٹی بار پر نیلے انسٹال بٹن پر کلک کریں یا کوڈ ایریا میں انسٹال بٹن استعمال کریں جو ایکسٹینشن منتخب کرنے پر اضافی معلومات لوڈ کرتا ہے۔ ایکسٹینشن انسٹال کرنے کے فوراً بعد، اپنے کوڈ ایریا میں پروجیکٹ میں تبدیلیاں دیکھیں 😃
یہ وہ چیز ہے جو آپ اپنی اسکرین پر دیکھیں گے جب آپ ایکسٹینشن انسٹال کریں گے۔
اگر آپ اپنی کی گئی تبدیلیوں سے مطمئن ہیں، تو Changes فولڈر پر ہوور کریں اور + بٹن پر کلک کریں تاکہ تبدیلیوں کو اسٹیج کیا جا سکے۔
ایک کمیٹ میسج ٹائپ کریں (پروجیکٹ میں کی گئی تبدیلی کی وضاحت) اور اپنی تبدیلیوں کو کمیٹ کریں check پر کلک کر کے۔ جب آپ اپنے پروجیکٹ پر کام مکمل کر لیں، تو گٹ ہب پر ریپوزیٹری پر واپس جانے کے لیے اوپر بائیں جانب ہیمبرگر مینو آئیکن منتخب کریں۔
مبارک ہو 🎉 آپ نے چند مراحل میں وی ایس کوڈ ڈاٹ ڈیوی کے ذریعے اپنی ریزیوم ویب سائٹ بنا لی ہے۔
🚀 چیلنج
ایک ریموٹ ریپوزیٹری کھولیں جس پر آپ کو تبدیلیاں کرنے کی اجازت ہو اور کچھ فائلز اپ ڈیٹ کریں۔ اگلا، اپنی تبدیلیوں کے ساتھ ایک نئی برانچ بنانے کی کوشش کریں اور ایک پل ریکویسٹ کریں۔
جائزہ اور خود مطالعہ
وی ایس کوڈ ڈاٹ ڈیوی اور اس کی دیگر خصوصیات کے بارے میں مزید پڑھیں۔
ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔