14 KiB

Raw Blame History Unescape Escape

CSS রিফ্যাক্টরিং অ্যাসাইনমেন্ট

লক্ষ্য

আপনার টেরারিয়াম প্রকল্পটি আধুনিক CSS লেআউট প্রযুক্তি ব্যবহার করে রূপান্তর করুন! বর্তমান অ্যাবসোলিউট পজিশনিং পদ্ধতির পরিবর্তে Flexbox বা CSS Grid ব্যবহার করে একটি আরও সহজে পরিচালনাযোগ্য, রেসপন্সিভ ডিজাইন বাস্তবায়ন করুন। এই অ্যাসাইনমেন্টটি আপনাকে আধুনিক CSS স্ট্যান্ডার্ড প্রয়োগ করার চ্যালেঞ্জ দেয়, একই সাথে আপনার টেরারিয়ামের ভিজ্যুয়াল আকর্ষণ বজায় রাখার জন্য।

কখন এবং কীভাবে বিভিন্ন লেআউট পদ্ধতি ব্যবহার করতে হয় তা বোঝা আধুনিক ওয়েব ডেভেলপমেন্টের জন্য একটি গুরুত্বপূর্ণ দক্ষতা। এই অনুশীলনটি ঐতিহ্যবাহী পজিশনিং কৌশল এবং সমসাময়িক CSS লেআউট সিস্টেমের মধ্যে সেতু তৈরি করে।

অ্যাসাইনমেন্ট নির্দেশনা

ধাপ ১: বিশ্লেষণ এবং পরিকল্পনা

আপনার বর্তমান টেরারিয়াম কোড পর্যালোচনা করুন - কোন উপাদানগুলি বর্তমানে অ্যাবসোলিউট পজিশনিং ব্যবহার করছে তা চিহ্নিত করুন
আপনার লেআউট পদ্ধতি নির্বাচন করুন - Flexbox বা CSS Grid আপনার ডিজাইন লক্ষ্যগুলির জন্য কোনটি উপযুক্ত তা নির্ধারণ করুন
আপনার নতুন লেআউট কাঠামো স্কেচ করুন - কন্টেইনার এবং প্ল্যান্ট উপাদানগুলি কীভাবে সংগঠিত হবে তা পরিকল্পনা করুন

ধাপ ২: বাস্তবায়ন

আপনার টেরারিয়াম প্রকল্পের একটি নতুন সংস্করণ তৈরি করুন একটি আলাদা ফোল্ডারে
HTML কাঠামো আপডেট করুন আপনার নির্বাচিত লেআউট পদ্ধতিকে সমর্থন করার জন্য
CSS রিফ্যাক্টর করুন অ্যাবসোলিউট পজিশনিংয়ের পরিবর্তে Flexbox বা CSS Grid ব্যবহার করে
ভিজ্যুয়াল সামঞ্জস্য বজায় রাখুন - নিশ্চিত করুন যে আপনার প্ল্যান্ট এবং টেরারিয়াম জার একই অবস্থানে প্রদর্শিত হয়
রেসপন্সিভ আচরণ বাস্তবায়ন করুন - আপনার লেআউট বিভিন্ন স্ক্রিন সাইজে সুন্দরভাবে মানিয়ে নিতে হবে

ধাপ ৩: টেস্টিং এবং ডকুমেন্টেশন

ক্রস-ব্রাউজার টেস্টিং - নিশ্চিত করুন যে আপনার ডিজাইন Chrome, Firefox, Edge এবং Safari-তে কাজ করে
রেসপন্সিভ টেস্টিং - মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রিন সাইজে আপনার লেআউট পরীক্ষা করুন
ডকুমেন্টেশন - আপনার CSS-এ মন্তব্য যোগ করুন যা আপনার লেআউট পছন্দগুলি ব্যাখ্যা করে
স্ক্রিনশট - বিভিন্ন ব্রাউজার এবং স্ক্রিন সাইজে আপনার টেরারিয়াম ক্যাপচার করুন

প্রযুক্তিগত প্রয়োজনীয়তা

লেআউট বাস্তবায়ন

একটি নির্বাচন করুন: Flexbox অথবা CSS Grid (একই উপাদানের জন্য উভয় নয়)
রেসপন্সিভ ডিজাইন: নির্দিষ্ট পিক্সেলের পরিবর্তে আপেক্ষিক ইউনিট (rem, em, %, vw, vh) ব্যবহার করুন
অ্যাক্সেসিবিলিটি: সঠিক সেমান্টিক HTML কাঠামো এবং alt টেক্সট বজায় রাখুন
কোডের গুণমান: ধারাবাহিক নামকরণ কনভেনশন ব্যবহার করুন এবং CSS-কে যৌক্তিকভাবে সংগঠিত করুন

আধুনিক 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: সর্বশেষ ২টি সংস্করণ
Firefox: সর্বশেষ ২টি সংস্করণ
Safari: সর্বশেষ ২টি সংস্করণ
মোবাইল ব্রাউজার: iOS Safari, Chrome Mobile

