■ Interview Prep Guide

HTML · CSS · React · [Link]

This guide covers the most commonly asked interview questions for frontend and backend roles.
Each answer is concise but thorough — designed to show depth without over-committing. Read
every answer out loud. Know what you know deeply.

32 32 4
Total Questions Detailed Answers Technology Topics

HTML5 CSS3 React [Link]

■ HTML — HyperText Markup Language

Q1. What is the difference between section, article, aside, and div?

section groups thematically related content with a heading. article is a self-contained piece that
could stand alone (blog post, news story). aside holds content tangentially related to the main content
(sidebars, pull quotes). div is a generic, non-semantic container used purely for layout/styling.

Rule of thumb: If removing the element breaks the meaning of the page, use a semantic tag; if it's just
a style wrapper, use div.

■ Tip: Interviewers love semantic HTML - mention accessibility and SEO benefits.

■ Tip: Interviewers love semantic HTML - mention accessibility and SEO benefits.

Q2. What is the difference between block, inline, and inline-block elements?

Block elements (div, p, h1–h6) start on a new line and take the full available width. You can set
width/height/margin/padding freely.

Inline elements (span, a, strong) flow within text; width/height have no effect and vertical
margin/padding behaves unexpectedly.

Inline-block elements flow like inline but respect width/height and all box-model properties.

Q3. Explain the difference between script (normal), script defer, and script async.

Normal script: HTML parsing stops, script downloads + executes, then parsing resumes. Blocks
rendering.

defer: Script downloads in parallel with HTML parsing but executes only after the DOM is fully
parsed. Order is preserved. Use for scripts that need the DOM.

async: Script downloads in parallel and executes as soon as it's ready, potentially interrupting
parsing. Order is NOT guaranteed. Use for independent scripts (analytics).

■ Tip: Best practice: put scripts at the bottom of the body or use defer.

■ Tip: Best practice: put scripts at the bottom of the body or use defer.

Page 2
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

Q4. What is the purpose of the alt attribute on images?

The alt attribute provides alternative text for an image. It serves two main purposes: (1) Accessibility
- screen readers read it aloud for visually impaired users; (2) Fallback - displayed when the image
fails to load. For decorative images, use alt='' (empty) so screen readers skip them. For informative
images, describe what the image conveys, not what it looks like.

Q5. What is the difference between localStorage, sessionStorage, and cookies?

localStorage: Persists until explicitly cleared, ~5 MB, not sent to server, accessible via JavaScript
only.

sessionStorage: Cleared when the tab is closed, ~5 MB, not sent to server.

Cookies: Can have an expiry date, ~4 KB, sent to server with every HTTP request, can be
Secure/HttpOnly. HttpOnly cookies cannot be accessed by JS — useful for session tokens.

■ Tip: Mention security: never store sensitive data in localStorage.

■ Tip: Mention security: never store sensitive data in localStorage.

Q6. What are data-* attributes and when would you use them?

Data attributes (data-id, data-value, etc.) let you store custom data on HTML elements without using
non-standard attributes or extra DOM properties. They're accessible via [Link] in
JavaScript and can be used as CSS attribute selectors. Common use: storing IDs for JS event
delegation, toggling UI states, or passing server-rendered values to the frontend.

Q7. What is the difference between GET and POST methods in HTML forms?

GET: Data is appended to the URL as query parameters. Visible in the browser history,
bookmarkable, idempotent. Use for searches/filtering.

POST: Data is sent in the request body. Not visible in the URL, not cached by default. Use for
creating/updating data, uploading files, or sending sensitive info.

Q8. What are HTML entities and when do you use them?

HTML entities represent characters that have special meaning in HTML or can't be typed easily. For
example &lt; renders as <, &amp; renders as &, &nbsp; is a non-breaking space. Modern HTML5 with
UTF-8 charset lets you use most Unicode characters directly, but entities are still essential for < and >
inside HTML to avoid parsing errors.

Page 3
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

■ CSS — Cascading Style Sheets

Q1. Explain the CSS Box Model.

Every element is a rectangular box consisting of: Content (actual text/image), Padding (space
between content and border), Border (surrounds padding), and Margin (space outside the border).
By default, width/height refers only to the content. With box-sizing: border-box, width/height include
padding and border — this is almost universally preferred today and is reset with * { box-sizing:
border-box }.

