1। পরিচিতি
DevTools-এ এখন CSS গ্রিড ডিবাগিংয়ের জন্য আরও ভাল সমর্থন রয়েছে!
যখন আপনার পৃষ্ঠায় একটি HTML উপাদানের display: grid বা display: inline-grid এটিতে প্রয়োগ করা হয়, উপাদান প্যানেল আপনাকে গ্রিডটি আরও ভালভাবে পরিদর্শন করতে সাহায্য করার জন্য অনেকগুলি বিকল্প অফার করে৷
আপনি কি শিখবেন
এই কোডল্যাব আপনাকে শেখাবে কিভাবে Chrome DevTools দিয়ে CSS গ্রিড ডিবাগ করতে হয়।
- কীভাবে এলিমেন্টস প্যানেল থেকে গ্রিড ডিবাগিং বৈশিষ্ট্য টগল করবেন
- লেআউট প্যানে গ্রিড ওভারলে সেটিংস কীভাবে কাস্টমাইজ করবেন
- গ্রিড ওভারলেগুলির সাহায্যে শৈলীগুলি কীভাবে সম্পাদনা করবেন
আপনি কি প্রয়োজন হবে
- একটি কার্যকরী কম্পিউটার এবং বাস্তবসম্মত ওয়াইফাই
- Chrome 87 এবং তার উপরে।
- [ঐচ্ছিক] CSS গ্রিডের একটি প্রাথমিক ধারণা।
আপনি কি করবেন
আপনি CSS গ্রিড ডিবাগিং টুলের সাহায্যে এই ধাঁধার সমাধান করবেন।
2. শুরু করুন
ধাঁধা পাতা খুলতে নিম্নলিখিত লিঙ্কে ক্লিক করুন:
এরপর, ধাঁধা পৃষ্ঠায়, Chrome DevTools খুলুন ।
3. গ্রিড ওভারলে সক্ষম করুন
এলিমেন্টস প্যানেলে ধাঁধাটি পরিদর্শন করুন । ধাঁধা কন্টেইনার নোডে ক্লিক করুন এবং ফোকাস করুন:
<div class="chrome-puzzle">
এলিমেন্টস প্যানেলে, লক্ষ্য করুন যে ধাঁধার পাত্রের পাশে একটি grid ব্যাজ রয়েছে। গ্রিড ওভারলে টগল করতে এটিতে ক্লিক করুন।
এই ভিডিওটি ডেমো কিভাবে উপরের ধাপগুলি সম্পূর্ণ করতে হয়।
4. গ্রিড ওভারলে প্রদর্শন কাস্টমাইজ করুন
এই মুহুর্তে, লাইন নম্বর সহ গ্রিড ওভারলে প্রদর্শন করে। আমাদের ধাঁধা সমাধান করতে সাহায্য করার জন্য ডিসপ্লেটিকে আরও কাস্টমাইজ করা যাক।
লেআউট প্যানে ক্লিক করুন, গ্রিড ওভারলেতে লাইন নম্বরগুলি লুকাতে ড্রপডাউনে লাইন লেবেল লুকান নির্বাচন করুন।
এখন, স্টাইল প্যানে যান, ধাঁধা ধারক CSS পরীক্ষা করুন। এটিতে একটি grid-template-areas সম্পত্তি রয়েছে:
.chrome-puzzle {
grid-template-areas:
"top-left top-right"
"bottom-left bottom-right";
}
এলাকার নাম ধাঁধা সমাধান করতে আমাদের জন্য দরকারী! স্ক্রিনে প্রদর্শন করতে সেটিংস আপডেট করা যাক।
লেআউট প্যানে ফিরে যান, এলাকার নাম দেখান চেকবক্স সক্ষম করুন।
তা-দা! গ্রিড ওভারলে এখন প্রতিটি ধাঁধার অংশের এলাকার নাম দেখায়।
এই ভিডিওটি ডেমো কিভাবে উপরের ধাপগুলি সম্পূর্ণ করতে হয়।
5. ধাঁধা সমাধান করুন
স্ক্রিনে এলাকার নাম প্রদর্শিত হলে, আমরা ধাঁধার কাজ শুরু করতে পারি।
আসুন প্রতিটি ধাঁধার টুকরো সঠিক জায়গায় রাখি।
আমরা প্রথম ধাঁধা অংশ পরিদর্শন দ্বারা শুরু করতে পারেন.
<img src="...-grid-4.png" class="piece-4">
শৈলী ফলকে, টুকরাটির CSS ক্লাস সনাক্ত করুন:
.piece-4 {
grid-area: auto;
}
grid-area বর্তমানে auto সেট করা আছে। আপনি সঠিক এলাকার নাম দিয়ে এটি আপডেট করতে পারেন।
এই অংশটি কোন এলাকার অন্তর্গত হওয়া উচিত? ধরা যাক এই টুকরোটির সঠিক ক্ষেত্রটি হল top-right , তারপর আপনি মান auto কে top-right দিয়ে প্রতিস্থাপন করতে পারেন। এখনই পরিবর্তনগুলি কল্পনা করুন। টুকরাটি এখন top-right অংশে স্থাপন করা হয়েছে।
এই ভিডিওটি ডেমো কিভাবে উপরের ধাপগুলি সম্পূর্ণ করতে হয়।
আপনি ধাঁধাটি সমাধান না করা পর্যন্ত প্রতিটি টুকরোগুলির grid-area আপডেট করুন!
6. অভিনন্দন!
অভিনন্দন! আপনি সফলভাবে এই কোডল্যাব সম্পূর্ণ করেছেন!
আপনি যদি CSS গ্রিড ডিবাগিং টুলস সম্পর্কে আরও জানতে চান তাহলে এখানে ডকুমেন্টেশন রয়েছে।