React IQ (PHero)

প্রশ্ন: Article, div, section, nav, aside এর উদ্দেশ্য কী?

উত্তর:
সবগুলোই semantic ট্যাগ। এর মূল উদ্দেশ্য হলো পেজের কনটেন্টের গঠন বা অর্থ ব্রাউজার এবং ডেভেলপারদের জন্য স্পষ্ট করা।

প্রশ্ন: Meta tag কেন ব্যবহার করবেন?

উত্তর:
Meta tag HTML ডকুমেন্ট সম্পর্কে অতিরিক্ত তথ্য (metadata) সংরক্ষণ করে।
এটি সার্চ ইঞ্জিন, ব্রাউজার এবং অন্যান্য ওয়েব সার্ভিসের জন্য গুরুত্বপূর্ণ।
যেমন: ক্যারেক্টার সেট, কীওয়ার্ড, লেখক, এবং ভিউপোর্ট সেটিংস নির্ধারণ করা।

প্রশ্ন: inline, inline-block এবং block উপাদানের মধ্যে পার্থক্য কী?

উত্তর:

• inline: height/width নির্ধারণ করা যায় না; কনটেন্ট অনুযায়ী সাইজ হয়।
• inline-block: height/width নির্ধারণ করা যায় এবং এটি একটি লাইনে থাকে।
• block: নতুন লাইনে শুরু হয়, পুরো প্রস্থ জুড়ে স্থান নেয়, height/width নির্ধারণ করা যায়।

প্রশ্ন: strong, b, bold, em, i - এদের মধ্যে পার্থক্য কী?

উত্তর:

• এবং স্টাইলিং ট্যাগ – সরাসরি bold ও italic করে।
• এবং semantic ট্যাগ – গুরুত্বপূর্ণ বা জোর দিয়ে বোঝাতে ব্যবহৃত হয়, স্টাইল CSS দিয়ে নিয়ন্ত্রণযোগ্য।

প্রশ্ন: HTML-এ properties এবং attributes এর মধ্যে পার্থক্য কী?

উত্তর:

• Attribute: HTML নির্ধারণ করে।
• Property: DOM দ্বারা নির্ধারিত।
• Attribute এর মান স্থির; Property এর মান পরিবর্তনশীল।

প্রশ্ন: Viewport কী?

উত্তর:
Viewport হচ্ছে ব্রাউজারে দৃশ্যমান ওয়েব পেজের এলাকা, যা ডিভাইস ভেদে ভিন্ন হতে পারে।

প্রশ্ন: Audio এবং Video tag কি ব্যবহার করেছেন? কীভাবে কাজ করে?

উত্তর:
হ্যাঁ, ব্যবহার করেছি। ট্যাগের মাধ্যমে মিডিয়া যুক্ত করা যায়। src অ্যাট্রিবিউটে ফাইল সোর্স দিতে হয়, controls অ্যাট্রিবিউট ব্যবহার করলে ইউজার প্লে/পজ করতে পারে।

প্রশ্ন: Hyperlink কী? কোন ট্যাগ ও অ্যাট্রিবিউট ব্যবহার করবেন?

উত্তর:
হাইপারলিঙ্ক হলো একটি লিংক যা ক্লিক করলে ব্যবহারকারী অন্য পৃষ্ঠায় যেতে পারে।
ট্যাগ:
অ্যাট্রিবিউট: href (লিংকের গন্তব্য নির্দেশ করে)।

প্রশ্ন: HTML elements এবং tags এর মধ্যে পার্থক্য কী?

উত্তর:

• Tag:

  ,

  ইত্যাদি, HTML এর গঠন।
• Element: Tag সহ কনটেন্ট, যেমন

  Text

  ।

প্রশ্ন: charset কী এবং কেন ব্যবহার করবেন?

উত্তর:
charset HTML ডকুমেন্টের ক্যারেক্টার এনকোডিং নির্ধারণ করে। সাধারণত UTF-8 ব্যবহার করা হয়, যা বিশ্বের প্রায় সব ভাষা সাপোর্ট করে।

প্রশ্ন: HTML5-এ image map কী?

উত্তর:
Image map হলো একটি ছবি যেখানে নির্দিষ্ট কিছু অংশে ক্লিক করে ভিন্ন লিংকে যাওয়া যায়।
ট্যাগ:

---

৩. CSS

প্রশ্ন: Flex layout কী? Flex এবং Grid layout এর মধ্যে পার্থক্য কী?

