Web-Dev-For-Beginners/translations/ur/7-bank-project/2-forms/assignment.md

اپنے بینک ایپ کو جدید CSS کے ساتھ اسٹائل کریں

پروجیکٹ کا جائزہ

اپنے فعال بینکنگ ایپلیکیشن کو جدید CSS تکنیکوں کے ذریعے ایک دلکش اور پیشہ ورانہ ویب ایپ میں تبدیل کریں۔ آپ ایک مربوط ڈیزائن سسٹم بنائیں گے جو صارف کے تجربے کو بہتر بنائے گا جبکہ رسائی اور ریسپانسیو ڈیزائن کے اصولوں کو برقرار رکھے گا۔

یہ اسائنمنٹ آپ کو جدید ویب ڈیزائن کے پیٹرنز کو اپنانے، ایک مستقل بصری شناخت نافذ کرنے، اور ایک ایسا انٹرفیس بنانے کا چیلنج دیتا ہے جو صارفین کو دلکش اور نیویگیٹ کرنے میں آسان لگے۔

ہدایات

مرحلہ 1: اپنے اسٹائل شیٹ کو سیٹ اپ کریں

اپنی CSS کی بنیاد بنائیں:

1. ایک نیا فائل بنائیں جس کا نام styles.css ہو اور اسے اپنے پروجیکٹ روٹ میں رکھیں۔

2. اسٹائل شیٹ کو لنک کریں اپنے index.html فائل میں:

   <link rel="stylesheet" href="styles.css">
   