■ Tip: Always mention box-sizing: border-box. Most pros use it globally.

■ Tip: Always mention box-sizing: border-box. Most pros use it globally.

Q2. What is the difference between position: relative, absolute, fixed, and sticky?

relative: Element stays in normal flow; top/left offsets it from its own original position.

absolute: Removed from normal flow; positioned relative to the nearest positioned ancestor
(non-static). If none, it's relative to the viewport.

fixed: Removed from flow; stays fixed relative to the viewport — even when scrolling.

sticky: Hybrid — behaves like relative until it reaches a scroll threshold, then behaves like fixed
within its parent container.

Q3. What is specificity and how is it calculated?

Specificity determines which CSS rule wins when multiple rules target the same element. It's a 4-part
value: (Inline, ID, Class/Attr/Pseudo-class, Element/Pseudo-element).

Examples: inline style = (1,0,0,0); #header = (0,1,0,0); .nav a:hover = (0,0,2,1); div = (0,0,0,1). The
higher the specificity, the more priority. !important overrides specificity entirely but should be avoided
as it breaks the cascade.

■ Tip: The interviewer may ask you to compare two selectors — practice mentally calculating specificity.

■ Tip: The interviewer may ask you to compare two selectors — practice mentally calculating specificity.

Page 4
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

Q4. Explain Flexbox and when you'd use it.

Flexbox is a 1-dimensional layout system (either row or column). Key properties: display: flex on the
container, flex-direction (row/column), justify-content (main-axis alignment), align-items
(cross-axis alignment), flex-wrap (wrapping), and gap. On children: flex-grow, flex-shrink,
flex-basis, align-self.

Use Flexbox for: navbars, card rows, centering content, distributing space within a row/column.

Q5. Explain CSS Grid and when you'd use it.

CSS Grid is a 2-dimensional layout system. You define rows and columns: grid-template-columns:
repeat(3, 1fr). Items are placed using grid-column and grid-row, or auto-placement. grid-area lets you
name regions and build complex layouts declaratively.

Use Grid for: full-page layouts, dashboard grids, any layout needing control in both axes
simultaneously. Flexbox and Grid complement each other — Flex for 1D, Grid for 2D.

Q6. What are CSS custom properties (variables) and why are they useful?

CSS variables are defined with --variable-name: value on a selector (usually :root) and used with
var(--variable-name). Unlike preprocessor variables (Sass), they're live in the browser — you can
update them with JavaScript, making dynamic theming straightforward. They cascade and inherit like
any CSS property. Useful for design tokens: colors, spacing, font sizes.

Q7. What is the difference between em, rem, px, vh, vw, and %?

px: Absolute unit, doesn't scale with user preferences.

em: Relative to the current element's font-size. Compounds in nested elements.

rem: Relative to the root (html) font-size. Predictable, preferred for spacing/typography.

%: Relative to the parent element's corresponding dimension.

vh / vw: 1% of viewport height/width. Great for full-screen sections.

■ Tip: Prefer rem for font sizes, px for borders/shadows, % or vw/vh for layout dimensions.

■ Tip: Prefer rem for font sizes, px for borders/shadows, % or vw/vh for layout dimensions.

Page 5
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

Q8. What are pseudo-classes vs pseudo-elements?

Pseudo-classes select elements based on state or position: :hover, :focus, :nth-child(), :not(),
:checked. They use a single colon.

Pseudo-elements style a specific part of an element: ::before, ::after (insert content), ::placeholder,
::selection, ::first-line. They use double colons (CSS3+). ::before and ::after require the content
property and are often used for decorative effects without extra HTML.

Page 6
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

■■ React — UI Library

Q1. What is the Virtual DOM and how does React use it?

The Virtual DOM is a lightweight in-memory representation of the real DOM. When state or props
change, React creates a new virtual DOM tree and diffs it against the previous one (reconciliation).
Only the minimal set of actual DOM changes are applied (patching). This avoids costly direct DOM
manipulations. React's reconciler uses the Fiber architecture (since React 16) to make this process
incremental and interruptible.

■ Tip: Mention the diffing algorithm: O(n) heuristics — elements of the same type, keys for lists.

