HTML Developer Screening - Questions
1. How can you ensure proper tab order and focus management in HTML?
Ans. Element become focusable in natural order. And keep the logical structure of html element
2. How do you make a webpage accessible using semantic HTML alone?
Ans. We can do it twice sematic a webpage can be made accessible using semantic html alone
by using proper structural elements. Meaningfull headings labeled form controls etc .
3. What are data-* attributes in HTML and how can they be used effectively?
Ans. Data attributes are custom html attributes that start with data and are used to store extra
information inside elements . they help pass data between HTML,CSS and javascript and are
commonly used for UI
4. Explain the difference between <section>, <article>, and <div> and when to use each.
Ans. Section is used groups related contend and article is independent , div is genric
container
CSS3 & Responsive Design
5. How do you make a layout responsive without using media queries?
Ans. A webpage can be made responsive without medi qureis by using flexible layout like
flexbox , css grid .
6. What is the purpose of z-index and how does stacking context work?
Ans.
7. Explain how CSS specificity works and how it affects styling conflicts.
[Link] specificity determines which style is applied when multiple rules target the same
element by prioritizing seeletors in the order. Inline order , id , classes and element.
8. Describe the difference between flexbox and grid layouts and when to use each.
[Link] is one dimensional , row or column ,components alignment , simple layout , difficult
GRID is two dimensional, row and column together , fullpage layouts , complex layots , based
on grid structure
JavaScript Fundamentals
9. Explain event bubbling and event delegation.
Ans. Event delegation means attaching one event listener to a parent element
Event bubbling is event moves upword in DOM . browser behavior purpose it usage happens
automatically
10. How can you manipulate DOM elements without using libraries like jQuery?
Ans.
[Link] Objective Questions
Question: What will be logged in the console?
import React, { useEffect, useState } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
[Link]("Effect ran");
}, [count]);
return (
<button onClick={() => setCount(count)}>
Click me
</button>
);
}
export default App;
Options:
A. Logs on every render
B. Logs only once
C. Never logs after initial render
D. Logs only when count changes
Question: What is the purpose of [Link]?
Options: A
A. Prevents component from mounting
B. Memoizes component to avoid unnecessary re-renders
C. Caches API calls
D. Replaces useEffect
Question: Which statement is correct?
Options:A
A. useMemo memoizes functions, useCallback memoizes values
B. Both areA identical
C. useCallback memoizes functions, useMemo memoizes computed values
D. Neither improves performance
Question: What is the issue with using array index as a key?
Options:B
A. Causes syntax error
B. Slows down API calls
C. Can cause incorrect UI updates when list order changes
D. Prevents rendering
Question: What will be the final value of count?
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
};
Options:A
A. 1
B. 2
C. 3
D. 0