⏱️4 min read · 711 words
ফ্রন্টেন্ড ডেভেলপার ইন্টারভিউ প্রশ্ন 2026 কভার HTML শব্দার্থবিদ্যা, CSS লেআউট, জাভাস্ক্রিপ্ট কর্মক্ষমতা, প্রতিক্রিয়া নিদর্শন, অ্যাক্সেসযোগ্যতা, এবং ওয়েব কর্মক্ষমতা অপ্টিমাইজেশান। এই নির্দেশিকাটি ফ্রন্টএন্ড এবং UI ডেভেলপার ভূমিকাগুলির জন্য সর্বাধিক জিজ্ঞাসিত প্রশ্নগুলি কভার করে৷
HTML/CSS প্রশ্ন
1. ইনলাইন, ব্লক এবং ইনলাইন-ব্লক উপাদানগুলির মধ্যে পার্থক্য কী?
<!-- Block elements: take full width, start on new line -->
<!-- Examples: div, p, h1-h6, ul, ol, li, section, article -->
<p>This paragraph takes full width</p>
<!-- Inline elements: only take needed width, don't break flow -->
<!-- Examples: span, a, strong, em, img, button -->
<p>Click <a href="#">this link</a> here</p>
<!-- Inline-block: inline positioning but block-like box model -->
<span style="display:inline-block; width:100px; height:40px">
Has dimensions like a block but flows inline
</span>2. CSS নির্দিষ্টতা এবং ক্যাসকেড ব্যাখ্যা করুন
/* Specificity (higher wins): */
/* [inline styles], [IDs], [classes/attrs/pseudo-classes], [elements/pseudo-elements] */
/* 0,0,0,1 — element selector */
p { color: black; }
/* 0,0,1,0 — class selector */
.paragraph { color: blue; }
/* 0,0,1,1 — class + element */
p.paragraph { color: green; }
/* 0,1,0,0 — ID selector */
#main { color: red; }
/* 1,0,0,0 — inline style */
/* <p style="color: purple"> */
/* !important overrides everything (avoid!) */
p { color: orange !important; }
/* Same specificity: LAST declaration wins (cascade) */
.btn { color: blue; }
.btn { color: red; } /* red wins — defined later */3. কিভাবে বক্স-সাইজিং লেআউটকে প্রভাবিত করে?
/* content-box (default): width = content only */
/* Total width = width + padding + border */
.element {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 2px solid;
/* Actual width: 244px (200 + 40 + 4) */
}
/* border-box: width INCLUDES padding and border */
.element {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid;
/* Actual width: 200px (as specified) */
}
/* Best practice: apply globally */
*, *::before, *::after {
box-sizing: border-box; /* almost every project should do this */
}জাভাস্ক্রিপ্ট কর্মক্ষমতা প্রশ্ন
4. লেআউট থ্র্যাশিং এর কারণ কি এবং কিভাবে আপনি এটি এড়াবেন?
// Layout thrashing: alternating reads and writes to the DOM
// Each read after a write forces browser to recalculate layout
// BAD: reads and writes interleaved
for (const element of elements) {
const height = element.offsetHeight; // READ — forces layout
element.style.height = height * 2 + 'px'; // WRITE
// Next iteration reads cause recalculation! 60x per 60fps frame = jank
}
// GOOD: batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // all reads
elements.forEach((el, i) => {
el.style.height = heights[i] * 2 + 'px'; // all writes
});
// Even better: avoid layout properties in animation
// Use transform instead of top/left/width/height
element.style.transform = 'translateX(100px)'; // compositor only, no layout
// requestAnimationFrame for animations
function animate() {
// All reads and writes here are batched by browser
requestAnimationFrame(animate);
}5. সমালোচনামূলক রেন্ডারিং পাথ অপ্টিমাইজেশান ব্যাখ্যা করুন
<!-- Block rendering: CSS in <head> (sync), render-blocking JS -->
<head>
<!-- CSS blocks rendering — must be in head, must be small/inlined for critical CSS -->
<link rel="stylesheet" href="critical.css" />
<!-- Non-critical CSS: load async -->
<link rel="preload" href="non-critical.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
</head>
<!-- Defer/async JS to not block HTML parsing -->
<script defer src="app.js"></script> <!-- executes after HTML parsed -->
<script async src="analytics.js"></script> <!-- executes ASAP, non-blocking -->
<!-- Preload important resources -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://api.example.com">
<!-- Priority hints for images -->
<img src="hero.jpg" fetchpriority="high" loading="eager" /> <!-- LCP image -->
<img src="below-fold.jpg" loading="lazy" /> <!-- others -->6. লোকাল স্টোরেজ, সেশন স্টোরেজ এবং কুকিজের মধ্যে পার্থক্য কী?
| বৈশিষ্ট্য | স্থানীয় স্টোরেজ | সেশন স্টোরেজ | কুকিজ |
|---|---|---|---|
| জেদ | ম্যানুয়ালি সাফ না হওয়া পর্যন্ত | ট্যাব বন্ধ না হওয়া পর্যন্ত | মেয়াদ শেষ/পরিষ্কার না হওয়া পর্যন্ত |
| স্টোরেজ আকার | 5-10 এমবি | 5 এমবি | 4 KB |
| সার্ভারে পাঠানো হয়েছে | No | No | হ্যাঁ, প্রতিটি অনুরোধের সাথে |
| অ্যাক্সেস | শুধুমাত্র ক্লায়েন্ট-সাইড JS | শুধুমাত্র ক্লায়েন্ট-সাইড JS | ক্লায়েন্ট + সার্ভার |
| জন্য ব্যবহার করুন | থিম, পছন্দ | টেম্প সেশন ডেটা | প্রমাণীকরণ টোকেন (শুধুমাত্র Http!) |
7. কোর ওয়েব ভাইটাল কি এবং আপনি কিভাবে তাদের অপ্টিমাইজ করবেন?
- LCP (সবচেয়ে বড় বিষয়বস্তুর পেইন্ট)<2.5s: হিরো ইমেজ অপ্টিমাইজ করুন (প্রিলোড, ওয়েবপি, সঠিক মাপ)
- INP (পরবর্তী পেইন্টের সাথে মিথস্ক্রিয়া)<200ms: প্রধান থ্রেডে JS ছোট করুন, শিডিউলার API ব্যবহার করুন
- CLS (ক্রমবর্ধমান লেআউট শিফট)<0.1: ছবিতে স্পষ্ট প্রস্থ/উচ্চতা সেট করুন, ভাঁজের উপরে ডায়নামিক কন্টেন্ট ইনজেকশন এড়িয়ে চলুন
<!-- LCP optimization: preload hero image -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="Hero">
<!-- CLS fix: always set image dimensions -->
<img src="photo.jpg" width="400" height="300" alt="Photo">
<!-- Or use aspect-ratio CSS -->
.image-container {
aspect-ratio: 4 / 3;
}8. কোড বিভাজন কি এবং কেন এটি গুরুত্বপূর্ণ?
// Without code splitting: one huge bundle = slow initial load
// With dynamic imports (Webpack/Vite auto-split):
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<Loading />}>
<HeavyComponent /> // only loaded when rendered!
</Suspense>
);
}
// Route-based splitting in Next.js (automatic)
// Each page is automatically split into its own chunk
// Only the current page's code loadsফ্রন্টেন্ড ইন্টারভিউ পরীক্ষার প্রস্থ (HTML, CSS, JS, কর্মক্ষমতা, অ্যাক্সেসযোগ্যতা) এবং প্রতিক্রিয়া গভীরতা। CSS নির্দিষ্টতা এবং লেআউট বৈশিষ্ট্যগুলি ঠান্ডা জানুন, ইভেন্ট লুপটি পরিষ্কারভাবে ব্যাখ্যা করুন, কার্যক্ষমতা অপ্টিমাইজেশান জ্ঞান প্রদর্শন করুন (CRP, কোর ওয়েব ভাইটাল, কোড বিভাজন), এবং অ্যাক্সেসযোগ্যতা সচেতনতা দেখান। বাস্তব প্রকল্পগুলি তৈরি করুন যা এই দক্ষতাগুলি প্রদর্শন করে — শুধুমাত্র তাত্ত্বিক জ্ঞান আপনাকে কাজ পাবে না।
🔗 Share this article
✍️ Leave a Comment