■ Tip: Mention the diffing algorithm: O(n) heuristics — elements of the same type, keys for lists.

Q2. Explain useState and useEffect hooks.

useState(initialValue) returns [state, setState]. Calling setState schedules a re-render with the new
value. For functional updates use setState(prev => prev + 1).

useEffect(fn, deps) runs a side effect after render. The deps array controls when it re-runs: [] = run
once on mount; [value] = run when value changes; no array = run every render. Return a cleanup
function to cancel subscriptions or timers on unmount or before the next effect.

■ Tip: Common mistake: missing dependencies in the deps array — ESLint's exhaustive-deps rule catches this.

■ Tip: Common mistake: missing dependencies in the deps array — ESLint's exhaustive-deps rule catches this.

Q3. What is the difference between controlled and uncontrolled components?

Controlled: React state is the single source of truth. Input value is bound to state and every change
goes through an onChange handler. Gives you full control for validation, formatting, etc.

Uncontrolled: The DOM manages its own state; you use a ref (useRef) to read values when needed
(e.g., on form submit). Simpler for basic forms, but harder to validate in real-time.

Page 7
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

Q4. What is [Link], useMemo, and useCallback?

[Link]: HOC that memoizes the rendered output of a functional component. It re-renders only
if props change (shallow comparison). Useful for pure display components.

useMemo(fn, deps): Memoizes the return value of an expensive computation. Recalculates only
when deps change.

useCallback(fn, deps): Memoizes a function reference. Prevents child components from

■ Tip: Don't overuse these — they add overhead. Profile first, then optimize.

■ Tip: Don't overuse these — they add overhead. Profile first, then optimize.

Q5. Explain the Context API and when to use it vs Redux.

Context API provides a way to pass data through the component tree without prop drilling. Create a
context, wrap with Provider, consume with useContext. Best for low-frequency, global values: theme,
locale, authenticated user.

Redux is better for complex state with many actions, time-travel debugging, or when multiple
disconnected components need to read/write the same state frequently. Redux Toolkit has reduced
Redux boilerplate significantly. For most mid-sized apps, Context + useReducer is sufficient.

Q6. What are keys in React and why are they important?

Keys help React identify which items in a list have changed, been added, or removed during
reconciliation. Without keys, React re-renders the entire list on any change. Keys should be stable,
unique among siblings, and ideally a persistent ID from data — not array index (index causes issues
when items are reordered or inserted).

■ Tip: A classic interview trap: 'Can you use array index as key?' — yes, only when the list is static and never
reordered.

■ Tip: A classic interview trap: 'Can you use array index as key?' — yes, only when the list is static and never
reordered.

Q7. What is the useRef hook and what are its common uses?

useRef returns a mutable object { current: value } that persists across renders without causing
re-renders when changed. Common uses: (1) DOM access — [Link] points to a DOM node
(focus, scroll, measurements); (2) Storing mutable values — like interval IDs or previous state
values that shouldn't trigger renders; (3) Avoiding stale closures — keeping a fresh reference to a
value inside async callbacks.

Page 8
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

Q8. What is code splitting and lazy loading in React?

Code splitting divides your bundle into smaller chunks loaded on demand rather than upfront,
reducing initial load time. React supports this via [Link]() and Suspense.

Usage: const Dashboard = [Link](() => import('./Dashboard')). Wrap in a Suspense component

Page 9
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

■ [Link] — Server-Side JS

Q1. Explain the [Link] Event Loop.

[Link] is single-threaded and uses a non-blocking I/O model powered by the event loop (via libuv).
The event loop phases are: timers (setTimeout/setInterval callbacks), I/O callbacks, idle/prepare,
poll (fetch new I/O, block if empty), check (setImmediate), close callbacks.

[Link]() runs before the next event loop iteration (between phases). Promises (.then) run in
the microtask queue — after the current operation, before moving to the next event loop phase.

■ Tip: Draw the phases if asked on a whiteboard. Understanding microtasks vs macrotasks is key.

■ Tip: Draw the phases if asked on a whiteboard. Understanding microtasks vs macrotasks is key.

Q2. What is middleware in [Link]?

Middleware are functions with the signature (req, res, next). They execute in order for every matching
request and can: modify req/res, end the request-response cycle, or call next() to pass control.
Middleware can be: application-level ([Link]), router-level, error-handling (4 params: err, req, res,
next), or third-party (morgan, cors, helmet).

