ফ্রন্ট এন্ড ডেভেলপার ইন্টারভিউ প্রশ্নাবলী

Table of Contents

  1. সাধারন প্রশ্ন
  2. এইচটিএমএল প্রশ্ন
  3. সিএসএস প্রশ্ন
  4. জাভাস্ক্রিপ্ট প্রশ্ন
  5. টেস্টিং প্রশ্ন
  6. পারফরম্যান্স প্রশ্ন
  7. নেটওয়ার্ক প্রশ্ন
  8. মজার প্রশ্ন

[⬆] সাধারন প্রশ্ন:

  • আপনি গতকাল বা এই সপ্তাহে কি শিখেছেন?
  • কোন জিনিশ আপনাকে কোডিং সম্পর্কে আপনি উত্তেজিত বা আগ্রহী করেছে?
  • আপনি সাম্প্রতিক কোন টেকনিক্যাল চ্যালেঞ্জটি অনুভব করেছেন এবং আপনি কীভাবে এটি সমাধান করেছেন?
  • একটি নতুন সাইট তৈরি করার সময় বা একটি মেইন্টেইন করার সময়, আপনি পারফরম্যান্স বাড়ানোর জন্য ব্যবহার করেছেন এমন কিছু কৌশল ব্যাখ্যা করতে পারেন?
  • আপনি কি ইদানীং ব্যবহার করেছেন এমন কিছু এসইও এর বেস্ট প্র্যাকটিস বা কৌশল বর্ণনা করতে পারেন?
  • ফ্রন্ট-এন্ড এর সিকিউরিটির বিষয়ে আপনি কি কোন সাধারণ কৌশল বা সাম্প্রতিক সমস্যার সমাধান ব্যাখ্যা করতে পারেন?
  • আপনার কোডের রক্ষণাবেক্ষণযোগ্যতা বাড়ানোর জন্য আপনি ব্যক্তিগতভাবে সাম্প্রতিক প্রকল্পগুলিতে কী পদক্ষেপ নিয়েছেন?
  • আপনার পছন্দের ডেভেলপমেন্ট এনভারনমেন্ট সম্পর্কে বলুন।
  • আপনি কোন ভার্সন কন্ট্রোল সিস্টেমের সাথে পরিচিত?
  • আপনি একটি ওয়েব পেইজে তৈরি করার সময় আপনার ওয়ার্কফ্লো বর্ণনা করতে পারেন?
  • আপনার যদি 5টি ভিন্ন স্টাইলশীট থাকে, তাহলে আপনি কীভাবে সেগুলিকে সাইটের সাথে ইনেটেগ্রেট করবেন?
  • আপনি কি প্রগ্রেসিভ এনহাঞ্চমেন্ট এবং গ্রেসফুল ডিগ্রেডেশন মধ্যে পার্থক্য বর্ণনা করতে পারেন?
  • আপনি কিভাবে একটি ওয়েবসাইটের এসেট/ রিসোর্স অপ্টিমাইজ করবেন?
  • একটি ব্রাউজার একটি ডোমেন থেকে একবারে কতগুলি রিসোর্স ডাউনলোড করবে?
    • ব্যতিক্রম কি?
  • পেজ লোড কমানোর ৩টি উপায়ের নাম দিন (অনুভূত বা প্রকৃত লোডের সময়)।
  • আপনি যদি একটি প্রকল্পে কাজ করেন যেখানে অন্যরা ট্যাব ব্যবহার করেন এবং আপনি স্পেস ব্যবহার করেন, আপনি কী করবেন?
  • আপনি কীভাবে একটি সিম্পল স্লাইডশো পেইজ তৈরি করবেন তা বর্ণনা করুন।
  • আপনি যদি এই বছরে একটি টেকনোলজি তে মাস্টার হতে চান তবে এটি কী হবে?
  • স্ট্যান্ডার্ড ও স্ট্যান্ডার্ড বডির গুরুত্ব ব্যাখ্যা করুন।
  • ফ্ল্যাশ অফ আনস্টাইলড কন্টেন্ট কি? আপনি কিভাবে এটি এড়াবেন?
  • এরিয়া এবং স্ক্রিনরিডারগুলি কী এবং কীভাবে একটি ওয়েবসাইট অ্যাক্সেসযোগ্য করা যায় তা ব্যাখ্যা করুন৷
  • সিএসএস অ্যানিমেশন বনাম জাভাস্ক্রিপ্ট অ্যানিমেশনের জন্য কিছু সুবিধা এবং অসুবিধা ব্যাখ্যা করুন।
  • CORS মানে কি এবং এটি কোন সমস্যা কে পয়েন্ট করে?
  • আপনি কিভাবে আপনার বস বা আপনার সহযোগীর সাথে একটি মতবিরোধ হ্যান্ডেল করেছেন?
  • ফ্রন্ট এন্ড ডেভেলপমেন্ট এবং ডিজাইনের লেটেস্ট বিষয়ে জানতে আপনি কোন রিসোর্স ব্যবহার করেন?
  • একজন ভালো ফ্রন্ট-এন্ড ডেভেলপার হতে কী কী দক্ষতা প্রয়োজন?
  • আপনি নিজেকে কোন রোলে দেখেন?
  • কুকিজ, সেশন স্টোরেজ এবং লোকাল স্টোরেজের মধ্যে পার্থক্য ব্যাখ্যা করুন?
  • যখন আপনি ব্রাউজারে একটি URL প্রবেশ করেন তখন কী ঘটে?
  • SSR ও CSR এর মধ্যে পার্থক্য বর্ণনা করুন, ভালো-মন্দ আলোচনা করুন।
    • আপনি স্ট্যাটিক রেন্ডারিং এর সঙ্গে পরিচিত?
    • রিহাইড্রেশন?