উত্তর:
Flex Layout একটি উন্নততর লেআউট মেথড যা এলিমেন্টগুলোকে স্মার্টলি সারি বা কলামে সাজাতে সাহায্য করে।

• Flexbox একমাত্রিক (row বা column)।
• Grid হলো দ্বিমাত্রিক (row ও column একসাথে)।
• Grid ব্যবহার করলে আরও জটিল এবং নিখুঁত লেআউট ডিজাইন করা যায়।

প্রশ্ন: CSS position property ব্যাখ্যা করুন। Absolute ও relative position এর মধ্যে পার্থক্য কী?

উত্তর:
CSS Position property দ্বারা একটি এলিমেন্টকে কোথায় অবস্থান করবে তা নির্ধারণ করা হয়।

• relative: তার স্বাভাবিক অবস্থান থেকে সরানো হয়।
• absolute: নিকটবর্তী positioned parent এর উপর ভিত্তি করে নির্ধারিত হয়।

প্রশ্ন: Box model কী? এর উপাদানগুলো কী কী?

উত্তর:
Box model HTML এর প্রতিটি এলিমেন্টকে একটি বক্স হিসেবে ধরে। এর উপাদান:
১. Content
২. Padding
৩. Border
৪. Margin

প্রশ্ন: Hover effect কী? Active class-এর উদ্দেশ্য কী? বা Pseudo-class কী?

উত্তর:

• Hover Effect: ইউজার মাউস নিয়ে গেলে যেকোনো CSS পরিবর্তন যেমন কালার বা সাইজ হওয়া।
• Active class: যখন ইউজার কোনো এলিমেন্টে ক্লিক করে তখন সেটির স্টাইল পরিবর্তন হয়।
• Pseudo-class: একটি class যা এলিমেন্টের নির্দিষ্ট স্টেটে স্টাইল নির্ধারণ করে। যেমন: :hover, :active, :focus

প্রশ্ন: CSS-এর বিভিন্ন selector কী কী? Class এবং ID selector এর পার্থক্য?

উত্তর:
Selector এর প্রকারভেদ:

