<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:14:58+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "bn"
}
-->
# CSS রিফ্যাক্টরিং অ্যাসাইনমেন্ট

## লক্ষ্য

**Flexbox** বা **CSS Grid** ব্যবহার করে টেরারিয়াম প্রকল্পের লেআউট রিফ্যাক্টর করুন। আধুনিক, রেসপন্সিভ ডিজাইন অর্জনের জন্য HTML এবং CSS আপডেট করুন। আপনাকে ড্র্যাগযোগ্য উপাদানগুলি বাস্তবায়ন করতে হবে না—শুধুমাত্র লেআউট এবং স্টাইলিংয়ে মনোযোগ দিন।

## নির্দেশনা

1. **টেরারিয়াম অ্যাপের একটি নতুন সংস্করণ তৈরি করুন।** লেআউটের জন্য Flexbox বা CSS Grid ব্যবহার করতে মার্কআপ এবং CSS আপডেট করুন।
2. **শিল্পকর্ম এবং উপাদানগুলি সঠিকভাবে স্থাপন করুন** যেন এগুলো মূল সংস্করণের মতো থাকে।
3. **আপনার ডিজাইন পরীক্ষা করুন** অন্তত দুটি ভিন্ন ব্রাউজারে (যেমন, Chrome, Firefox, Edge)।
4. **প্রতিটি ব্রাউজারে আপনার টেরারিয়ামের স্ক্রিনশট নিন** ক্রস-ব্রাউজার সামঞ্জস্য প্রদর্শনের জন্য।
5. **আপডেট করা কোড এবং স্ক্রিনশট জমা দিন।**

## মূল্যায়ন

| মানদণ্ড   | চমৎকার                                                                  | পর্যাপ্ত                              | উন্নতির প্রয়োজন                      |
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| লেআউট     | Flexbox বা CSS Grid ব্যবহার করে সম্পূর্ণ রিফ্যাক্টর করা; দৃষ্টিনন্দন এবং রেসপন্সিভ | কিছু উপাদান রিফ্যাক্টর করা; Flexbox বা Grid আংশিকভাবে ব্যবহার করা | Flexbox বা Grid সামান্য বা একেবারেই ব্যবহার করা হয়নি; লেআউট অপরিবর্তিত |
| ক্রস-ব্রাউজার | একাধিক ব্রাউজারের জন্য স্ক্রিনশট প্রদান করা হয়েছে; সামঞ্জস্যপূর্ণ চেহারা      | একটি ব্রাউজারের স্ক্রিনশট; ছোটখাটো অসামঞ্জস্য | স্ক্রিনশট নেই বা বড় অসামঞ্জস্য |
| কোডের গুণমান | পরিষ্কার, সুসংগঠিত HTML/CSS; স্পষ্ট মন্তব্য                         | কিছুটা সংগঠিত; কয়েকটি মন্তব্য        | বিশৃঙ্খল কোড; মন্তব্যের অভাব      |

## টিপস

- [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) এবং [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) গাইড পর্যালোচনা করুন।
- রেসপন্সিভনেস পরীক্ষা করতে ব্রাউজারের ডেভেলপার টুল ব্যবহার করুন।
- কোডের স্পষ্টতার জন্য মন্তব্য যোগ করুন।

---

**অস্বীকৃতি**:  
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।