10 KiB

Raw Blame History

سی ایس ایس ریفیکٹرنگ اسائنمنٹ

مقصد

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

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

اسائنمنٹ کی ہدایات

مرحلہ 1: تجزیہ اور منصوبہ بندی

اپنے موجودہ ٹیریریم کوڈ کا جائزہ لیں - ان عناصر کی شناخت کریں جو فی الحال ایبسولیوٹ پوزیشننگ استعمال کر رہے ہیں۔
اپنا لے آؤٹ طریقہ منتخب کریں - فیصلہ کریں کہ آیا Flexbox یا CSS Grid آپ کے ڈیزائن کے اہداف کے لیے زیادہ موزوں ہے۔
اپنے نئے لے آؤٹ کا خاکہ بنائیں - منصوبہ بنائیں کہ کنٹینرز اور پودے کے عناصر کو کیسے منظم کیا جائے گا۔

مرحلہ 2: عمل درآمد

اپنے ٹیریریم پروجیکٹ کا نیا ورژن ایک الگ فولڈر میں بنائیں۔
HTML اسٹرکچر کو اپ ڈیٹ کریں تاکہ آپ کے منتخب کردہ لے آؤٹ طریقے کی حمایت کی جا سکے۔
CSS کو ریفیکٹر کریں تاکہ ایبسولیوٹ پوزیشننگ کے بجائے Flexbox یا CSS Grid استعمال کیا جا سکے۔
بصری مستقل مزاجی برقرار رکھیں - یقینی بنائیں کہ آپ کے پودے اور ٹیریریم جار وہی پوزیشنز میں نظر آئیں۔
ریسپانسیو بیہیویر نافذ کریں - آپ کا لے آؤٹ مختلف اسکرین سائزز کے ساتھ خوبصورتی سے ایڈجسٹ ہونا چاہیے۔

مرحلہ 3: ٹیسٹنگ اور دستاویزات

کراس-براؤزر ٹیسٹنگ - تصدیق کریں کہ آپ کا ڈیزائن Chrome، Firefox، Edge، اور Safari میں کام کرتا ہے۔
ریسپانسیو ٹیسٹنگ - اپنے لے آؤٹ کو موبائل، ٹیبلٹ، اور ڈیسک ٹاپ اسکرین سائزز پر چیک کریں۔
دستاویزات - اپنے CSS میں تبصرے شامل کریں جو آپ کے لے آؤٹ کے انتخاب کی وضاحت کریں۔
اسکرین شاٹس - مختلف براؤزرز اور اسکرین سائزز میں اپنے ٹیریریم کی تصاویر لیں۔

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

لے آؤٹ عمل درآمد

ایک منتخب کریں: Flexbox یا CSS Grid میں سے کسی ایک کو نافذ کریں (ایک ہی عناصر کے لیے دونوں کا استعمال نہ کریں)
ریسپانسیو ڈیزائن: فکسڈ پکسلز کے بجائے رشتہ دار یونٹس (rem, em, %, vw, vh) استعمال کریں۔
ایکسسسبلیٹی: مناسب سیمینٹک HTML اسٹرکچر اور alt ٹیکسٹ برقرار رکھیں۔
کوڈ کوالٹی: مستقل نام دینے کے کنونشنز استعمال کریں اور CSS کو منطقی طور پر منظم کریں۔

شامل کرنے کے لیے جدید سی ایس ایس فیچرز

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

براؤزر سپورٹ کی ضروریات

Chrome/Edge: تازہ ترین 2 ورژنز
Firefox: تازہ ترین 2 ورژنز
Safari: تازہ ترین 2 ورژنز
موبائل براؤزرز: iOS Safari، Chrome Mobile

ڈیلیورایبلز