[⬆] HTML Questions:

  • ডকটাইপ কি করে?
  • আপনি কীভাবে একাধিক ভাষায় কন্টেন্ট সহ একটি পেইজ সার্ভ করবেন?
  • মাল্টিল্যাঙ্গুয়াল সাইটগুলির জন্য ডিজাইন বা ্ডেভেলপ করার সময় আপনাকে কী ধরণের বিষয়ে সতর্ক থাকতে হবে?
  • ডেটা-এট্রিবিউট কীসের জন্য ভাল?
  • HTML5 কে একটি ওপেন ওয়েব প্ল্যাটফর্ম হিসাবে বিবেচনা করুন। HTML5 এর বিল্ডিং ব্লক কি কি?
  • কুকি, সেশন স্টোরেজ এবং লোকাল স্টোরেজের মধ্যে পার্থক্য বর্ণনা করুন।
  • <script>, <script async> এবং <script defer> এর মধ্যে পার্থক্য বর্ণনা করুন।
  • কেন সাধারণত CSSগুলিকে head এবং JS কে body এর মধ্যে অবস্থান করা একটি ভাল ধারণা? আপনি কোন ব্যতিক্রম জানেন?
  • প্রগ্রেসিভ রেন্ডারিং কি?
  • কেন আপনি একটি ইমেজ ট্যাগে একটি srcset এট্রিবিউট ব্যবহার করবেন? এই এট্রিবিউট ইভ্যালুয়েট করার সময় ব্রাউজার যে প্রক্রিয়াটি ব্যবহার করে তা ব্যাখ্যা করুন।
  • আপনি কি আগে ভিন্ন HTML টেমপ্লেটিং ভাষা ব্যবহার করেছেন?
  • ক্যানভাস এবং এসভিজির মধ্যে পার্থক্য কী?
  • HTML এ খালি ইলিমেন্টস কি?

