فرنٹ اینڈ کیا ہے؟ — وائب کوڈنگ سے اپنا پہلا ویب پیج بنائیں

پچھلی گائیڈ میں ہم نے ٹولز کا جائزہ لیا۔ اب وقت ہے سمجھنے کا کہ جب AI کوڈ لکھتا ہے تو وہ اصل میں کیا بنا رہا ہوتا ہے — اور اس کی شروعات فرنٹ اینڈ سے ہوتی ہے۔

فرنٹ اینڈ کا مطلب — آسان الفاظ میں

سوچیں آپ ایک دکان میں جاتے ہیں۔ آپ کو کیا نظر آتا ہے؟ شو کیس، سائن بورڈ، مصنوعات کی ترتیب، رنگ، روشنی۔ یہ سب دکان کا “فرنٹ” ہے — جو گاہک دیکھتا ہے۔

ویب سائٹ میں بھی یہی ہوتا ہے:

• فرنٹ اینڈ (Front End) = جو آپ سکرین پر دیکھتے ہیں — بٹن، رنگ، تصاویر، مینیو
• بیک اینڈ (Back End) = جو پیچھے چلتا ہے — ڈیٹا، لاگ ان، حساب کتاب (یہ اگلی گائیڈ میں)

آج ہم صرف فرنٹ اینڈ کی بات کریں گے۔

فرنٹ اینڈ کی تین بنیادی چیزیں

ہر ویب سائٹ جو آپ دیکھتے ہیں — چاہے فیس بک ہو، یوٹیوب ہو، یا اردو اے آئی — تین چیزوں سے بنی ہے:

1. HTML — ڈھانچہ (عمارت کی اینٹیں)

HTML (ایچ ٹی ایم ایل) ویب پیج کا ڈھانچہ بناتا ہے۔ جیسے عمارت بنانے سے پہلے اینٹیں لگتی ہیں — ویب سائٹ بنانے سے پہلے HTML لگتا ہے۔

HTML بتاتا ہے:

• یہاں ایک ہیڈنگ ہوگی
• یہاں ایک تصویر آئے گی
• یہاں ایک بٹن ہوگا
• یہاں ایک فارم ہوگا

2. CSS — خوبصورتی (رنگ روگن)

CSS (سی ایس ایس) ویب پیج کو خوبصورت بناتا ہے۔ HTML نے اینٹیں لگائیں، CSS نے رنگ کیا۔

CSS بتاتا ہے:

• بٹن کا رنگ نیلا ہوگا
• فونٹ سائز بڑا ہوگا
• تصویر گول ہوگی
• موبائل پر لے آؤٹ بدلے گا

3. JavaScript — حرکت (بجلی کا کنکشن)

JavaScript (جاوا سکرپٹ) ویب پیج کو چلاتا ہے۔ HTML نے ڈھانچہ بنایا، CSS نے سجایا، JavaScript نے زندگی ڈالی۔

JavaScript کرتا ہے:

• بٹن دبائیں تو کچھ ہو
• فارم بھریں تو ڈیٹا جائے
• سکرول کریں تو نئی چیزیں لوڈ ہوں
• غلط معلومات ڈالیں تو غلطی دکھائے

وائب کوڈنگ میں آپ کو یہ سب سیکھنا نہیں ہے

یہی تو وائب کوڈنگ کی خوبصورتی ہے — آپ کو HTML، CSS، JavaScript لکھنا نہیں آنا چاہیے۔ آپ کو بس سمجھنا ہے کہ یہ کیا ہیں تاکہ AI کو بہتر ہدایات دے سکیں۔

فرق دیکھیں:

بری ہدایت: “ایک ویب سائٹ بنا دو”

اچھی ہدایت: “ایک پورٹ فولیو ویب پیج بنا دو جس میں اوپر نیلے رنگ کا ہیڈر ہو، درمیان میں میرا نام اور تعارف ہو، نیچے رابطہ فارم ہو، اور موبائل پر بھی اچھا دکھے”

دوسری ہدایت میں آپ نے فرنٹ اینڈ کی زبان استعمال کی — ہیڈر، رنگ، لے آؤٹ، موبائل ریسپانسو — اور AI بالکل وہی بنائے گا جو آپ چاہتے ہیں۔

عملی مشق — اپنا پہلا ویب پیج بنائیں

آئیں ابھی بنائیں۔ آپ کو بس انٹرنیٹ چاہیے:

قدم 1: براؤزر میں aistudio.google.com کھولیں اور گوگل اکاؤنٹ سے لاگ ان کریں (بالکل مفت — پاکستان میں بغیر VPN کام کرتا ہے)

قدم 2: Build Mode (وائب کوڈنگ) کھولیں اور لکھیں:

“ایک ذاتی پورٹ فولیو پیج بنا دو۔ میرا نام [اپنا نام] ہے۔ اوپر نیلے رنگ کا ہیڈر ہو جس میں نام ہو۔ درمیان میں تعارف ہو اور نیچے رابطہ فارم ہو۔ ڈیزائن صاف اور جدید ہو۔ موبائل پر بھی اچھا دکھے۔”

قدم 3: Google AI Studio کا Antigravity ایجنٹ چند سیکنڈز میں پورا ویب پیج بنا دے گا — فرنٹ اینڈ، بیک اینڈ، لائیو پریویو سب ایک جگہ

قدم 4: لائیو پریویو میں دیکھیں، پسند نہ آئے تو بتائیں — “بٹن کا رنگ سبز کر دو” یا “فونٹ بڑا کر دو” — AI فوری تبدیلی کرے گا

قدم 5: تیار ہو جائے تو سیدھا ڈیپلائے (پبلش) کر سکتے ہیں — آپ کی ویب سائٹ لائیو ہو جائے گی

بس۔ آپ نے اپنا پہلا ویب پیج بنا لیا — مکمل مفت۔

متبادل ٹولز: Replit اور Bolt بھی یہی کام کرتے ہیں اگر آپ آزمانا چاہیں۔

فرنٹ اینڈ کی اہم اصطلاحات جو آگے کام آئیں گی

یہ الفاظ یاد رکھیں — وائب کوڈنگ میں بار بار آئیں گے:

• ہیڈر (Header) — ویب پیج کا سب سے اوپر والا حصہ
• فوٹر (Footer) — سب سے نیچے والا حصہ
• نیو بار (Navbar) — نیویگیشن مینیو جو اوپر ہوتا ہے
• بٹن (Button) — جس پر کلک کریں
• فارم (Form) — جہاں معلومات بھریں
• ریسپانسو (Responsive) — موبائل اور ڈیسک ٹاپ دونوں پر اچھا دکھے
• لے آؤٹ (Layout) — چیزوں کی ترتیب
• کمپوننٹ (Component) — ویب پیج کا ایک چھوٹا حصہ جو بار بار استعمال ہو

اگلی گائیڈ میں

اب آپ کو فرنٹ اینڈ سمجھ آ گیا — وہ جو صارف دیکھتا ہے۔ اگلی گائیڈ: بیک اینڈ کیا ہے؟ میں ہم بیک اینڈ سمجھیں گے — وہ جو پیچھے چلتا ہے۔ ڈیٹا کہاں جاتا ہے، لاگ ان کیسے ہوتا ہے، اور AI سے یہ سب کیسے بنوایا جاتا ہے۔