Order matters — define middleware before route handlers.

Q3. What is the difference between require and ES Modules (import/export)?

require (CommonJS): Synchronous, loads at runtime, dynamic (can be called inside conditionals), .js
files by default in Node.

import/export (ESM): Static, resolved at parse time, allows tree-shaking by bundlers, asynchronous
in browsers. In Node, use .mjs extension or set 'type': 'module' in [Link].

Modern [Link] (v12+) supports both, but they can't be freely mixed. Many newer packages are
ESM-only.

Page 10
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

Q4. How do you handle errors in async [Link] code?

Three patterns: (1) Callbacks: error-first convention — callback(err, data). Always check if err is
truthy before using data.

(2) Promises: Use .catch() or try/catch with async/await.

(3) async/await with try/catch: Clearest syntax. Wrap await calls in try/catch. In Express, use a
wrapper utility to automatically pass errors to next(err) for centralized error handling.

Always have a global uncaughtException and unhandledRejection handler for unexpected errors.

Q5. What is the difference between [Link], setImmediate, and setTimeout(fn,

[Link]: Executes before the event loop continues to the next phase — highest priority.
Can starve I/O if overused.

setImmediate: Executes in the check phase, after the poll phase. Preferred for deferring within I/O
callbacks.

setTimeout(fn, 0): Executes in the timers phase with a minimum delay of 1ms (not truly 0). Less
predictable than setImmediate in I/O contexts.

■ Tip: This is a popular [Link] interview question — know the exact order.

■ Tip: This is a popular [Link] interview question — know the exact order.

Q6. What are Streams in [Link] and when would you use them?

Streams are objects that let you read/write data piece by piece (chunks) rather than loading
everything into memory. Types: Readable ([Link]), Writable ([Link]),
Duplex (both), Transform (modify data in transit, e.g., zlib). Use streams for large file processing,
HTTP request/response bodies, or any data too large to buffer. The pipe() method chains streams
elegantly.

Page 11
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

Q7. What is JWT and how does authentication work with it?

JWT (JSON Web Token) has three base64url-encoded parts: Header (algorithm), Payload (claims:
user id, role, expiry), Signature (HMAC of header + payload with a secret). The server issues a JWT
on login. The client stores it (httpOnly cookie recommended over localStorage) and sends it in the
Authorization: Bearer [token] header on subsequent requests. The server verifies the signature - no
DB lookup needed (stateless).

Downside: tokens can't be revoked before expiry without a blocklist. Use short expiry + refresh tokens
for production.

■ Tip: Mention token storage security: httpOnly cookies prevent XSS; also discuss CSRF protection.

■ Tip: Mention token storage security: httpOnly cookies prevent XSS; also discuss CSRF protection.

Q8. Explain clustering and worker threads in [Link].

Since Node is single-threaded, it can only use one CPU core by default. Cluster module: Forks
multiple worker processes (one per CPU core), each with its own event loop. The master process
distributes incoming connections. Best for scaling I/O-bound HTTP servers.

Worker Threads: Run JavaScript in parallel threads sharing memory (SharedArrayBuffer). Best for
CPU-intensive tasks (image processing, crypto, parsing) without blocking the main thread. Unlike
cluster, they don't create separate processes — lighter weight.

Page 12
Frontend & Backend Interview Prep 2025 HTML • CSS • React • [Link]

■ Final Interview Tips

■ Know your basics deeply, not broadly

Your mentor said it best. If you don't know something, say 'I haven't worked with that directly, but
here's how I'd approach it.' Honesty beats bluffing every time.

■ Think out loud

Interviewers want to see your reasoning process. Narrate your thought process even when you're
unsure. 'I'm thinking X because...' is better than silence.

■ Relate answers to real experience

After explaining a concept, follow with 'In a project I built, I used this when...' — it shows you don't just
memorize, you apply.

■ Prepare questions for them

Ask about the tech stack, code review culture, deployment process. It shows genuine interest and
preparation.

■ Review your own projects

Be ready to explain every line of code in your portfolio. If you used a library, know why you chose it
over alternatives.

Good luck tomorrow! You've got this. ■

Page 13