یہ کورس سیکھنے والوں کو کوڈنگ کے صفر تجربے سے لے کر HTML، CSS، Bootstrap، اور JavaScript کے ذریعے مکمل، ریسپانسو اسٹیٹک ویب سائٹس بنانے تک لے جاتا ہے۔ اس دوران آپ Claude، ChatGPT، اور GitHub Copilot جیسے AI ٹولز کا استعمال کوڈ لکھنے، ڈیبگ کرنے اور بہتر بنانے کے لیے سیکھیں گے۔
ماڈیول 1: ویب ڈیولپمنٹ اور AI کا تعارف
- ویب سائٹ کیا ہے؟ انٹرنیٹ اور ویب براؤزرز کس طرح کام کرتے ہیں
- فرنٹ اینڈ بمقابلہ بیک اینڈ ڈیولپمنٹ (یہ کورس کہاں فٹ بیٹھتا ہے)
- HTML، CSS، Bootstrap، اور JavaScript کا مختصر تعارف — ہر ایک کیا کرتا ہے
- AI کیا ہے، اور یہ کوڈنگ میں کس طرح مدد کر سکتا ہے؟ (کوڈ لکھنا، ایررز سمجھانا، وقت بچانا)
- کوڈ ایڈیٹر (Visual Studio Code) سیٹ اپ کرنا اور مفید ایکسٹینشنز انسٹال کرنا
- AI کوڈنگ اسسٹنٹ سیٹ اپ کرنا (مثلاً GitHub Copilot ایکسٹینشن، یا Claude/ChatGPT کو براؤزر میں ایڈیٹر کے ساتھ استعمال کرنا)
- پہلا پروجیکٹ فولڈر اور فائل بنانا
حصہ الف — HTML
ماڈیول 2: HTML کی بنیادی معلومات
- HTML کیا ہے؟ ٹیگز، ایلیمنٹس، اور اٹریبیوٹس کو سمجھنا
- بنیادی پیج ساخت:
<!DOCTYPE>،<html>،<head>،<body> - ہیڈنگز، پیراگرافس، اور ٹیکسٹ فارمیٹنگ ٹیگز
- اپنا پہلا ویب پیج بنانا
- غیر مانوس HTML ٹیگز کو آسان الفاظ میں سمجھانے کے لیے AI کا استعمال
ماڈیول 3: HTML — پیج کا مواد بنانا
- لنکس (
<a>) اور صفحات کے درمیان نیویگیشن - تصاویر (
<img>) اور میڈیا شامل کرنا - فہرستیں: آرڈرڈ، ان آرڈرڈ، اور نیسٹڈ لسٹس
- ٹیبلز: رو، کالم، اور ہیڈرز
- سادہ پرامپٹ سے ابتدائی HTML ساخت تیار کروانے کے لیے AI سے مدد لینا
ماڈیول 4: HTML — فارمز اور ساخت
- سیمینٹک ٹیگز:
<header>،<nav>،<section>،<footer>،<div>،<span> - فارمز بنانا: ان پٹ فیلڈز، بٹن، ڈراپ ڈاؤن، چیک باکسز، ریڈیو بٹنز
- فارم لیبلز اور بنیادی فارم ویلیڈیشن اٹریبیوٹس
- عملی مشق: ایک سادہ ملٹی سیکشن ویب پیج بنائیں (About، Contact فارم، Gallery)، اور اپنے کوڈ کی غلطیاں چیک کروانے کے لیے AI کا استعمال کریں
حصہ ب — CSS
ماڈیول 5: CSS کی بنیادی معلومات
- CSS کیا ہے؟ ان لائن، انٹرنل، اور ایکسٹرنل اسٹائل شیٹس
- CSS سنٹیکس: سلیکٹرز، پراپرٹیز، اور ویلیوز
- ٹیکسٹ کو اسٹائل کرنا: فونٹس، رنگ، سائز، الائنمنٹ
- باکس ماڈل: مارجن، بارڈر، پیڈنگ، چوڑائی، اونچائی
- ویب پیج کے لیے رنگوں کے امتزاج اور فونٹ جوڑوں کی تجویز کے لیے AI کا استعمال
ماڈیول 6: CSS — لے آؤٹ اور پوزیشننگ
- کلاس بمقابلہ ID سلیکٹرز
- ڈسپلے پراپرٹی: بلاک، ان لائن، ان لائن-بلاک
- پوزیشننگ: static، relative، absolute، fixed
- Flexbox کی بنیادی معلومات: مواد کو ترتیب دینا اور الائن کرنا
- لے آؤٹ کے متوقع طریقے سے کام نہ کرنے کی وجہ AI سے پوچھنا (AI کے ساتھ ڈیبگنگ)
ماڈیول 7: CSS — ایڈوانس اسٹائلنگ
- CSS Grid کی بنیادی معلومات: سادہ گرڈ لے آؤٹس بنانا
- بیک گراؤنڈز، گریڈینٹس، اور شیڈوز
- ہوور ایفیکٹس اور سادہ ٹرانزیشنز/اینیمیشنز
- ریسپانسو ڈیزائن کی بنیادی معلومات: موبائل/ٹیبلٹ/ڈیسک ٹاپ کے لیے میڈیا کوئریز
- عملی مشق: ماڈیول 4 میں بنائے گئے ویب پیج کو پیشہ ورانہ بنانے کے لیے AI پرامپٹس سے CSS آئیڈیاز حاصل کریں اور بہتر بنائیں
حصہ ج — Bootstrap فریم ورک
ماڈیول 8: Bootstrap کا تعارف
- Bootstrap کیا ہے اور اسے کیوں استعمال کیا جائے؟
- CDN کے ذریعے Bootstrap لنک کرنا
- Bootstrap گرڈ سسٹم: کنٹینرز، رو، اور کالمز
- لے آؤٹس کو خودکار طور پر ریسپانسو بنانا
- Bootstrap کلاس ناموں اور ان کے مقصد کو جلدی یاد کرنے کے لیے AI کا استعمال
ماڈیول 9: Bootstrap کے اجزاء (Components)
- نیو بار (ریسپانسو نیویگیشن مینو)
- بٹنز، کارڈز، اور بیجز
- Bootstrap فارمز اور فارم اسٹائلنگ
- الرٹس، موڈلز، اور ٹول ٹپس
- تیار Bootstrap کمپوننٹ بنوانے کے لیے AI سے پرامپٹ کے ذریعے مدد لینا
ماڈیول 10: Bootstrap — عملی پیج بنانا
- کیروسل/امیج سلائیڈر
- Bootstrap یوٹیلیٹی کلاسز (اسپیسنگ، ٹیکسٹ الائنمنٹ، رنگ)
- Bootstrap اجزاء کا استعمال کرتے ہوئے ریسپانسو لینڈنگ پیج بنانا
- عملی مشق: کسٹم CSS کی بجائے Bootstrap استعمال کرتے ہوئے ویب پیج لے آؤٹ دوبارہ بنائیں، لے آؤٹ کو تیزی سے ترتیب دینے کے لیے AI کی مدد لیں
حصہ د — JavaScript
ماڈیول 11: JavaScript کی بنیادی معلومات
- JavaScript کیا ہے اور یہ ویب سائٹ پر کیا کرتا ہے؟
- ویری ایبلز، ڈیٹا ٹائپس، اور بنیادی آپریٹرز
- JS فائل لکھنا اور اسے HTML پیج سے لنک کرنا
- کوڈ ٹیسٹ کرنے کے لیے براؤزر کنسول کا استعمال
- کوڈ کی ایک لائن کیا کر رہی ہے یہ سمجھانے کے لیے AI کا استعمال
ماڈیول 12: JavaScript — لاجک اور کنٹرول
- شرطیہ بیانات: if، else، else if
- لوپس: for اور while
- فنکشنز: بنانا اور کال کرنا
- ارے (arrays) اور بنیادی array میتھڈز
- اس طرح کے پرامپٹس کی مشق کرنا: "ایک فنکشن لکھیں جو چیک کرے کہ فارم فیلڈ خالی ہے یا نہیں"
ماڈیول 13: JavaScript اور DOM
- DOM (Document Object Model) کیا ہے؟
- ایلیمنٹس منتخب کرنا (getElementById، querySelector)
- ٹیکسٹ، اسٹائلز، اور مواد کو ڈائنامک طور پر تبدیل کرنا
- ایونٹس ہینڈل کرنا: کلک، ہوور، فارم سبمٹ
- خراب DOM کوڈ کو درست کرنے کے لیے AI کا استعمال (ڈیبگنگ کی مشق)
ماڈیول 14: JavaScript — انٹرایکٹو فیچرز
- سادہ انٹرایکٹو عناصر بنانا: امیج سلائیڈرز، ٹوگل مینوز، فارم ویلیڈیشن
- مواد دکھانا/چھپانا (accordions، tabs)
- JavaScript کے ساتھ سادہ فارم ویلیڈیشن
- عملی مشق: Bootstrap پیج میں انٹرایکٹو فیچرز شامل کریں (موبائل مینو ٹوگل، فارم ویلیڈیشن)، پہلا مسودہ AI سے بنوائیں اور پھر خود بہتر بنائیں
ماڈیول 15: AI کوڈنگ ٹولز کے ساتھ مؤثر طریقے سے کام کرنا
- خلاصہ: ویب ڈیولپمنٹ کے لیے کون سے AI ٹولز مفید ہیں (Claude، ChatGPT، GitHub Copilot)
- واضح کوڈنگ پرامپٹس لکھنے کا طریقہ (مخصوص رہیں: کون سا پیج، کون سا فیچر، کیسا اسٹائل)
- AI کا استعمال ان کاموں کے لیے: ابتدائی کوڈ تیار کرنا، ایررز سمجھانا، بہتریوں کی تجویز دینا، کمنٹس لکھنا
- اہم عادت: استعمال سے پہلے ہمیشہ AI کا تیار کردہ کوڈ پڑھیں اور سمجھیں — کبھی بھی بغیر سمجھے کاپی پیسٹ نہ کریں
- AI کوڈ میں غلطیوں، پرانے طریقوں، یا اپنے پروجیکٹ سے مطابقت نہ رکھنے والی چیزوں کو چیک کرنا
- عملی مشق: ایک چھوٹی فیچر ریکویسٹ (مثلاً "ڈارک موڈ ٹوگل شامل کریں") لیں اور AI کی مدد سے پرامپٹ سے لے کر مکمل کوڈ تک کام کریں
ماڈیول 16: حتمی پروجیکٹ — AI کی مدد سے مکمل ویب سائٹ
- مکمل ویب سائٹ کی منصوبہ بندی: ہوم پیج، About، سروسز/پورٹ فولیو، کانٹیکٹ پیج
- HTML کے ساتھ پروجیکٹ کی ساخت بنانا (بار بار دہرائے جانے والے کام تیز کرنے کے لیے AI کا استعمال)
- CSS اور Bootstrap کے ساتھ ریسپانسو ڈیزائن کے لیے اسٹائلنگ (اسٹائل تجاویز کے لیے AI کا استعمال)
- JavaScript انٹرایکٹیویٹی شامل کرنا (نیویگیشن، فارمز، سلائیڈرز)، مسائل حل کرنے کے لیے AI کی مدد لینا
- مختلف اسکرین سائزز پر ویب سائٹ کو ٹیسٹ کرنا (ریسپانسو چیک)
ماڈیول 17: پبلشنگ اور کورس کا اختتام
- اسٹیٹک ویب سائٹ ہوسٹ کرنے کی بنیادی معلومات (GitHub Pages، Netlify، یا اسی طرح کے مفت آپشنز)
- ڈومین نیمز کی مختصر وضاحت
- حتمی پروجیکٹ کا جائزہ اور فیڈ بیک
- HTML، CSS، Bootstrap، JavaScript، اور AI کی مدد سے ڈیولپمنٹ میں سیکھی گئی اہم باتوں کا خلاصہ
- سوال و جواب کی نشست اور کورس مکمل ہونے کا سرٹیفکیٹ/تشخیص (اختیاری)