3. CSS ری سیٹ اور جدید ڈیفالٹس کے ساتھ شروع کریں:

   /* Modern CSS reset and base styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     color: #333;
   }
   

مرحلہ 2: ڈیزائن سسٹم کی ضروریات

ان ضروری ڈیزائن عناصر کو نافذ کریں:

رنگوں کا انتخاب

• پرائمری رنگ: بٹن اور ہائی لائٹس کے لیے ایک پیشہ ورانہ رنگ منتخب کریں۔
• سیکنڈری رنگ: ایک تکمیلی رنگ جو ثانوی ایکشنز کے لیے ہو۔
• نیوٹرل رنگ: متن، بارڈرز، اور بیک گراؤنڈز کے لیے گرے رنگ۔
• کامیابی/غلطی کے رنگ: کامیابی کے لیے سبز اور غلطیوں کے لیے سرخ۔

ٹائپوگرافی

• ہیڈنگ ہائیرارکی: H1، H2، اور H3 عناصر کے درمیان واضح فرق۔
• باڈی ٹیکسٹ: پڑھنے کے قابل فونٹ سائز (کم از کم 16px) اور مناسب لائن ہائٹ۔
• فارم لیبلز: واضح اور قابل رسائی ٹیکسٹ اسٹائلنگ۔

لے آؤٹ اور اسپیسنگ

• مستقل اسپیسنگ: اسپیسنگ اسکیل کا استعمال کریں (8px، 16px، 24px، 32px)۔
• گرڈ سسٹم: فارم اور مواد کے سیکشنز کے لیے منظم لے آؤٹ۔
• ریسپانسیو ڈیزائن: موبائل فرسٹ اپروچ کے ساتھ بریک پوائنٹس۔

مرحلہ 3: کمپوننٹ اسٹائلنگ

ان مخصوص کمپوننٹس کو اسٹائل کریں:

فارمز

• ان پٹ فیلڈز: پیشہ ورانہ بارڈرز، فوکس اسٹیٹس، اور ویلیڈیشن اسٹائلنگ۔
• بٹنز: ہوور ایفیکٹس، ڈس ایبلڈ اسٹیٹس، اور لوڈنگ انڈیکیٹرز۔
• لیبلز: واضح پوزیشننگ اور مطلوبہ فیلڈ انڈیکیٹرز۔
• غلطی کے پیغامات: واضح غلطی کی اسٹائلنگ اور مددگار پیغام رسانی۔

نیویگیشن

• ہیڈر: صاف اور برانڈڈ نیویگیشن ایریا۔
• لنکس: واضح ہوور اسٹیٹس اور ایکٹیو انڈیکیٹرز۔
• لوگو/ٹائٹل: منفرد برانڈنگ عنصر۔

مواد کے علاقے

• سیکشنز: مختلف علاقوں کے درمیان واضح بصری علیحدگی۔
• کارڈز: اگر کارڈ بیسڈ لے آؤٹ استعمال کر رہے ہیں تو شیڈوز اور بارڈرز شامل کریں۔
• بیک گراؤنڈز: سفید جگہ اور ہلکے بیک گراؤنڈز کا مناسب استعمال۔

مرحلہ 4: اضافی خصوصیات (اختیاری)

ان جدید خصوصیات کو نافذ کرنے پر غور کریں:

• ڈارک موڈ: لائٹ اور ڈارک تھیمز کے درمیان ٹوگل کریں۔
• اینیمیشنز: ہلکی ٹرانزیشنز اور مائیکرو انٹریکشنز۔
• لوڈنگ اسٹیٹس: فارم سبمیشن کے دوران بصری فیڈبیک۔
• ریسپانسیو امیجز: مختلف اسکرین سائزز کے لیے بہتر امیجز۔

ڈیزائن کی تحریک

جدید بینکنگ ایپ کی خصوصیات:

• صاف، کم سے کم ڈیزائن جس میں کافی سفید جگہ ہو۔
• پیشہ ورانہ رنگ سکیمز (نیلے، سبز، یا نفیس نیوٹرلز)۔
• واضح بصری ہائیرارکی جس میں نمایاں کال ٹو ایکشن بٹنز ہوں۔
• رسائی کے کنٹراسٹ ریشوز جو WCAG گائیڈ لائنز کو پورا کرتے ہوں۔
• موبائل ریسپانسیو لے آؤٹس جو تمام ڈیوائسز پر کام کریں۔

تکنیکی ضروریات

CSS کی تنظیم

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

رسائی کی ضروریات

• رنگ کنٹراسٹ: عام متن کے لیے کم از کم 4.5:1 ریشو یقینی بنائیں۔
• فوکس انڈیکیٹرز: کی بورڈ نیویگیشن کے لیے واضح فوکس اسٹیٹس۔
• فارم لیبلز: ان پٹس کے ساتھ مناسب طریقے سے منسلک ہوں۔
• ریسپانسیو ڈیزائن: 320px سے 1920px چوڑائی تک اسکرینز پر قابل استعمال۔

تشخیصی معیار

معیار	مثالی (A)	ماہر (B)	ترقی پذیر (C)	بہتری کی ضرورت (F)
ڈیزائن سسٹم	جامع ڈیزائن سسٹم نافذ کرتا ہے جس میں مستقل رنگ، ٹائپوگرافی، اور اسپیسنگ شامل ہو	مستقل اسٹائلنگ استعمال کرتا ہے جس میں واضح ڈیزائن پیٹرنز اور اچھی بصری ہائیرارکی ہو	بنیادی اسٹائلنگ نافذ کرتا ہے جس میں کچھ مستقل مسائل یا ڈیزائن عناصر کی کمی ہو	کم سے کم اسٹائلنگ جس میں غیر مستقل یا متضاد ڈیزائن انتخاب ہوں
صارف کا تجربہ	ایک پیشہ ور انٹرفیس تخلیق کرتا ہے جس میں بہترین استعمال اور بصری کشش ہو	اچھا صارف تجربہ فراہم کرتا ہے جس میں واضح نیویگیشن اور پڑھنے کے قابل مواد ہو	بنیادی استعمال کے ساتھ کچھ UX بہتری کی ضرورت ہو	ناقص استعمال، نیویگیٹ یا پڑھنے میں مشکل
تکنیکی نفاذ	جدید CSS تکنیکوں، منظم کوڈ اسٹرکچر، اور بہترین طریقوں کا استعمال کرتا ہے	CSS کو مؤثر طریقے سے نافذ کرتا ہے جس میں اچھی تنظیم اور مناسب تکنیکیں ہوں	CSS صحیح کام کرتا ہے لیکن تنظیم یا جدید طریقوں کی کمی ہو سکتی ہے	ناقص CSS نفاذ جس میں تکنیکی مسائل یا براؤزر مطابقت کے مسائل ہوں
ریسپانسیو ڈیزائن	مکمل طور پر ریسپانسیو ڈیزائن جو تمام ڈیوائس سائزز پر خوبصورتی سے کام کرتا ہو	اچھا ریسپانسیو رویہ جس میں کچھ اسکرین سائزز پر معمولی مسائل ہوں	بنیادی ریسپانسیو نفاذ جس میں کچھ لے آؤٹ مسائل ہوں	غیر ریسپانسیو یا موبائل ڈیوائسز پر نمایاں مسائل
رسائی	WCAG گائیڈ لائنز کو پورا کرتا ہے جس میں بہترین کی بورڈ نیویگیشن اور اسکرین ریڈر سپورٹ ہو	اچھی رسائی کی مشقیں جن میں مناسب کنٹراسٹ اور فوکس انڈیکیٹرز ہوں	بنیادی رسائی کے خیالات جن میں کچھ عناصر کی کمی ہو	ناقص رسائی، معذور صارفین کے لیے مشکل

جمع کرانے کے رہنما اصول

اپنی جمع کرائی میں شامل کریں:

• styles.css: آپ کی مکمل اسٹائل شیٹ
• اپ ڈیٹ شدہ HTML: کوئی بھی HTML تبدیلیاں جو آپ نے کیں
• اسکرین شاٹس: ڈیسک ٹاپ اور موبائل پر اپنے ڈیزائن کی تصاویر
• README: آپ کے ڈیزائن انتخاب اور رنگ سکیم کا مختصر بیان

اضافی پوائنٹس کے لیے:

• CSS کسٹم پراپرٹیز جو قابل انتظام تھیمنگ کے لیے ہوں
• جدید CSS خصوصیات جیسے Grid، Flexbox، یا CSS اینیمیشنز
• کارکردگی کے خیالات جیسے بہتر CSS اور کم سے کم فائل سائز
• کراس براؤزر ٹیسٹنگ جو مختلف براؤزرز پر مطابقت کو یقینی بنائے

💡 پرو ٹپ: پہلے موبائل ڈیزائن سے شروع کریں، پھر بڑے اسکرینز کے لیے بہتر کریں۔ یہ موبائل فرسٹ اپروچ یقینی بناتا ہے کہ آپ کی ایپ تمام ڈیوائسز پر اچھی طرح کام کرے اور جدید ویب ڈویلپمنٹ کے بہترین طریقوں کی پیروی کرے۔

---

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