[⬆] CSS Questions:

  • সিএসএস সিলেক্টর স্পেসিফিসিটি কি এবং এটি কিভাবে কাজ করে?
  • “resetting” এবং “normalizing” CSS এর মধ্যে পার্থক্য কী? আপনি কোনটি বেছে নেবেন এবং কেন?
  • ফ্লোট এবং এটি কিভাবে কাজ করে তা বর্ণনা করুন।
  • z-index বর্ণনা করুন এবং কীভাবে স্ট্যাকিং কনটেক্সট গঠিত হয়।
  • বিএফসি (Block Formatting Context) এবং এটি কীভাবে কাজ করে তা বর্ণনা করুন।
  • বিভিন্ন ক্লিয়ারিং কৌশল কি এবং কোন প্রেক্ষাপটের জন্য কোনটি উপযুক্ত?
  • আপনি কীভাবে ব্রাউজার-নির্দিষ্ট স্টাইলিং সমস্যাগুলি সমাধান করবেন?
  • আপনি কিভাবে সীমাবদ্ধ ফিচারের ব্রাউজারগুলির জন্য আপনার পেইজগুলো পরিবেশন করবেন?
    • আপনি কি টেকনিক/প্রসেস ব্যবহার করেন?
  • দৃশ্যত কন্টেন্ট লুকানোর (এবং এটি শুধুমাত্র স্ক্রিন রিডারদের জন্য এভেইলেবল করার) বিভিন্ন উপায় কী?
  • আপনি কি কখনও একটি গ্রিড সিস্টেম ব্যবহার করেছেন, এবং যদি তাই হয়, আপনি কি প্রেফার করেন?
  • আপনি কি মিডিয়া কুয়েরি বা মোবাইলের নির্দিষ্ট লেআউট/সিএসএস ব্যবহার করেছেন বা ইমপ্লিমেন্ট করেছেন?
  • আপনি SVG স্টাইলিং সঙ্গে পরিচিত?
  • আপনি কি screen ছাড়া অন্য কোনো @media প্রপারর্টির উদাহরণ দিতে পারেন?
  • এফিসিয়েন্ট CSS লেখার জন্য কিছু “gotchas” কি কি?
  • CSS প্রিপ্রসেসর ব্যবহার করার সুবিধা/অসুবিধা কি?
    • আপনি যে CSS প্রিপ্রসেসরগুলি ব্যবহার করেছেন সেগুলি সম্পর্কে আপনি পছন্দ এবং অপছন্দ করেন তা বর্ণনা করুন।
  • নন স্ট্যান্ডার্ড ফন্ট ব্যবহার করে এমন একটি ওয়েব ডিজাইন কম্পনেন্ট কিভাবে আপনি ইমপ্লিমেন্ট করবেন?
  • ব্যাখ্যা করুন কিভাবে একটি ব্রাউজার নির্ধারণ করে কোন উপাদানগুলি একটি CSS সিলেক্টরের সাথে ম্যাচ করে।
  • বর্ণনা করুন pseudo-elements এবং সেগুলি কীসের জন্য ব্যবহৃত হয় তা আলোচনা করুন।
  • বক্স মডেল সম্পর্কে আপনি যা বুঝেন ব্যাখ্যা করুন এবং আপনি কীভাবে CSS-এ ব্রাউজারকে বিভিন্ন বক্স মডেলে আপনার লেআউট রেন্ডার করবেন ব্যাখ্যা করুন।
  • * { box-sizing: border-box; } কি করে? এর সুবিধা কি কি?
  • CSS display প্রপার্টি কী এবং আপনি এর ব্যবহারের কয়েকটি উদাহরণ দিতে পারেন?
  • ইনলাইন এবং ইনলাইন-ব্লকের মধ্যে পার্থক্য কী?
  • “nth-of-type()” এবং “nth-child()” সিলেক্টরের মধ্যে পার্থক্য কি?
  • একটি relative, fixed, absolute and statically অবস্থানকারী ইলিমেন্ট এর মধ্যে পার্থক্য কী?
  • কোন এক্সিস্টিং CSS ফ্রেমওয়ার্ক আপনি লোকালি বা প্রোডাকশনে ব্যবহার করেছেন? আপনি কিভাবে তাদের চেঞ্জ/উন্নতি করবেন?
  • আপনি কি CSS গ্রিড ব্যবহার করেছেন?
  • আপনি মোবাইল ফার্স্ট স্ট্র্যাটেজি এবং কোডিং করে সাইট রেসপন্সিভ এর মধ্যে পার্থক্য ব্যাখ্যা করতে পারেন?
  • আপনি কি কখনও রেটিনা গ্রাফিক্স নিয়ে কাজ করেছেন? যদি তাই হয়, আপনি কখন এবং কি কৌশল ব্যবহার করেছেন?
  • কোন কারণ আছে যে আপনি absolute positioning এর পরিবর্তে translate() ব্যবহার করতে চান বা এর বিপরীতে? এবং কেন?
  • কিভাবে ক্লিয়ারফিক্স সিএসএস প্রপার্টি উপকারী?
  • আপনি px, em এবং rem এর মধ্যে পার্থক্য ব্যাখ্যা করতে পারেন কারণ তারা ফন্ট সাইজিংয়ের সাথে সম্পর্কিত?
  • আপনি pseudo class এর একটি উদাহরণ দিতে পারেন? আপনি pseudo class এর জন্য একটি ইউজ কেইস উদাহরণ হিসেবে দিতে পারেন?
  • একটি ব্লক লেভেল ইলিমেন্ট এবং একটি ইনলাইন ইলিমেন্টের মধ্যে পার্থক্য কি? আপনি প্রতিটি ইলিমেন্টের উদাহরণ প্রদান করতে পারেন?
  • সিএসএস গ্রিড এবং ফ্লেক্সবক্সের মধ্যে পার্থক্য কী? আপনি কখন একটি অন্যের উপর ব্যবহার করবেন?
  • ফিক্সড, ফ্লুইড এবং রেস্পন্সিভ লেআউটের মধ্যে পার্থক্য কী?

