ITDCFeD – Week #1 | سادہ پرسنل ویب پیج (HTML + CSS + JavaScript)
1. تعارف
آئی ٹی درسگاہ کے نئے سرٹیفیکیشن پروگرام آئی ٹی درسگاہ سرٹیفائیڈ فرنٹ اینڈ ڈویلپر (ITDCFeD) کے پہلے ہفتے میں خوش آمدید۔ اس لیکچر میں ایک سادہ مگر خوبصورت Personal Web Page بنایا جائے گا، جس کے ذریعے آپ HTML، CSS اور JavaScript کی بنیادی چیزوں کو عملی طور پر استعمال کریں گے۔ یہ پروجیکٹ absolute beginners کے لیے رکھا گیا ہے، لیکن اگر آپ کو پہلے سے تھوڑا بہت علم ہے تو بھی یہ آپ کے لیے ایک مضبوط ریویژن اور portfolio کی شروعات ثابت ہوگا۔
2. اس لیکچر / پروجیکٹ کے اہداف
اس Week #1 کے اختتام تک آپ:
HTML کے ذریعے ویب پیج کی بنیادی structure (header، sections، lists، buttons وغیرہ) بنا سکیں گے۔
CSS کے ذریعے رنگ، فونٹس، spacing، card‑style سیکشنز اور mobile‑friendly (responsive) ڈیزائن لاگو کر سکیں گے۔
JavaScript کے ذریعے بٹن پر کلک کرنے سے متعلق ایک سادہ سا پیغام / feedback دکھانا سیکھیں گے۔
CodePen پر اپنا کوڈ چلا کر، save کر کے اور لنک شیئر کر کے آن لائن عملاً practice کر سکیں گے۔
یہی وہ بنیاد ہے جس پر اگلے 11 ہفتوں کے تمام فرنٹ اینڈ پروجیکٹس کھڑے ہوں گے۔
3. Live Demo اور Source Code (CodePen)
اس لیکچر کا مکمل working مثال آپ آن لائن براہِ راست دیکھ سکتے ہیں:
🔗 Live Demo + Source Code (CodePen):
https://codepen.io/mmshahid73/pen/azNPPRX
کیا کرنا ہے؟
لنک کھولیں، اوپر رن ہونے والا نتیجہ (Output) دیکھیں۔
CodePen میں اوپر دائیں طرف موجود Fork یا Edit پر کلک کریں تاکہ یہ پروجیکٹ آپ کے اپنے اکاؤنٹ میں copy ہو جائے۔
اب HTML، CSS اور JS کے حصوں میں اپنی مرضی کے مطابق ترمیم کریں (نام، تعارف، رنگ وغیرہ)۔
آخر میں اپنا لنک save کر کے فورم میں شیئر کریں۔
4. Step‑by‑Step گائیڈ (مختصر)
یہاں مختصراً وہ اہم steps دیے جا رہے ہیں جو CodePen میں آپ کو نظر آئیں گے، تاکہ سمجھنے میں آسانی ہو:
HTML حصہ
ایک اوپر والا header جہاں کورس / پیج کا ٹائٹل اور چھوٹا سا تعارف لکھا ہے۔
ایک "میرے بارے میں" سیکشن، جس میں پیراگراف کی صورت میں اپنا تعارف رکھا گیا ہے۔
ایک Skills سیکشن، جس میں آپ کی مہارتوں کی لسٹ (HTML، CSS، JavaScript وغیرہ) دکھائی جاتی ہے۔
ایک Contact / Button حصہ، جہاں ایک بٹن پر کلک کرنے سے پیغام ظاہر ہوتا ہے۔
CSS حصہ
پورے پیج کے رنگ، فونٹس اور background gradient۔
ہر سیکشن کو card‑style box میں لانے کے لیے padding، margin اور shadow کا استعمال۔
Skills کو خوبصورت badges کی صورت میں دکھانے کے لیے list‑items پر styling۔
Mobile screen پر بہتر display کے لیے media query کے ذریعے تھوڑی سی responsive سیٹنگ۔
JavaScript حصہ
ایک بٹن پر click event لگایا گیا ہے۔
جب user بٹن پر کلک کرتا ہے تو نیچے پیغام نظر آتا ہے (مثلاً "شکریہ، آپ کا پیغام موصول ہو گیا ہے")۔
تھوڑی دیر بعد پیغام خود بخود غائب ہو جاتا ہے، تاکہ صفحہ صاف رہے۔
طلبہ کو encourage کریں کہ وہ CodePen میں JS کے میسج، رنگ، time وغیرہ اپنی مرضی سے بدل کر experiment کریں۔
5. اسائنمنٹ / Homework – Week #1
اس ہفتے کی کامیاب تکمیل کے لیے ہر طالب علم کو درج ذیل کام کرنا ہیں:
اوپر دیے گئے CodePen لنک کو fork کریں (اپنے اکاؤنٹ میں کاپی بنائیں)۔
"میرے بارے میں" سیکشن میں اپنے بارے میں اصل اور مکمل تعارف اردو / انگریزی میں لکھیں (کم از کم 3–4 لائنیں)۔
Skills لسٹ میں کم از کم 5 skills شامل کریں (مثال: HTML، CSS، JavaScript، MS Office، Graphic Designing، Networking وغیرہ)۔
رنگوں، فونٹس یا background میں کم از کم دو visible تبدیلیاں کریں تاکہ پیج آپ کی اپنی personality کو reflect کرے۔
Contact بٹن کے میسج کو اپنا custom پیغام بنائیں (مثال کے طور پر: "آپ کا Feedback ہمارے لیے قیمتی ہے" وغیرہ)۔
سب سے اہم:
اپنا CodePen لنک ITDarasgah فورم کے Week #1 تھریڈ میں reply کی صورت میں پوسٹ کریں۔
اگر ممکن ہو تو ایک اسکرین شاٹ بھی attach کریں۔
یہ homework ITDCFeD سرٹیفیکیشن میں آپ کی progress کا حصہ شمار ہوگا۔
6. شیڈول اور اگلے لیکچرز
ITDCFeD میں لیکچرز اور پروجیکٹس کے لیے ہر منگل کا دن مخصوص کیا گیا ہے:
منگل، 16 دسمبر – Week #1: سادہ پرسنل ویب پیج (یہ لیکچر)
منگل، 23 دسمبر – Week #2: Interactive Form Project (HTML فارم + Validation + بنیادی JS)
منگل، 30 دسمبر – Week #3: اگلا فرنٹ اینڈ پروجیکٹ (تفصیل جلد شیئر کی جائے گی)
ہفتہ وار بنیاد پر اسی تھریڈ کے اندر، اور نئے Weeks کے لیے الگ تھریڈز / بلاگ پوسٹس کے ذریعے مواد فراہم کیا جائے گا۔
7. سرٹیفیکیشن سے تعلق
یہ Week #1 پروجیکٹ ITDCFeD سرٹیفیکیشن کی official requirements کا حصہ ہے۔ آگے چل کر:
کم از کم مخصوص تعداد میں ہفتہ وار پروجیکٹس مکمل کرنا،
اپنا چھوٹا سا فرنٹ اینڈ پورٹ فولیو تیار کرنا،
اور آخر میں ایک مختصر آن لائن ٹیسٹ پاس کرنا
اس سرٹیفکیشن کی بنیادی شرائط میں شامل ہوگا۔ اس لیے ہر پروجیکٹ کو سنجیدگی سے، بہترین کوشش کے ساتھ مکمل کریں، کیونکہ یہی آپ کے عملی skill‑set اور CV کی مضبوط بنیاد بنے گا۔
8. اختتامی پیغام / Call to Action
اگر آپ ویب ڈویلپمنٹ میں کیریئر بنانا چاہتے ہیں، freelancing میں جانا چاہتے ہیں، یا صرف اپنی IT skill بہتر کرنا چاہتے ہیں تو ITDCFeD کا یہ پہلا قدم آپ کے لیے ایک سنہری موقع ہے۔ ابھی CodePen لنک کھولیں، پروجیکٹ کو fork کریں، اپنا personal web page تیار کریں اور ITDarasgah فورم کے Week #1 تھریڈ میں شیئر کر کے اس تعلیمی سفر کا باقاعدہ آغاز کریں۔
اللہ تعالیٰ اس سلسلے کو آپ سب کے لیے علم، ہنر اور روزگار کے دروازے کھولنے کا ذریعہ بنائے۔
الکمونیا بلاگ – علم، تحقیق، آئی ٹی اور ویڈیو ٹریننگ کا مرکز الکمونیا بلاگ ایک جامع علمی و تحقیقی پلیٹ فارم ہے جہاں آپ کو اسلامی مضامین، قرآنی موضوعات، احادیث کی تشریحات، تاریخِ اسلام، شخصیات پر تحقیقی مقالات، ادب اور فلسفہ جیسے موضوعات کے ساتھ ساتھ آئی ٹی، کمپیوٹر سائنس، ڈیجیٹل ٹولز اور پروفیشنل اسکلز پر مبنی مواد بھی دستیاب ہے۔ مزید برآں، یہاں آپ کو ویڈیو ٹریننگز اور آن لائن لرننگ کورسز بھی ملتے ہیں جو جدید دور کے تقاضوں کے مطابق آپ کی صلاحیتوں کو نکھارتے ہیں۔
کوئی تبصرے نہیں: