ফায়ারফক্সের ওয়েব ডেভেলপার টুল দিয়ে কিভাবে একটি সাইট লাইভ-এডিট করবেন

লোগোটি ডানদিকে পাঁচ পিক্সেল সরানো হলে বা নীল ব্যাকগ্রাউন্ড থাকলে আপনার সাইটটি কি আরও ভালো দেখাবে? আপনার বৈশিষ্ট্যযুক্ত পোস্টগুলিতে চিত্রগুলিতে একটি সীমানা বা ছায়া যুক্ত করা কি সেগুলিকে আরও পপ করে তুলবে? Firefox-এর মতো আধুনিক ব্রাউজারগুলি ওয়েব ডেভেলপার টুলগুলির সাথে আসে যা আপনাকে একটি সাইটের অভ্যন্তরীণ কাজগুলি পরিদর্শন করতে এবং লাইভ সম্পাদনা করতে দেয়, রিয়েল-টাইমে ফলাফলগুলি দেখতে দেয়৷

এই টিউটোরিয়ালে আপনি শিখবেন কিভাবে ফায়ারফক্সের ওয়েব ডেভেলপার টুল ব্যবহার করে যেকোনো সাইট লাইভ-এডিট করতে হয়।

দ্রষ্টব্য :এই টিউটোরিয়ালটি Chrome, Opera এবং Safari সহ বেশিরভাগ ব্রাউজারগুলির জন্য প্রযোজ্য৷

ওয়েব ডেভেলপার টুলের সাথে দেখা করুন

ফায়ারফক্সের ওয়েব ডেভেলপার টুলস হল টুলগুলির একটি বিস্তৃত সেট, সমস্ত DOM উপাদানগুলি প্রদর্শন করা থেকে এর গতি পরিমাপ করতে সক্ষম হওয়া পর্যন্ত। এই টিউটোরিয়ালের জন্য আপনার শুধুমাত্র "ইন্সপেক্টর" এবং "স্টাইল এডিটর" টুলস লাগবে।

ফায়ারফক্স ফায়ার করুন এবং যেকোনো/আপনার সাইটে যান। ফায়ারফক্সের হ্যামবার্গার মেনু থেকে (ডিফল্টভাবে উপরের ডানদিকে), "ওয়েব ডেভেলপার -> স্টাইল এডিটর" বেছে নিন বা Shift টিপুন। + F7 আপনার কীবোর্ডে সমন্বয়।

ফায়ারফক্সের ওয়েব ডেভেলপার প্যানেলটি তার উইন্ডোর একপাশে প্রদর্শিত হবে - সাধারণত নীচের অংশে। আপনি প্যানেলের উপরের ডানদিকে তিন-বিন্দু বোতামে ক্লিক করে এবং "ডানে/বামে ডক" বা "পৃথক উইন্ডো" বেছে নিয়ে এর অবস্থান পরিবর্তন করতে পারেন৷

দ্রষ্টব্য :এই টিউটোরিয়ালটি আপনাকে দেখানো হচ্ছে না কিভাবে HTML এবং CSS কোড করতে হয়। আপনি এখানে বেসিক শিখতে পারেন।

উপাদান পরিদর্শন করা হচ্ছে

একটি উপাদান কিভাবে দেখায় প্রভাবিত করতে সক্ষম হতে, আপনাকে এটি সনাক্ত করতে সক্ষম হতে হবে। এর টুলবারের প্রথম বোতামটিতে ক্লিক করুন অথবা Ctrl টিপুন + Shift + C উপাদান-পিকার মোড সক্ষম করতে আপনার কীবোর্ডে।

হাইলাইট করা ওয়েবপৃষ্ঠার বিভিন্ন উপাদান দেখতে সাইটের চারপাশে আপনার মাউস নিয়ে যান। তাদের পাশে আপনি তাদের প্রাথমিক শনাক্তকারী একটি পপ-আপে ঘোরাফেরা করতে দেখতে পাবেন৷

আপনি যখন একটি উপাদানে ক্লিক করেন, তখন এটি বিকাশকারী সরঞ্জামগুলির পরিদর্শক ট্যাবে নির্বাচন করা হবে।

