Top 50 Web Development Interview Questions with Answers
1. What is semantic HTML?
Semantic HTML uses meaningful tags (<article>, <section>, etc.) to enhance accessibility and
SEO.
2. What's the difference between <div> and <span>?
<div> is a block-level element; <span> is inline.
3. What are data attributes in HTML?
Custom attributes (data-*) for embedding custom data in elements.
4. Difference between id and class in HTML?
id is unique, used once. class can be reused on multiple elements.
5. How do you make a webpage mobile responsive in HTML?
Use <meta name="viewport" content="width=device-width, initial-scale=1.0">.
6. What is the difference between relative, absolute, fixed, and sticky positioning?
relative: to normal position, absolute: to nearest ancestor, fixed: to viewport, sticky: toggles
between relative/fixed.
7. What is specificity in CSS?
Rules determining which CSS rule is applied; inline > id > class > tag.
8. What are pseudo-classes in CSS?
Keywords like :hover, :focus, etc., used to define element states.
9. Difference between em, rem, px?
em: relative to parent, rem: relative to root, px: absolute unit.
10. What is Flexbox?
CSS layout model for arranging elements in rows/columns with flexible sizing.
11. What's the difference between Grid and Flexbox?
Flexbox: 1D layout, Grid: 2D layout.
12. Difference between var, let, and const?
var: function-scoped, let/const: block-scoped; const can't be reassigned.
13. What is a closure?
Function retaining access to its lexical scope even outside.
14. Explain event bubbling and capturing.
Bubbling: child to parent, Capturing: parent to child.
15. What is 'this' in JavaScript?
Refers to the context from which a function is called.
16. Difference between == and ===?
==: loose equality, ===: strict equality.
17. What is a Promise?
Object representing async operation: .then(), .catch().
18. What are arrow functions?
Shorthand for functions with lexical this binding.
19. Difference between synchronous and asynchronous?
Synchronous: line-by-line; Asynchronous: tasks run independently.
20. How to debounce a function in JS?
Delay execution using setTimeout.
21. What is React?
JavaScript library for building UI components.
22. What are props in React?
Read-only data passed from parent to child components.
23. What is state in React?
Internal data of a component, used to render UI changes.
24. Difference between functional and class components?
Functional: use hooks. Class: use lifecycle methods.
25. What is useEffect hook?
Hook to perform side effects like fetching data.
26. What are controlled vs uncontrolled components?
Controlled: by React state; Uncontrolled: by DOM.
27. What is JSX?
JavaScript syntax extension to write HTML inside JS.
28. What is virtual DOM?
Lightweight copy of real DOM for efficient updates.
29. What is lifting state up in React?
Moving state to ancestor to share data.
30. What is React Router?
Library to manage routing in single-page apps.
31. Difference between REST and GraphQL?
REST: multiple endpoints; GraphQL: single endpoint.
32. What is a middleware in Express.js?
Functions executed during request-response cycle.
33. What is CORS?
Cross-Origin Resource Sharing for accessing resources from other domains.
34. What is JWT?
JSON Web Token for secure authentication.
35. Explain MVC architecture.
Model-View-Controller: separates logic, UI, data.
36. What is the role of Node.js?
Allows JavaScript to run server-side.
37. Difference between SQL and NoSQL?
SQL: structured; NoSQL: unstructured, flexible.
38. How to connect frontend to backend?
Use fetch or axios to hit API endpoints.
39. What is an API?
Set of functions for software interaction.
40. Explain the event loop in Node.js.
Handles async callbacks via libuv.
41. What is progressive web app (PWA)?
Web apps with offline support and installability.
42. Difference between SSR and CSR?
SSR: server renders; CSR: browser renders post-load.
43. What is Webpack?
Module bundler for JS, CSS, etc.
44. What is Babel?
Transpiler to convert ES6+ to older JS.
45. What is lazy loading?
Load parts of page only when needed.
46. What is hydration in React?
Attaching event listeners to static HTML.
47. How to improve website performance?
Minify code, lazy load, use CDN.
48. What is Cross-Site Scripting (XSS)?
Injecting malicious scripts into webpages.
49. What are cookies, localStorage, and sessionStorage?
Cookies: server-accessible, localStorage: persistent, sessionStorage: session-based.
50. What is responsive design?
Layout adapts to different screens via media queries.