اپ ڈیٹ شدہ HTML فائل بہتر سیمینٹک اسٹرکچر کے ساتھ
ریفیکٹرڈ CSS فائل جدید لے آؤٹ تکنیکوں کے ساتھ
اسکرین شاٹس کا مجموعہ جو کراس-براؤزر مطابقت دکھاتا ہے:
- ڈیسک ٹاپ ویو (1920x1080)
- ٹیبلٹ ویو (768x1024)
- موبائل ویو (375x667)
- کم از کم 2 مختلف براؤزرز
README.md فائل جس میں درج ہو:
- آپ کا لے آؤٹ انتخاب (Flexbox بمقابلہ Grid) اور اس کی وجہ
- ریفیکٹرنگ کے دوران پیش آنے والے چیلنجز
- براؤزر مطابقت کے نوٹس
- آپ کے کوڈ کو چلانے کی ہدایات

اسیسمنٹ کا معیار

معیار	بہترین (4)	قابل (3)	ترقی پذیر (2)	ابتدائی (1)
لے آؤٹ عمل درآمد	Flexbox/Grid کا شاندار استعمال جدید فیچرز کے ساتھ؛ مکمل طور پر ریسپانسیو	درست عمل درآمد اچھے ریسپانسیو بیہیویر کے ساتھ	بنیادی عمل درآمد معمولی ریسپانسیو مسائل کے ساتھ	نامکمل یا غلط لے آؤٹ عمل درآمد
کوڈ کوالٹی	صاف، اچھی طرح منظم CSS بامعنی تبصروں اور مستقل ناموں کے ساتھ	اچھی تنظیم کچھ تبصروں کے ساتھ	مناسب تنظیم کم سے کم تبصروں کے ساتھ	ناقص تنظیم؛ سمجھنا مشکل
کراس-براؤزر مطابقت	تمام مطلوبہ براؤزرز میں مکمل مستقل مزاجی اسکرین شاٹس کے ساتھ	اچھی مطابقت معمولی فرق کے ساتھ دستاویزی	کچھ مطابقت کے مسائل جو فعالیت کو متاثر نہیں کرتے	بڑے مطابقت کے مسائل یا ٹیسٹنگ کی کمی
ریسپانسیو ڈیزائن	غیر معمولی موبائل-فرسٹ اپروچ ہموار بریک پوائنٹس کے ساتھ	اچھا ریسپانسیو بیہیویر مناسب بریک پوائنٹس کے ساتھ	بنیادی ریسپانسیو فیچرز کچھ لے آؤٹ مسائل کے ساتھ	محدود یا خراب ریسپانسیو بیہیویر
دستاویزات	جامع README تفصیلی وضاحتوں اور بصیرتوں کے ساتھ	اچھی دستاویزات تمام مطلوبہ عناصر کا احاطہ کرتی ہیں	بنیادی دستاویزات کم سے کم وضاحتوں کے ساتھ	نامکمل یا غائب دستاویزات

مددگار وسائل

لے آؤٹ طریقہ گائیڈز

براؤزر ٹیسٹنگ ٹولز

کوڈ کوالٹی ٹولز

اضافی چیلنجز

🌟 جدید لے آؤٹس: اپنے ڈیزائن کے مختلف حصوں میں Flexbox اور Grid دونوں کو نافذ کریں
🌟 اینیمیشن انٹیگریشن: CSS ٹرانزیشنز یا اینیمیشنز شامل کریں جو آپ کے نئے لے آؤٹ کے ساتھ کام کریں
🌟 ڈارک موڈ: CSS کسٹم پراپرٹیز پر مبنی تھیم سوئچر نافذ کریں
🌟 کنٹینر کوئریز: جدید کنٹینر کوئری تکنیکوں کا استعمال کریں تاکہ کمپوننٹ لیول پر ریسپانسیو نیس حاصل ہو

💡 یاد رکھیں: مقصد صرف کام کرنا نہیں ہے بلکہ یہ سمجھنا ہے کہ آپ کا منتخب کردہ لے آؤٹ طریقہ اس خاص ڈیزائن چیلنج کے لیے بہترین حل کیوں ہے!

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

10 KiB Raw Blame History