ডেলিভারেবলস

আপডেট করা HTML ফাইল উন্নত সেমান্টিক কাঠামো সহ
রিফ্যাক্টর করা CSS ফাইল আধুনিক লেআউট প্রযুক্তি ব্যবহার করে
স্ক্রিনশট সংগ্রহ ক্রস-ব্রাউজার সামঞ্জস্য প্রদর্শন করে:
- ডেস্কটপ ভিউ (1920x1080)
- ট্যাবলেট ভিউ (768x1024)
- মোবাইল ভিউ (375x667)
- অন্তত ২টি ভিন্ন ব্রাউজার
README.md ফাইল ডকুমেন্টিং:
- আপনার লেআউট পছন্দ (Flexbox বনাম Grid) এবং যুক্তি
- রিফ্যাক্টরিংয়ের সময় সম্মুখীন চ্যালেঞ্জ
- ব্রাউজার সামঞ্জস্য নোট
- আপনার কোড চালানোর নির্দেশনা

মূল্যায়ন রুব্রিক

মানদণ্ড	চমৎকার (৪)	দক্ষ (৩)	উন্নয়নশীল (২)	প্রাথমিক (১)
লেআউট বাস্তবায়ন	Flexbox/Grid-এর দক্ষ ব্যবহার উন্নত বৈশিষ্ট্য সহ; সম্পূর্ণ রেসপন্সিভ	সঠিক বাস্তবায়ন ভালো রেসপন্সিভ আচরণ সহ	মৌলিক বাস্তবায়ন ছোটখাটো রেসপন্সিভ সমস্যার সাথে	অসম্পূর্ণ বা ভুল লেআউট বাস্তবায়ন
কোডের গুণমান	পরিষ্কার, সুসংগঠিত CSS অর্থপূর্ণ মন্তব্য এবং ধারাবাহিক নামকরণ সহ	ভালো সংগঠন কিছু মন্তব্য সহ	পর্যাপ্ত সংগঠন ন্যূনতম মন্তব্য সহ	খারাপ সংগঠন; বোঝা কঠিন
ক্রস-ব্রাউজার সামঞ্জস্য	সমস্ত প্রয়োজনীয় ব্রাউজারে নিখুঁত সামঞ্জস্য স্ক্রিনশট সহ	ভালো সামঞ্জস্য ছোটখাটো পার্থক্য নথিভুক্ত	কিছু সামঞ্জস্য সমস্যা যা কার্যকারিতা নষ্ট করে না	বড় সামঞ্জস্য সমস্যা বা টেস্টিং অনুপস্থিত
রেসপন্সিভ ডিজাইন	অসাধারণ মোবাইল-প্রথম পদ্ধতি মসৃণ ব্রেকপয়েন্ট সহ	ভালো রেসপন্সিভ আচরণ উপযুক্ত ব্রেকপয়েন্ট সহ	মৌলিক রেসপন্সিভ বৈশিষ্ট্য কিছু লেআউট সমস্যার সাথে	সীমিত বা ভাঙা রেসপন্সিভ আচরণ
ডকুমেন্টেশন	বিস্তারিত ব্যাখ্যা এবং অন্তর্দৃষ্টি সহ ব্যাপক README	সমস্ত প্রয়োজনীয় উপাদান কভার করে ভালো ডকুমেন্টেশন	ন্যূনতম ব্যাখ্যা সহ মৌলিক ডকুমেন্টেশন	অসম্পূর্ণ বা অনুপস্থিত ডকুমেন্টেশন

সহায়ক সম্পদ

লেআউট পদ্ধতির গাইড

ব্রাউজার টেস্টিং টুলস

কোডের গুণমান টুলস

বোনাস চ্যালেঞ্জ

🌟 উন্নত লেআউট: আপনার ডিজাইনের বিভিন্ন অংশে Flexbox এবং Grid উভয়ই বাস্তবায়ন করুন
🌟 অ্যানিমেশন ইন্টিগ্রেশন: আপনার নতুন লেআউটের সাথে কাজ করে এমন CSS ট্রানজিশন বা অ্যানিমেশন যোগ করুন
🌟 ডার্ক মোড: CSS কাস্টম প্রপার্টিজ-ভিত্তিক থিম সুইচার বাস্তবায়ন করুন
🌟 কন্টেইনার কোয়েরি: কম্পোনেন্ট-লেভেল রেসপন্সিভনেসের জন্য আধুনিক কন্টেইনার কোয়েরি কৌশল ব্যবহার করুন

💡 মনে রাখবেন: লক্ষ্য শুধুমাত্র কাজ করা নয়, বরং বোঝা কেন আপনার নির্বাচিত লেআউট পদ্ধতি এই নির্দিষ্ট ডিজাইন চ্যালেঞ্জের জন্য সেরা সমাধান!

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

14 KiB Raw Blame History Unescape Escape