আপনার সাইট কি আরও ভালো দেখাবে যদি লোগো (logo) পাঁচ পিক্সেল ডানদিকে সরানো হয় বা ব্লু ব্যাকগ্রাউন্ড (blue background) থাকে? আপনার ফিচার্ড পোস্টের (featured posts) ছবি들에 বর্ডার (border) বা শ্যাডো (shadows) যোগ করলে কি সেগুলো আরও পপ (pop) করবে? ফায়ারফক্স (Firefox)-এর মতো মডার্ন ব্রাউজারগুলো Web Developer Tools (ওয়েব ডেভেলপার টুলস) দিয়ে আসে যা আপনাকে একটি সাইটের আভ্যন্তরীণ কাজকর্ম (inner workings) ইন্সপেক্ট (inspect) করতে এবং লাইভ এডিট (live edits) করতে দেয়, রিয়েল-টাইমে (real-time) ফলাফল দেখতে পাই।
এই টিউটোরিয়ালে আপনি শিখবেন কিভাবে ফায়ারফক্সের Web Developer Tools ব্যবহার করে যেকোনো সাইট লাইভ-এডিট করতে হয়।
নোট: এই টিউটোরিয়াল অধিকাংশ ব্রাউজারের জন্য প্রযোজ্য, Chrome, Opera এবং Safari সহ।
Web Developer Tools-এ পরিচিতি (Meet the Web Developer Tools)
ফায়ারফক্সের Web Developer Tools একটি ব্যাপক টুলসেট (comprehensive set of tools), সকল DOM এলিমেন্ট (DOM elements) ডিসপ্লে করার থেকে এর স্পিড (speed) মেজার (measure) করার পর্যন্ত। এই টিউটোরিয়ালের জন্য আপনাকে শুধু "Inspector" এবং "Style Editor" টুলগুলো দরকার।
ফায়ারফক্স চালু করুন এবং যেকোনো/আপনার সাইটে ভিজিট করুন। ফায়ারফক্সের হ্যামবার্গার মেনু (hamburger menu) (ডিফল্টভাবে টপ রাইট-এ), "Web Developer → Style Editor" বেছে নিন বা আপনার কীবোর্ডে Shift + F7 কম্বিনেশন চাপুন।
ফায়ারফক্সের Web Developer প্যানেল এর উইন্ডোর এক পাশে দেখাবে—সাধারণত নিচের অংশে। আপনি এর পজিশন (position) পরিবর্তন করতে পারেন প্যানেলের টপ রাইট-এ থ্রি-ডটস বাটন (three-dots button) এ ক্লিক করে এবং "Dock to Right/Left" বা "Separate Window" বেছে নিয়ে।
নোট: এই টিউটোরিয়াল আপনাকে HTML এবং CSS কোডিং শিখাচ্ছে না। আপনি বেসিক্স এখানে শিখতে পারেন।
এলিমেন্ট ইন্সপেক্ট করা (Inspecting the element)
একটি এলিমেন্ট কীভাবে দেখাবে সেটি প্রভাবিত করতে পারতে হলে, আপনাকে সেটি শনাক্ত করতে পারতে হবে। এর টুলবার (toolbar)-এর সবচেয়ে প্রথম বাটনে ক্লিক করুন বা আপনার কীবোর্ডে Ctrl + Shift + C চাপুন এলিমেন্ট-পিকার মোড (element-picker mode) ইনাবল (enable) করতে।
সাইটের চারদিকে মাউস সরিয়ে Unterschiedウェブページ (webpage) এর ভিন্ন ভিন্ন এলিমেন্ট হাইলাইট (highlighted) দেখুন। তাদের পাশে আপনি তাদের প্রাইমারি আইডেন্টিফায়ার (primary identifier) একটি পপ-আপে (pop-up) হোভার (hover) করে থাকা দেখবেন।
আপনি যখন একটি এলিমেন্টে ক্লিক করবেন, তবে এটি Developer Tools-এর Inspector ট্যাবে সিলেক্টেড (selected) হয়ে যাবে।
আপনি যে এলিমেন্টটি টুইক (tweak) করতে চান সেটি পেলে, Developer Tools Inspector-এ তার এন্ট্রি (entry)-এ রাইট-ক্লিক করুন এবং পপ-আপ উইন্ডো থেকে সিলেক্ট করুন— "Copy → CSS Selector"।
আপনার লাইভ এডিট শুরু করুন (Start Your Live Edit)
আপনার এলিমেন্টের CSS Selector ক্লিপবোর্ডে (clipboard) কপি হয়ে গেলে, Developer Tools উইন্ডোর Style Editor ট্যাবে ফিরে যান। টপ লেফটে "+" বাটনে ক্লিক করুন "Create and append a new stylesheet to the document"-র জন্য।
নতুন, খালি স্টাইলশীটে (stylesheet) আপনার CSS Selector পেস্ট (paste) করুন। একটি স্পেস যোগ করুন, এরপর একটি ওপেনিং এবং ক্লোজিং কার্লি ব্র্যাকেট (curly brackets) সেট।
CSS-এ, একটি এলিমেন্টের লুক (looks) ডিফাইন হয় প্রথমে "targeting it" করলে একটি আইডেন্টিফায়ার (identifier) যেমন CSS Selector ব্যবহার করে, তারপর কিছু রুল (rules) যোগ করলে যা এর অপিয়রেন্স (appearance) প্রভাবিত করে, কার্লি ব্র্যাকেটের ভিতরে গ্রুপ করা হয়। ওপেনিং এবং ক্লোজিং কার্লি ব্র্যাকেটের মাঝপথে রাখা সব কিছু "টার্গেটেড এলিমেন্ট" (targeted element)-কে প্রভাবিত করে।
উদাহরণস্বরূপ, আপনি নিচের রুলটি যোগ করলে:
display: none;
এটি ভিউ থেকে এলিমেন্টটি লুকিয়ে (hide) দেবে যেখানে এটি ব্যবহার করা হয়েছে। এটি সম্ভবত জানার সবচেয়ে সহজ পথ যে আপনি আপনার পেজে সঠিক এলিমেন্ট টার্গেট করছেন। যদি এটি গায়েব হয়, তবে এটি নিশ্চিতভাবেই সেটি, এবং আপনি এই রুলটি ডিলিট করে অন্যগুলো ট্রাই করতে পারেন। যদি এটি গায়েব না হয়, তবে Inspector-এ ফিরে যান এবং কিছু ভিন্ন সিলেক্ট করুন।
আমরা এখানে CSS কোডিং শিখাবো না, কিন্তু আপনি কিছু জনপ্রিয় রুলস (popular rules) দিয়ে খেলতে পারেন যেন:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
আপনি লক্ষ্য করবেন যে সাইটের এলিমেন্ট পরিবর্তন হচ্ছে আপনি CSS স্টাইলশীটে রুল যোগ করার সাথে সাথে।
শেষ নোট হিসেবে, মনে রাখবেন কিছুই সেভ (save) হয় না। আপনি যদি আপনার টুইক (tweaks) কীভাবে দেখছে সেটি পছন্দ করেন, তবে আপনার কোড কোথাও কপি করুন—একটি TXT ফাইলে বা আপনার পছন্দের নোট-টেকিং অ্যাপ্লিকেশন (note-taking application)-এ—যাতে আপনি বা একজন ডিজাইনার/ডেভেলপার আপনার সাইটের স্টাইলশীটে যোগ করে পরিবর্তনগুলো পারম্যানেন্ট (permanent) করতে পারেন। CSS শিখতে চাইলে, কিছু অনলাইন গেম চেক আউট করুন যা আপনাকে স্কিলে মাস্টার (master) করতে সাহায্য করবে।