• Element selector
• Class selector (.class-name)
• ID selector (#id-name)
• Universal selector (*)
• Group selector (h1, p) Class vs ID: একটি ক্লাস বহুবার ব্যবহার করা যায়, কিন্তু ID একবারই ব্যবহারযোগ্য।

প্রশ্ন: CSS Specificity কী?

উত্তর:
Specificity হলো কোন CSS নিয়ম আগে প্রাধান্য পাবে তা নির্ধারণ করার নিয়ম। বেশি নির্দিষ্ট সিলেক্টর হলে তা কম নির্দিষ্ট সিলেক্টরের উপর প্রাধান্য পায়।

প্রশ্ন: CSS Preprocessor কী? Sass এর সুবিধা কী?

উত্তর:
CSS Preprocessor একটি টুল যা CSS থেকে আরও উন্নত ফিচার যোগ করে।
Sass এর সুবিধা:

• কোড পুনঃব্যবহারযোগ্য হয় (variables, mixins)
• CSS লেখার সময় কম লাগে
• Nested rules সহজ করে

প্রশ্ন: Pseudo element কী? একটি উদাহরণ দিন।

উত্তর:
Pseudo element ব্যবহার করে একটি এলিমেন্টের নির্দিষ্ট অংশে স্টাইল প্রয়োগ করা যায়।
উদাহরণ:

• ::first-line
• ::before, ::after

প্রশ্ন: Media query ব্যবহার করে একটি ওয়েবসাইট কিভাবে responsive করবেন?

উত্তর:
Media query CSS3 এর একটি ফিচার। এটি দিয়ে বিভিন্ন স্ক্রিন সাইজ অনুযায়ী স্টাইল অ্যাডজাস্ট করা যায়। উদাহরণ:


@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

প্রশ্ন: কিভাবে font size responsive করবেন? CSS এর কোন units ব্যবহার করবেন?

উত্তর:

• vw (viewport width), em, rem ব্যবহার করে ফন্ট সাইজ responsive করা যায়।
• Media query দিয়ে ভিন্ন স্ক্রিন সাইজে আলাদা সাইজ সেট করা যায়।

প্রশ্ন: Transition এবং Transform এর মধ্যে পার্থক্য কী?

উত্তর:

• Transform: কোনো এলিমেন্টের রূপ পরিবর্তন করে (ঘোরানো, স্কেল করা)।
• Transition: এক অবস্থা থেকে আরেক অবস্থায় ধীরে ধীরে পরিবর্তন ঘটায়।

প্রশ্ন: কিভাবে একটি div-কে আরেকটি div-এর মধ্যে উভয় দিক থেকে কেন্দ্রস্থ করবেন?

উত্তর:


.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

৪. JavaScript (JS)

প্রশ্ন: JavaScript কীভাবে কাজ করে? Event loop কী?

উত্তর:
JavaScript একটি single-threaded ভাষা হলেও এটি asynchronous কাজ করতে পারে Event Loop এর মাধ্যমে। ব্রাউজার JavaScript কোড ইন্টারপ্রেট করে এবং চলমান রাখে।
Event Loop ব্রাউজারের task queue থেকে একের পর এক কাজ নিয়ে execute করে।

প্রশ্ন: JavaScript কোড কীভাবে ব্রাউজারে execute হয়?

উত্তর:
JavaScript কোড ব্রাউজারে লোড হওয়ার পর, ব্রাউজারের ইঞ্জিন (যেমন Chrome-এর V8) কোডটি লাইনে লাইনে পড়ে এবং ইনস্ট্যান্টলি execute করে।

প্রশ্ন: “==” এবং “===” এর মধ্যে পার্থক্য কী?

উত্তর:

• ==: কেবলমাত্র value চেক করে।
• ===: value এবং type দুটোই চেক করে (strict equality)।

প্রশ্ন: Callback function কী?

উত্তর:
Callback function হলো একটি ফাংশন যা অন্য একটি ফাংশনের আর্গুমেন্ট হিসেবে পাঠানো হয় এবং পরে কল করা হয়।

প্রশ্ন: কখন function থেকে return করবেন? কিভাবে একাধিক value return করবেন?

উত্তর:
কোনো function থেকে result চাইলে return ব্যবহার করতে হয়।
JS একাধিক value return করতে পারে না সরাসরি। তাই array বা object আকারে value return করতে হয়।

প্রশ্ন: bind, call এবং apply এর কাজ কী?

উত্তর:

• call() ও apply() সরাসরি ফাংশন এক্সিকিউট করে;
• bind() নতুন ফাংশন রিটার্ন করে যেটি পরে কল করা যায়।
• পার্থক্য: call(arg1, arg2), apply([arg1, arg2]), bind(arg1, arg2)

প্রশ্ন: Closure কীভাবে কাজ করে?

উত্তর:
Closure হলো এমন একটি ফাংশন যা তার parent function-এর scope থেকে ভেরিয়েবল access করতে পারে, এমনকি parent ফাংশন execute শেষ হয়ে গেলেও।

প্রশ্ন: JavaScript এ “this” কী বোঝায়?

উত্তর:

• Regular function-এ this হলো global object (যেমন window)।
• Object method-এ this হলো সেই object।
• arrow function এ this parent scope থেকে আসে।

প্রশ্ন: Event bubbling কী? Delegation কীভাবে কাজ করে?

উত্তর:
Event bubbling মানে হলো একটি event DOM এর নিচ থেকে উপরের দিকে propagate হয়। Event Delegation মানে হলো parent এলিমেন্টে ইভেন্ট add করা, যাতে child-এর ইভেন্টও handle হয়।

প্রশ্ন: Hoisting কী?

উত্তর:
Hoisting মানে ভ্যারিয়েবল বা ফাংশন ডিক্লেয়ারেশন উপরের দিকে উঠে যায়। যেমন:


console.log(a); // undefined
var a = 10;

প্রশ্ন: Recursive function কী?

উত্তর:
যে ফাংশন নিজেই নিজেকে কল করে, তাকে recursive function বলে।

প্রশ্ন: undefined ও null এর পার্থক্য কী?

উত্তর:

• undefined: ভ্যারিয়েবল ডিক্লেয়ার করা হয়েছে কিন্তু মান অ্যাসাইন করা হয়নি।
• null: ইচ্ছাকৃতভাবে "খালি" ভ্যালু সেট করা।

প্রশ্ন: JavaScript এর data types কী কী?

উত্তর:

• Primitive: string, number, boolean, null, undefined, symbol, bigint
• Non-primitive: array, object, function

প্রশ্ন: DOM কী?

উত্তর:
DOM (Document Object Model) হলো একটি API যা HTML ডকুমেন্টকে গঠন করে এবং স্ক্রিপ্ট দিয়ে তা manipulate করা যায়।

প্রশ্ন: JavaScript static type না dynamic type?

উত্তর:
JavaScript হলো dynamically typed language। এক ভ্যারিয়েবল ভিন্ন ভিন্ন টাইপ ধারণ করতে পারে।