[⬆] JS Questions:

  • ইভেন্ট ডেলিগেশন ব্যাখ্যা করুন।
  • জাভাস্ক্রিপ্টে this কীভাবে কাজ করে তা ব্যাখ্যা করুন।
    • আপনি কি ES6 এ this এর সাথে কাজ করার উপায়গুলির একটির উদাহরণ দিতে পারেন?
  • প্রোটোটাইপল ইনহেরিটেন্স কিভাবে কাজ করে তা ব্যাখ্যা কর।
  • এই ভেরিয়েবলের মধ্যে পার্থক্য কী যেটি: null, undefined বা undeclared?
    • আপনি কিভাবে এই স্টেট চেক করবেন?
  • ক্লোজার কি, কিভাবে/কেন আপনি ব্যবহার করবেন?
  • অবজেক্ট এবং অ্যারে আইটেমগুলির উপর লুপ করার জন্য আপনি কোন ল্যাংগুয়েজ কন্সট্রাক্টর ব্যবহার করেন?
  • আপনি কি Array.forEach() এবং Array.map() এর প্রধান পার্থক্য বর্ণনা করতে পারেন এবং কেন আপনি একটি বনাম অন্যটিকে বেছে নেবেন?
  • এননিমাস ফাংশনের এর সাধারণ ব্যবহার কি?
  • হোস্ট অবজেক্ট এবং নেটিভ অবজেক্টের মধ্যে পার্থক্য কি?
  • পার্থক্য ব্যাখ্যা করুন: function Person(){}, var person = Person(), এবং var person = new Person()?
  • পার্থক্য ব্যাখ্যা করুন foo between function foo() {} and var foo = function() {} এইগুলো ইউজ এর।
  • আপনি কি ব্যাখ্যা করতে পারেন Function.call এবং Function.apply কি করে? দুটি মধ্যে উল্লেখযোগ্য পার্থক্য কি?
  • ব্যাখ্যা করুন Function.prototype.bind.
  • feature detection, feature inference এবং UA স্ট্রিং ব্যবহার করার মধ্যে পার্থক্য কি?
  • ব্যাখ্যা করুন “hoisting”.
  • টাইপ coercion কি? জাভাস্ক্রিপ্ট কোডে টাইপ coercion উপর নির্ভর করার সাধারণ অসুবিধাগুলি কী কী?
  • বর্ণনা করুন ইভেন্ট বাবলিং।
  • বর্ণনা করুন ইভেন্ট ক্যাপচারিংন।
  • “attribute” এবং “property” এর মধ্যে পার্থক্য কি?
  • বিল্ট ইন জাভাস্ক্রিপ্ট অবজেক্ট এক্সটেন্ডের সুবিধা এবং অসুবিধাগুলি কী কী?
  • == এবং === এর মধ্যে পার্থক্য কী?
  • জাভাস্ক্রিপ্টের ক্ষেত্রে same-origin policy ব্যাখ্যা করুন।
  • কেন এটিকে Ternary অপারেটর বলা হয়, “Ternary” শব্দটি কি নির্দেশ করে?
  • স্ট্রিক্ট মোড কি? এটি ব্যবহার করার কিছু সুবিধা/অসুবিধা কি কি?
  • জাভাস্ক্রিপ্টে কম্পাইল করা একটি ভাষায় জাভাস্ক্রিপ্ট কোড লেখার কিছু সুবিধা/অসুবিধা কী কী?
  • আপনি ডিবাগিং এর জন্য কি টুল বা টেকনিক ব্যবহার করেন?
  • মিউটেবল ইমিউটেবল অব্জেক্টস এর মধ্যে পার্থক্য ব্যাখ্যা কর।
    • জাভাস্ক্রিপ্টে ইমিউটেবল অব্জেক্ট এর উদাহরণ দিন।
    • ইমিউটেবলিটি এর সুবিধা এবং অসুবিধাগুলি কী কী?
    • কিভাবে আপনি আপনার নিজের কোডে ইমিউটেবলিটি অর্জন করতে পারেন?
  • সিঙ্ক্রোনাস এবং অ্যাসিঙ্ক্রোনাস ফাংশনের মধ্যে পার্থক্য ব্যাখ্যা করুন।
  • ইভেন্ট লুপ কি?
    • কল স্ট্যাক এবং টাস্ক কিউ মধ্যে পার্থক্য কি?
  • let, var বা const ব্যবহার করে তৈরি ভেরিয়েবলের মধ্যে পার্থক্য কী?
  • ES6 ক্লাস এবং ES5 ফাংশন কনস্ট্রাক্টরের মধ্যে পার্থক্য কি?
  • আপনি নতুন এরো => ফাংশন সিনট্যাক্সের জন্য একটি ব্যবহারের ইউজ কেইস অফার করতে পারেন? কিভাবে এই নতুন সিনট্যাক্স অন্যান্য ফাংশন থেকে আলাদা?
  • মেথোড কনস্ট্রাক্টরের জন্য এরো সিনট্যাক্স ব্যবহার করার কি কি সুবিধা আছে?
  • higher-order function কি?
  • আপনি অব্জেক্ট বা অ্যারে destructuring এর উদাহরণ দিতে পারেন?
  • আপনি ES6 টেমপ্লেট লিটারালগুলি দিয়ে স্ট্রিং তৈরি করার একটি উদাহরণ দিতে পারেন?
  • আপনি কারি ফাংশন এর একটি উদাহরণ দিতে পারেন এবং কেন এই সিনট্যাক্স সুবিধা প্রদান করে?
  • spread syntax ব্যবহার করার সুবিধা কী এবং কীভাবে এটি rest syntax থেকে আলাদা?
  • আপনি কিভাবে ফাইল গুলোর মধ্যে কোড শেয়ার করতে পারেন?
  • কেন আপনি স্ট্যাটিক ক্লাস মেমবার তৈরি করতে চাইবেন?
  • জাভাস্ক্রিপ্টে while এবং do-while লুপের মধ্যে পার্থক্য কী?
  • একটি প্রমিস কি? কোথায় এবং কিভাবে আপনি প্রমিস ব্যবহার করবেন?
  • জাভাস্ক্রিপ্টের সাথে কোডিং করার সময় আপনি কীভাবে অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং প্রিন্সিপল ব্যবহার করতে পারেন তা নিয়ে আলোচনা করুন।

