HTML (HyperText Markup Language)

1. What is HTML?
   HTML (HyperText Markup Language) is the standard language for creating webpages.

2. What are HTML tags?
   Tags define elements in an HTML document, e.g., <p>, <h1>, <a>.

3. What is the difference between HTML and HTML5?
   HTML5 is the latest version, with new features like <video>, <audio>, and semantic elements like <header> and <article>.

4. What is the purpose of the DOCTYPE declaration?
   It tells the browser which version of HTML is being used.

5. What is a semantic element in HTML?
   Semantic elements clearly describe their meaning, e.g., <article>, <footer>, <section>.

6. What is the difference between <div> and <span>?
   <div> is a block-level element, while <span> is an inline element.

7. What are void elements in HTML?
   Elements that don’t require a closing tag, e.g., <br>, <img>, <input>.

8. What is the difference between id and class attributes?
   id is unique, while class can be used multiple times.

9. What is the difference between relative and absolute URLs?
   A relative URL is based on the current document, while an absolute URL includes the full address.

10. What is the alt attribute in an <img> tag?
    It provides alternative text for accessibility and SEO.

CSS (Cascading Style Sheets)

11. What is CSS?
    CSS styles HTML elements to enhance visual presentation.

12. What are the different types of CSS?

    • Inline CSS (style="color: red;")
    • Internal CSS (<style> ... </style>)
    • External CSS (<link rel="stylesheet" href="styles.css">)

13. What is the difference between em, rem, and px in CSS?

    • px: Fixed size
    • em: Relative to the parent element
    • rem: Relative to the root element

14. What is Flexbox in CSS?
    A layout module that makes designing responsive layouts easier.

15. What is the difference between position: relative; and position: absolute;?

    • relative: Moves the element relative to its normal position.
    • absolute: Moves the element relative to its nearest positioned ancestor.

16. What are pseudo-classes in CSS?
    Special selectors that style elements in a specific state, e.g., :hover, :nth-child(n).

17. What is the difference between visibility: hidden; and display: none;?

    • visibility: hidden; hides the element but retains space.
    • display: none; removes the element from the layout.

18. What is Grid in CSS?
    A layout system that provides a two-dimensional grid-based layout.

19. What is the z-index property?
    It defines the stack order of elements.

20. What is the difference between max-width and min-width in CSS?

    • max-width: Sets the maximum width.
    • min-width: Sets the minimum width.

JavaScript

21. What is JavaScript?
    A scripting language used for web development.

22. What are JavaScript data types?

    • Primitive: string, number, boolean, null, undefined, symbol, bigint
    • Non-primitive: object, array, function

23. What is the difference between let, var, and const?

    • var: Function-scoped, can be redeclared.
    • let: Block-scoped, cannot be redeclared.
    • const: Block-scoped, cannot be reassigned.

24. What is an arrow function in JavaScript?
    A concise syntax for writing functions:
    

    const add = (a, b) => a + b;

25. What is event bubbling?
    When an event on a child element propagates to its parent.

26. What is the difference between == and ===?

    • == compares values (loose equality).
    • === compares values and types (strict equality).

27. What is the this keyword in JavaScript?
    Refers to the object it belongs to.

28. What is closure in JavaScript?
    A function that remembers the scope in which it was created.

29. What is the difference between synchronous and asynchronous JavaScript?

    • Synchronous: Executes line by line.
    • Asynchronous: Uses callbacks, promises, and async/await.

30. What is a promise in JavaScript?
    A way to handle asynchronous operations.

Frontend Frameworks

31. What is React?
    A JavaScript library for building user interfaces.

32. What is JSX?
    A syntax extension for writing HTML inside JavaScript.

33. What are React hooks?
    Functions that allow state and lifecycle features in functional components.

34. What is Angular?
    A TypeScript-based framework for building web applications.

35. What is Vue.js?
    A progressive JavaScript framework for building UI.

Backend Development

36. What is Node.js?
    A JavaScript runtime for backend development.

37. What is Express.js?
    A web framework for Node.js.

38. What is a REST API?
    An API that follows REST principles.

39. What is GraphQL?
    A query language for APIs.

40. What is JWT (JSON Web Token)?
    A secure way to transmit authentication data.

Database & Deployment

41. What is the difference between SQL and NoSQL?

    • SQL: Structured databases like MySQL, PostgreSQL.
    • NoSQL: Unstructured databases like MongoDB.

42. What is an ORM?
    Object-Relational Mapping, a way to interact with databases.

43. What is Docker?
    A tool for containerizing applications.

44. What is CI/CD?
    Continuous Integration and Continuous Deployment.

45. What is Web Hosting?
    Storing website files on a server.

Security & Performance

46. What is HTTPS?
    A secure version of HTTP.

47. What is XSS (Cross-Site Scripting)?
    An attack where hackers inject malicious scripts.

48. What is SQL Injection?
    A hacking technique to manipulate databases.

49. What is CORS?
    A security feature that restricts resource sharing across origins.

50. What is Lazy Loading?
    Deferring loading of non-essential resources.

