Frontend

Question 1

What is the DOM in the context of web development?

Answer 1

The DOM (Document Object Model) is a tree-like representation of a webpage’s structure, allowing JavaScript to manipulate HTML elements dynamically.

Question 2

What is the difference between inline, block, and inline-block in CSS?

Answer 2

inline elements (e.g., <span>) flow within text; block elements (e.g., <div>) take full width; inline-block allows inline flow with block properties like width/height.

Question 3

How does CSS specificity work?

Answer 3

Specificity determines which CSS rule applies, based on a score: inline styles (1000), IDs (100), classes/attributes (10), elements (1). Higher score wins.

Question 4

What is a CSS Flexbox, and how is it used?

Answer 4

Flexbox is a layout model for aligning items in a container. Example: display: flex; justify-content: space-between; aligns children horizontally with spacing.

Question 5

Explain CSS Grid and its advantages.

Answer 5

CSS Grid creates two-dimensional layouts. Example: display: grid; grid-template-columns: 1fr 1fr; makes two equal columns. Advantages: precise control, responsive design.

Question 6

How do you center a div horizontally and vertically using CSS?

Answer 6

```css
div {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Explanation: Flexbox centers content in both axes (O(1) layout). */
~~~

Question 7

What is the difference between relative, absolute, and fixed positioning in CSS?

Answer 7

relative moves an element relative to its normal position; absolute relative to nearest positioned ancestor; fixed relative to viewport, stays on scroll.

Question 8

What is event bubbling in JavaScript?

Answer 8

Event bubbling is when an event on a child element propagates to its ancestors. Example: A click on a <button> inside a <div> triggers the <div>’s click handler.

Question 9

How do you prevent default browser behavior in JavaScript?

Answer 9

```javascript
element.addEventListener(‘click’, (e) => {
e.preventDefault();
// Custom logic
});
// Explanation: e.preventDefault() stops default actions, like form submission.
~~~

Question 10

What is the purpose of addEventListener in JavaScript?

Answer 10

addEventListener attaches an event handler to an element without overwriting existing ones. Example: button.addEventListener('click', () => alert('Clicked'));.

Question 11

What is a closure in JavaScript, and how is it used in frontend?

Answer 11

A closure is a function retaining access to its outer scope’s variables. Example: function counter() { let count = 0; return () => count++; } used for state encapsulation.

Question 12

How does this behave in a DOM event handler?

Answer 12

In a DOM event handler, this refers to the element triggering the event. Example: <button onclick='console.log(this)'> logs the button element.

Question 13

What is a React component, and how do you create one?

Answer 13

A React component is a reusable UI piece returning JSX. Example: function MyComponent() { return <div>Hello</div>; } or class MyComponent extends React.Component { render() { return <div>Hello</div>; } }.

Question 14

What is the purpose of useState in React?

Answer 14

useState manages state in functional components, returning a state value and updater. Example: const [count, setCount] = useState(0);.

Question 15

How does the useEffect hook work in React?

Answer 15

useEffect handles side effects after render, like API calls. Example: useEffect(() => { fetchData(); }, [id]); runs when id changes.

Question 16

What is a controlled component in React?

Answer 16

A controlled component ties form input values to state. Example: <input value={state} onChange={(e) => setState(e.target.value)} />.

Question 17

How do you optimize React performance with React.memo?

Answer 17

React.memo memoizes a component to prevent re-renders unless props change. Example: const Memoized = React.memo(MyComponent);.

Question 18

What is the virtual DOM in React?

Answer 18

The virtual DOM is an in-memory representation of the real DOM. React diffs it to minimize actual DOM updates, improving performance.

Question 19

How do you handle forms in React with multiple inputs?

Answer 19

```javascript
function Form() {
const [form, setForm] = useState({ name: ‘’, email: ‘’ });
const handleChange = (e) => setForm({ …form, [e.target.name]: e.target.value });
return (
<form>
<input name=’name’ value={form.name} onChange={handleChange} />
<input name=’email’ value={form.email} onChange={handleChange} />
</form>
);
}
// Explanation: Uses a single state object for multiple inputs (O(1) updates).
~~~

Question 20

What is the purpose of useContext in React?

Answer 20

useContext accesses context to share data without prop drilling. Example: const value = useContext(MyContext); retrieves context value.

Question 21

How do you implement lazy loading in React?

Answer 21

```javascript
const LazyComponent = React.lazy(() => import(‘./Component’));
function App() {
return (
<Suspense fallback={<div>Loading…</div>}>
<LazyComponent></LazyComponent>
</Suspense>
);
}
// Explanation: React.lazy and Suspense defer component loading (O(1) setup).
~~~

Question 22

What is a CSS preprocessor, and name an example?

Answer 22

A CSS preprocessor adds features like variables and nesting. Example: Sass ($color: red; .box { background: $color; }) compiles to CSS.

Question 23

How do you handle responsive design in CSS?

Answer 23

Use relative units (%, vw, rem), media queries, and frameworks. Example: @media (max-width: 600px) { .box { font-size: 14px; } } adjusts for small screens.

Question 24

What is the purpose of the z-index property in CSS?

Answer 24

z-index controls the stacking order of positioned elements. Higher values appear in front. Example: z-index: 10; places an element above z-index: 5;.

Question 25

How do you debounce a function in JavaScript for performance?

Answer 25

```javascript function debounce(func, wait) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func(...args), wait); }; } // Example: debounce(() => search(), 300) limits rapid calls (O(1)). ```

Question 26

What is the difference between `localStorage` and `sessionStorage`?

Answer 26

`localStorage` persists until cleared; `sessionStorage` lasts until the tab closes. Both store key-value pairs. Example: `localStorage.setItem('key', 'value');`.

Question 27

How do you improve frontend performance with code splitting?

Answer 27

Code splitting loads only necessary JavaScript. In React: Use `React.lazy` or Webpack’s dynamic imports to split bundles, reducing initial load time.

Question 28

What is a service worker, and how is it used?

Answer 28

A service worker is a script for caching and offline functionality. Example: Register with `navigator.serviceWorker.register('/sw.js');` to cache assets.

Question 29

How do you handle cross-browser compatibility?

Answer 29

Use feature detection, polyfills, and tools like Autoprefixer. Example: Add vendor prefixes (`-webkit-`) for CSS properties like `transform`.

Question 30

What is the purpose of ARIA attributes in HTML?

Answer 30

ARIA (Accessible Rich Internet Applications) attributes enhance accessibility. Example: `role='button' aria-label='Close'` describes a custom button for screen readers.