[⬆] Coding Questions:

  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Create a for loop that iterates up to 100 while outputting “fizz” at multiples of 3, “buzz” at multiples of 5 and “fizzbuzz” at multiples of 3 and 5
  • What will be returned by each of these?
console.log("hello" || "world")
console.log("foo" && "bar")
  • একটি ইমেডিয়েটলি ইনভোকড ফাংশন এক্সপ্রেশন লিখুন (IIFE)

[⬆] Testing Questions:

  • আপনার কোড টেস্টিং করার কিছু সুবিধা/অসুবিধা কি?
  • আপনার কোডের ফাংশনালিটি পরীক্ষা করতে আপনি কোন টুলস ব্যবহার করবেন?
  • ইউনিট টেস্ট এবং ফাংশনাল/ ইন্টেগ্রেশন টেস্টের মধ্যে পার্থক্য কি?
  • একটি কোড স্টাইল লিন্টিং টুলের উদ্দেশ্য কি?
  • টেস্টিং এর বেস্ট প্র্যাকটিস কি কি?

[⬆] Performance Questions:

  • আপনার কোডে পারফরম্যান্স বাগ খুঁজে পেতে আপনি কোন টুল ব্যবহার করবেন?
  • আপনি আপনার ওয়েবসাইটের স্ক্রোলিং পারফরম্যান্স উন্নত করতে পারেন কি কি উপায় এ?
  • লেআউট, পেইন্টিং এবং কম্পোজিংয়ের মধ্যে পার্থক্য ব্যাখ্যা করুন।

