1. Explain semantic HTML and why it matters.<\/p>\n
\n
Semantic HTML uses meaningful elements that describe content structure: <header><\/code>, <nav><\/code>, <main><\/code>, <article><\/code>, <section><\/code>.<\/p>\nBenefits:<\/strong> Better accessibility, SEO, maintainability, and meaningful document structure for assistive technologies.<\/p>\n<\/div>\n<\/div>\n\n
2. What’s the difference between flexbox and CSS Grid?<\/p>\n
\n
Flexbox:<\/strong> One-dimensional layout (row or column). Great for component layouts, alignment, and distributing space.<\/p>\nGrid:<\/strong> Two-dimensional layout (rows and columns). Perfect for page layouts and complex positioning.<\/p>\nOften used together: Grid for page structure, flexbox for component internals.<\/p>\n<\/div>\n<\/div>\n
\n
3. How do you make a website responsive?<\/p>\n
\n
\nUse mobile-first approach with min-width media queries<\/li>\n Flexible units: %, vw\/vh, em\/rem instead of fixed px<\/li>\n Flexible images: max-width: 100%<\/li>\n CSS Grid and flexbox for adaptive layouts<\/li>\n Container queries for component-based responsiveness<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n
4. Explain the CSS box model.<\/p>\n
\n
From inside out: content \u2192 padding \u2192 border \u2192 margin<\/strong><\/p>\nbox-sizing: border-box<\/code> includes padding and border in width\/height calculations, making layouts more predictable.<\/p>\n<\/div>\n<\/div>\n\n
5. What are CSS custom properties (variables)?<\/p>\n
\n
:root {\n --primary-color: #007bff;\n --font-size: 1.2rem;\n}\n\n.button {\n color: var(--primary-color);\n font-size: var(--font-size);\n}<\/code><\/pre>\nBenefits: Dynamic theming, easier maintenance, JavaScript interaction, cascade inheritance.<\/p>\n<\/div>\n<\/div>\n
\n
6. How do you center a div?<\/p>\n
\n
\/* Flexbox (modern) *\/\n.parent { display: flex; justify-content: center; align-items: center; }\n\n\/* Grid *\/\n.parent { display: grid; place-items: center; }\n\n\/* Absolute positioning *\/\n.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }<\/code><\/pre>\n<\/div>\n<\/div>\n\n
7. What’s the difference between display: none and visibility: hidden?<\/p>\n
\n
display: none:<\/strong> Element removed from document flow, no space taken<\/p>\nvisibility: hidden:<\/strong> Element invisible but space preserved, still in document flow<\/p>\n<\/div>\n<\/div>\n\n
8. Explain CSS specificity.<\/p>\n
\n
Order of precedence: inline styles (1000) \u2192 IDs (100) \u2192 classes\/attributes\/pseudo-classes (10) \u2192 elements (1)<\/p>\n
Example: #nav .menu li<\/code> = 111 beats .menu li<\/code> = 11<\/p>\n<\/div>\n<\/div>\n\n
9. What are pseudo-classes and pseudo-elements?<\/p>\n
\n
Pseudo-classes<\/strong> (single colon): Style based on state – :hover<\/code>, :focus<\/code>, :nth-child()<\/code><\/p>\nPseudo-elements<\/strong> (double colon): Style parts of elements – ::before<\/code>, ::after<\/code>, ::first-line<\/code><\/p>\n<\/div>\n<\/div>\n\n
10. How do you optimize CSS for performance?<\/p>\n
\n
\nMinimize and compress CSS files<\/li>\n Remove unused CSS (PurgeCSS, tree-shaking)<\/li>\n Use efficient selectors (avoid deep nesting)<\/li>\n Critical CSS inline, non-critical loaded separately<\/li>\n Use CSS containment for layout optimization<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/circle><\/path><\/path><\/svg>JavaScript Core Concepts (Questions 11-22)<\/h2>\n\n
\n
\n
\n
11. Explain closures in JavaScript.<\/p>\n
\n
function outer(x) {\n return function inner(y) {\n return x + y; \/\/ inner has access to x\n };\n}\nconst add5 = outer(5);\nadd5(3); \/\/ 8<\/code><\/pre>\nInner function retains access to outer function’s variables even after outer function returns.<\/p>\n<\/div>\n<\/div>\n
\n
12. What’s the difference between var, let, and const?<\/p>\n
\n
\nvar:<\/strong> Function-scoped, hoisted, can be redeclared<\/li>\nlet:<\/strong> Block-scoped, temporal dead zone, can be reassigned<\/li>\nconst:<\/strong> Block-scoped, must be initialized, cannot be reassigned<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n
13. Explain event delegation.<\/p>\n
\n
document.getElementById('parent').addEventListener('click', (e) => {\n if (e.target.classList.contains('child')) {\n \/\/ Handle child click\n }\n});<\/code><\/pre>\nAttach one listener to parent instead of many to children. Works with dynamically added elements.<\/p>\n<\/div>\n<\/div>\n
\n
14. What’s the difference between == and === in JavaScript?<\/p>\n
\n
== (loose equality):<\/strong> Performs type coercion – '5' == 5<\/code> is true<\/p>\n=== (strict equality):<\/strong> No type coercion – '5' === 5<\/code> is false<\/p>\nAlways prefer === to avoid unexpected behavior.<\/p>\n<\/div>\n<\/div>\n
\n
15. Explain promises and async\/await.<\/p>\n
\n
\/\/ Promise\nfetch('\/api\/data')\n .then(response => response.json())\n .then(data => console.log(data));\n\n\/\/ Async\/await\nasync function fetchData() {\n const response = await fetch('\/api\/data');\n const data = await response.json();\n return data;\n}<\/code><\/pre>\nAsync\/await is syntactic sugar over promises for cleaner asynchronous code.<\/p>\n<\/div>\n<\/div>\n
\n
16. What’s the difference between call, apply, and bind?<\/p>\n
\n
function greet(greeting) {\n return greeting + ', ' + this.name;\n}\n\nconst person = { name: 'John' };\n\ngreet.call(person, 'Hello'); \/\/ \"Hello, John\"\ngreet.apply(person, ['Hello']); \/\/ \"Hello, John\"\nconst boundGreet = greet.bind(person);\nboundGreet('Hello'); \/\/ \"Hello, John\"<\/code><\/pre>\n<\/div>\n<\/div>\n\n
17. Explain hoisting in JavaScript.<\/p>\n
\n
Variable and function declarations are moved to the top of their scope during compilation.<\/p>\n
console.log(x); \/\/ undefined (not error)\nvar x = 5;\n\n\/\/ Becomes:\nvar x;\nconsole.log(x); \/\/ undefined\nx = 5;<\/code><\/pre>\n<\/div>\n<\/div>\n\n
18. What’s the event loop in JavaScript?<\/p>\n
\n
JavaScript’s concurrency model. Call stack executes code, Web APIs handle async operations, callback queue holds completed tasks, event loop moves tasks from queue to stack when stack is empty.<\/p>\n<\/div>\n<\/div>\n
\n
19. Explain prototypal inheritance.<\/p>\n
\n
const animal = {\n sound: function() { return 'Some sound'; }\n};\n\nconst dog = Object.create(animal);\ndog.bark = function() { return 'Woof!'; };\ndog.sound(); \/\/ 'Some sound' (inherited)<\/code><\/pre>\nObjects can inherit directly from other objects through the prototype chain.<\/p>\n<\/div>\n<\/div>\n
\n
20. What are arrow functions and their differences?<\/p>\n
\n
\nLexical this<\/code> binding (inherit from enclosing scope)<\/li>\nCannot be used as constructors<\/li>\n No arguments<\/code> object<\/li>\nCannot be hoisted<\/li>\n Implicit return for single expressions<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n
21. What’s destructuring in JavaScript?<\/p>\n
\n
\/\/ Array destructuring\nconst [first, second] = [1, 2, 3];\n\n\/\/ Object destructuring\nconst { name, age } = { name: 'John', age: 30, city: 'NYC' };\n\n\/\/ With default values\nconst { color = 'blue' } = {};<\/code><\/pre>\n<\/div>\n<\/div>\n\n
22. Explain modules in JavaScript (ES6).<\/p>\n
\n
\/\/ math.js\nexport const add = (a, b) => a + b;\nexport default class Calculator { }\n\n\/\/ main.js\nimport Calculator, { add } from '.\/math.js';<\/code><\/pre>\nModules provide encapsulation and explicit dependencies. Support named exports, default exports, and dynamic imports.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/rect><\/path><\/svg>React & Frontend Frameworks (Questions 23-32)<\/h2>\n\n
\n
\n
\n
23. Explain React’s component lifecycle methods.<\/p>\n
\n
Mounting:<\/strong> constructor \u2192 componentDidMount<\/p>\nUpdating:<\/strong> componentDidUpdate<\/p>\nUnmounting:<\/strong> componentWillUnmount<\/p>\nWith hooks: useEffect handles all lifecycle events with dependency arrays.<\/p>\n<\/div>\n<\/div>\n
\n
24. What are React hooks? Why were they introduced?<\/p>\n
\n
Functions that let you use state and lifecycle features in function components.<\/p>\n
Benefits:<\/strong> Simpler code, better reusability, avoid wrapper hell, easier testing, performance optimizations.<\/p>\n<\/div>\n<\/div>\n\n
25. Explain useState and useEffect hooks.<\/p>\n
\n
function Component() {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n document.title = `Count: ${'$'}{'{'}count};`;\n\n return () => {\n \/\/ cleanup\n };\n }, [count]); \/\/ dependency array\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n
26. What’s the virtual DOM and why is it useful?<\/p>\n
\n
JavaScript representation of the real DOM. React compares virtual DOM snapshots (diffing) and updates only changed elements (reconciliation).<\/p>\n
Benefits:<\/strong> Faster updates, batched changes, predictable performance, cross-browser consistency.<\/p>\n<\/div>\n<\/div>\n\n
27. How do you manage state in React applications?<\/p>\n
\n
\nLocal state:<\/strong> useState for component-specific data<\/li>\nContext:<\/strong> useContext for app-wide state<\/li>\nReducers:<\/strong> useReducer for complex state logic<\/li>\nExternal libraries:<\/strong> Redux, Zustand, Jotai for large apps<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n
28. Explain React’s key prop and why it’s important.<\/p>\n
\n
{'{'}items.map(item => (\n <Item key={'{'}{'{'}item.id{'}'} data={'{'}{'{'}item{'}'} \/>\n))}<\/code><\/pre>\nKeys help React identify which items changed, added, or removed. Improves reconciliation performance and prevents state bugs.<\/p>\n<\/div>\n<\/div>\n
\n
29. What are controlled vs uncontrolled components?<\/p>\n
\n
Controlled:<\/strong> Form data handled by React component state<\/p>\nconst [value, setValue] = useState('');\n<input value={'{'}{'{'}value{'}'} onChange={'{'}{'{'}e => setValue(e.target.value){'}'} \/><\/code><\/pre>\nUncontrolled:<\/strong> Form data handled by DOM using refs<\/p>\nControlled components provide better data flow and validation control.<\/p>\n<\/div>\n<\/div>\n
\n
30. How do you optimize React performance?<\/p>\n
\n
\nReact.memo for component memoization<\/li>\n useMemo for expensive calculations<\/li>\n useCallback for function references<\/li>\n Code splitting with lazy loading<\/li>\n Avoid inline objects\/functions in props<\/li>\n Virtualization for large lists<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n
31. What’s the difference between client-side and server-side rendering?<\/p>\n
\n
CSR:<\/strong> JavaScript renders content in browser. Fast navigation, but slower initial load, SEO challenges.<\/p>\nSSR:<\/strong> Server generates HTML. Better SEO, faster initial paint, but slower navigation.<\/p>\nSSG:<\/strong> Pre-rendered at build time for best performance with static content.<\/p>\n<\/div>\n<\/div>\n\n
32. Explain prop drilling and how to solve it.<\/p>\n
\n
Passing props through multiple component levels to reach a deeply nested component.<\/p>\n
Solutions:<\/strong> React Context, state management libraries, component composition, or render props pattern.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/rect><\/line><\/line><\/svg>Performance & Browser APIs (Questions 33-40)<\/h2>\n\n
\n
\n
\n
33. How do you optimize website loading performance?<\/p>\n
\n
\nMinimize HTTP requests (bundle, sprite sheets)<\/li>\n Optimize images (WebP, responsive images, lazy loading)<\/li>\n Code splitting and lazy loading<\/li>\n Use CDN for static assets<\/li>\n Minify and compress files<\/li>\n Implement caching strategies<\/li>\n Prefetch critical resources<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n
34. Explain the Critical Rendering Path.<\/p>\n
\n
\nParse HTML \u2192 DOM tree<\/li>\n Parse CSS \u2192 CSSOM tree<\/li>\n Combine DOM + CSSOM \u2192 Render tree<\/li>\n Layout (reflow) \u2192 calculate positions<\/li>\n Paint \u2192 fill in pixels<\/li>\n Composite \u2192 layer combination<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n
35. What are Web Vitals and why do they matter?<\/p>\n
\n
\nLCP (Largest Contentful Paint):<\/strong> Loading performance (<2.5s)<\/li>\nFID (First Input Delay):<\/strong> Interactivity (<100ms)<\/li>\nCLS (Cumulative Layout Shift):<\/strong> Visual stability (<0.1)<\/li>\n<\/ul>\nGoogle uses these for search rankings and user experience assessment.<\/p>\n<\/div>\n<\/div>\n
\n
36. How do you implement accessibility in web applications?<\/p>\n
\n
\nSemantic HTML with proper heading hierarchy<\/li>\n Alt text for images, aria-labels for interactive elements<\/li>\n Keyboard navigation support (tab order, focus management)<\/li>\n Sufficient color contrast ratios<\/li>\n Screen reader compatibility (NVDA, JAWS testing)<\/li>\n ARIA attributes for complex components<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n
37. What’s the difference between localStorage, sessionStorage, and cookies?<\/p>\n
\n
localStorage:<\/strong> Persistent, 5-10MB, client-side only<\/p>\n