আপনি যে উপাদানটি টুইক করতে চান তা খুঁজে পেলে, বিকাশকারী টুলস ইন্সপেক্টরে এটির এন্ট্রিতে ডান-ক্লিক করুন এবং প্রদর্শিত পপ-আপ উইন্ডো থেকে নির্বাচন করুন - "কপি -> CSS নির্বাচক।"

আপনার লাইভ সম্পাদনা শুরু করুন

আপনার উপাদানের CSS নির্বাচক ক্লিপবোর্ডে অনুলিপি করে, বিকাশকারী সরঞ্জাম উইন্ডোতে স্টাইল এডিটর ট্যাবে ফিরে যান। উপরের বাম দিকে "+" বোতামে ক্লিক করুন "নতুন নথিতে একটি নতুন স্টাইলশীট তৈরি করুন এবং যুক্ত করুন।"

নতুন, ফাঁকা স্টাইলশীটের ভিতরে আপনার CSS নির্বাচক আটকান। একটি স্পেস যোগ করুন, তারপরে খোলা এবং বন্ধ কোঁকড়ানো বন্ধনীগুলির একটি সেট৷

সিএসএস-এ, একটি উপাদানের চেহারা প্রথমে "এটিকে লক্ষ্য করে" সিএসএস নির্বাচকের মতো একটি শনাক্তকারী ব্যবহার করে সংজ্ঞায়িত করা হয়, তারপরে কিছু নিয়ম যুক্ত করা হয় যা এর চেহারাকে প্রভাবিত করে, কোঁকড়া বন্ধনীর মধ্যে গোষ্ঠীবদ্ধ। খোলা এবং বন্ধ কোঁকড়া বন্ধনীর মধ্যে রাখা সবকিছুই "লক্ষ্যযুক্ত উপাদান"কে প্রভাবিত করে৷

উদাহরণস্বরূপ, যদি আপনি নীচের নিয়ম যোগ করেন:

display: none;

এটি উপাদানটি যেখানে এটি ব্যবহার করা হয় তা দেখার থেকে লুকিয়ে রাখবে। আপনি আপনার পৃষ্ঠায় সঠিক উপাদানটি লক্ষ্য করছেন তা জানার সম্ভবত এটি সবচেয়ে সহজ উপায়। যদি এটি অদৃশ্য হয়ে যায়, এটি ছিল, প্রকৃতপক্ষে, আপনি যা চান, এবং আপনি অন্যদের চেষ্টা করার জন্য এই নিয়মটি মুছে ফেলতে পারেন। যদি এটি অদৃশ্য না হয়, তাহলে পরিদর্শকের কাছে ফিরে যাওয়ার এবং ভিন্ন কিছু নির্বাচন করার সময় এসেছে।

আমরা আপনাকে এখানে সিএসএস কোড করার পদ্ধতি দেখাব না, তবে আপনি কিছু জনপ্রিয় নিয়মগুলির সাথে খেলতে পারেন যেমন:

border: 2px solid rgba(255,0,0,0.5);
color: #333;
font-size:20px;

আপনি লক্ষ্য করবেন যে আপনি CSS স্টাইলশীটে নিয়ম যোগ করার সাথে সাথে সাইটের উপাদান পরিবর্তিত হয়।

একটি সমাপনী নোট হিসাবে, কিছুই সংরক্ষিত হয় না মনে রাখবেন. আপনি যদি আপনার টুইকগুলি দেখতে চান তবে আপনার কোডটি কোথাও অনুলিপি করুন - একটি TXT ফাইলে বা আপনার প্রিয় নোট গ্রহণের অ্যাপ্লিকেশনে - যাতে আপনি বা একজন ডিজাইনার/ডেভেলপার পরিবর্তনগুলিকে স্থায়ী করতে আপনার সাইটের স্টাইলশীটে এটি যোগ করতে সক্ষম হবেন। আপনার যদি CSS সম্বন্ধে শিখতে হয়, তবে কিছু অনলাইন গেম দেখুন যাতে আপনি দক্ষতা অর্জন করতে পারেন।