[⬆] Network Questions:

  • ট্রেডিশনালি, কেন একাধিক ডোমেন থেকে সাইট এসেট পরিবেশন করা ভাল?
  • আপনি একটি ওয়েবসাইটের URL টাইপ করার সময় থেকে এটি আপনার স্ক্রিনে লোড হওয়া পর্যন্ত প্রক্রিয়াটি বর্ণনা করার জন্য যথাসাধ্য চেষ্টা করুন।
  • লং-পোলিং, ওয়েবসকেট এবং সার্ভার-সেন্ট ইভেন্টের মধ্যে পার্থক্য কী?
  • নিম্নলিখিত রিকোয়েস্ট এবং রেসপন্স হেডার ব্যাখ্যা করুন:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP মেথড কি? আপনি জানেন সে সমস্ত HTTP মেথড তালিকাভুক্ত করুন এবং তাদের ব্যাখ্যা করুন।
  • ডোমেন প্রি-ফেচিং কী এবং এটি কীভাবে পারফরম্যান্সে সাহায্য করে?
  • CDN কি এবং একটি ব্যবহার করে লাভ কি?

[⬆] Fun Questions:

  • আপনি সম্প্রতি কাজ করেছেন এমন একটি কুল প্রজেক্টের ব্যাপারে বলুন?
  • আপনি যে ডেভেলপার টুলগুলি ব্যবহার করেন সেগুলি থেকে আপনি কী পছন্দ করেন?
  • ফ্রন্ট-এন্ড কমিউনিটিতে কে আপনাকে অনুপ্রাণিত করেছে?
  • আপনি কোন পেট প্রজেক্ট আছে? কি ধরনের?