নতুন ফ্রন্ট-এন্ড ডেভলপারদের কিছু কমন প্রশ্ন এবং সেগুলোর উত্তর (পর্ব-১)

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

ফেসবুকে প্রতিটা প্রশ্নের সাথে সাধারণত একটা স্ক্রিনশট দেয়া থাকে এবং প্রশ্ন করা হয় এভাবে-
ভাই, এই সেকশানটা কিভাবে করবো?

আমরাও এখানে প্রতিটা প্রশ্নের সাথে একটি করে ইমেজ এটাচ করবো, যেন সবাই বুঝতে পারে। ঠিকাছে তাহলে, শুরু করা যাক।

 

প্রথম প্রশ্ন –  css overlay

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

মূল ছবিটা এখান থেকে দেখে আসতে পারেন।

 

এই কাজটা করার অনেকগুলো পদ্ধতি আছে। আমরা এখানে আলোচনা করবো ব্যাসিকটা নিয়ে, যেন এডভান্স লেভেলের পদ্ধতিগুলো শিখাটা আমাদের জন্য সহজ হয়।

নিচের প্যানটিতে css overlay এর খুবই প্রাথমিক একটি উদাহরণ দেখানো হলো। ভালভাবে দেখুন, তারপর নিজে প্র্যাক্টিস করুন-

 

দ্বিতীয় প্রশ্ন – tooltip/arrow

 

উপরের ছবিটি Bootstrap 3.3 এর পেজ থেকে নেয়া। আমরা সবাই এই টুলটিপ ফিচারটির সাথে কমবেশি পরিচিত। আরও বিস্তারিত জানতে ছবিটিতে ক্লিক করে Bootstrap 3.3 এর এই পেজ থেকে ঘুরে আসতে পারেন।

এই জিনিসটা Bootstrap এর সাহায্য ছাড়া কিভাবে তৈরি করা যায়, সেটাই আমরা এখন দেখবো। এই পোস্টে বর্ডার নিয়ে কিছু কথা বলেছিলাম, মনে আছে? পোস্টের শেষ দিকে বর্ডারের শেইপ নিয়ে গুরুত্ব দিয়েছিলাম। এখন যে আমরা টুলটিপ তৈরি করবো, সেটি এই বর্ডারের শেইপের মাধ্যমেই করবো। আর এটিও আমরা একটি ব্যাসিক হিসেবেই তৈরি করবো, যেন এডভান্স পদ্ধতিগুলো নিজে নিজে শিখতে কোন সমস্যা না হয়-

 

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

ওকে .. ভাল থাকেন সবাই। আবার দেখা হবে।

মন্তব্য

মন্তব্য