JavaScript Advanced Concepts

51. What is a higher-order function in JavaScript?
    A function that takes another function as an argument or returns a function.

52. What is the difference between map(), filter(), and reduce() in JavaScript?

    • map(): Returns a new array after applying a function to each element.
    • filter(): Returns a new array with elements that satisfy a condition.
    • reduce(): Reduces an array to a single value.

53. What is the difference between local storage, session storage, and cookies?

    • Local Storage: Stores data permanently.
    • Session Storage: Data is removed when the browser is closed.
    • Cookies: Stores small data sent between the browser and server.

54. What is debouncing in JavaScript?
    A technique that delays function execution to optimize performance.

55. What is throttling in JavaScript?
    Limits function execution to a fixed time interval.

56. What is the difference between synchronous and asynchronous code?

    • Synchronous: Executes line by line.
    • Asynchronous: Uses callbacks, promises, or async/await to run non-blocking operations.

57. What is the difference between call(), apply(), and bind() in JavaScript?

    • call(): Calls a function with arguments separately.
    • apply(): Calls a function with arguments in an array.
    • bind(): Returns a new function with a fixed this value.

58. What is async/await in JavaScript?
    A syntax for writing asynchronous code in a synchronous style.

59. What is the event loop in JavaScript?
    A mechanism that handles asynchronous code execution.

60. What is a Web Worker in JavaScript?
    A way to run scripts in background threads.

React.js

61. What are React components?
    Reusable pieces of UI built using JavaScript.

62. What are functional and class components in React?

    • Functional components: Simple, stateless components using functions.
    • Class components: More complex, stateful components using ES6 classes.

63. What is the virtual DOM in React?
    A lightweight representation of the real DOM that updates efficiently.

64. What is state in React?
    Data that changes over time within a component.

65. What is the difference between props and state in React?

    • Props: Immutable data passed from a parent component.
    • State: Mutable data managed inside a component.

66. What is React Router?
    A library for handling navigation in React applications.

67. What is Redux?
    A state management library for React applications.

68. What is the useEffect hook in React?
    It allows side effects like data fetching in functional components.

69. What is the useState hook in React?
    A hook that allows state management in functional components.

70. What is React Context API?
    A way to manage global state without using Redux.

Backend Development (Node.js & Express.js)

71. What is middleware in Express.js?
    Functions that run before request handlers.

72. What is the difference between REST and SOAP APIs?

    • REST: Uses JSON, lightweight, stateless.
    • SOAP: Uses XML, more secure but heavier.

73. What is MongoDB?
    A NoSQL database used for storing JSON-like data.

74. What is Mongoose?
    An ODM (Object-Document Mapping) library for MongoDB in Node.js.

75. What is SQL indexing?
    A technique to speed up database queries.

76. What is an API endpoint?
    A specific URL where a client interacts with a server.

77. What is WebSocket?
    A protocol for real-time, bidirectional communication.

78. What is OAuth?
    An authentication protocol for secure API access.

79. What is bcrypt used for in web development?
    Hashing passwords securely.

80. What is the difference between GET and POST methods?

    • GET: Retrieves data from a server.
    • POST: Sends data to a server.

Performance Optimization

81. What is lazy loading in web development?
    Loading images and resources only when needed.

82. What is a Content Delivery Network (CDN)?
    A network of servers that deliver content faster based on user location.

83. What is minification in web development?
    Removing unnecessary characters from code to reduce file size.

84. What is caching in web development?
    Storing data temporarily to speed up future requests.

85. What is critical rendering path?
    The process of converting HTML, CSS, and JavaScript into pixels on the screen.

86. What is the difference between first paint and first meaningful paint?

    • First Paint: First pixel is rendered.
    • First Meaningful Paint: Main content is visible.

87. What are WebP images?
    A modern image format that reduces file size while maintaining quality.

88. What is Gzip compression?
    A method to reduce file size for faster web performance.

89. What is tree shaking in JavaScript?
    A technique to remove unused code from a project.

90. What is the Lighthouse tool?
    A Google tool for web performance auditing.

Security in Web Development

91. What is Cross-Site Request Forgery (CSRF)?
    An attack where a user is tricked into submitting unauthorized requests.

92. What is Content Security Policy (CSP)?
    A security measure to prevent malicious scripts from loading.

93. What is HTTPS and why is it important?
    A secure version of HTTP that encrypts data transmission.

94. What is a Same-Origin Policy (SOP)?
    A security feature that prevents scripts from different origins from accessing each other.

95. What is a security header in web development?
    HTTP headers that enhance website security (e.g., X-Frame-Options).

96. What is a DDoS attack?
    A cyberattack that floods a website with traffic to make it unavailable.

97. What is SQL injection?
    An attack where hackers insert malicious SQL queries.

98. What is role-based access control (RBAC)?
    A security mechanism that grants permissions based on user roles.

99. What is two-factor authentication (2FA)?
    An additional layer of security requiring a second verification step.

100. What is an SSL certificate?
     A digital certificate that encrypts data and secures website communication.