1. What is the difference between HTML and HTML5?
Answer:
HTML5 is the latest version of HTML with new features such as native support for audio and video, canvas for drawing graphics, and semantic elements (e.g., <article>, <section>). It also offers improved support for mobile and multimedia.
2. What is the box model in CSS?
Answer:
The box model describes how elements are displayed on a webpage. It consists of four parts:
- Content: The actual content of the element.
- Padding: Space between the content and the border.
- Border: The edge around the padding.
- Margin: Space outside the border, separating the element from others.
3. What is the difference between inline, block, and inline-block elements?
Answer:
- Inline: Does not start on a new line and only takes as much width as needed (e.g.,
<span>,<a>). - Block: Takes up the full width of the parent container and starts on a new line (e.g.,
<div>,<p>). - Inline-block: Behaves like an inline element but allows you to set width and height.
4. What are CSS preprocessors?
Answer:
CSS preprocessors like Sass, Less, and Stylus allow developers to use variables, nesting, mixins, and functions in CSS, making the styling code more maintainable and scalable. Preprocessed code is compiled into regular CSS for the browser.
5. Explain Flexbox and its use case.
Answer:
Flexbox is a CSS layout module that makes it easier to design flexible and responsive layouts. It aligns and distributes space among items within a container, even when their sizes are dynamic or unknown. It’s especially useful for handling vertical and horizontal alignment, space distribution, and resizing elements.
6. What is CSS Grid, and how does it differ from Flexbox?
Answer:
CSS Grid is a two-dimensional layout system that allows you to create complex layouts with rows and columns. Flexbox is one-dimensional, so it can either arrange items in a row or a column, but not both simultaneously. Grid is better for complex layouts; Flexbox is better for simple, linear arrangements.
7. What is the purpose of media queries in CSS?
Answer:
Media queries are used in responsive web design to apply different styles depending on the device’s characteristics, such as screen size, resolution, or orientation. For example:
@media (max-width: 768px) { /* Styles for devices with width <= 768px */ }
8. What are the differences between == and === in JavaScript?
Answer:
==performs type coercion before comparison, meaning it converts the operands to the same type before comparing.===is a strict equality operator that compares both value and type without type coercion.
9. What is event delegation in JavaScript?
Answer:
Event delegation is a technique in which you attach a single event listener to a parent element to manage events triggered by its child elements. This improves performance, especially when dealing with dynamically added elements.
10. Explain the difference between var, let, and const in JavaScript.
Answer:
var: Function-scoped, can be re-declared, and is hoisted to the top of its scope.let: Block-scoped, cannot be re-declared within the same scope, and is not hoisted.const: Block-scoped, used for constants (its value cannot be reassigned), and is not hoisted.
11. What is the Document Object Model (DOM)?
Answer:
The DOM is a programming interface for web documents. It represents the page so that programs can manipulate the structure, style, and content. The DOM represents HTML as a tree structure, where each node is an object.
12. What is the difference between synchronous and asynchronous JavaScript?
Answer:
- Synchronous: Operations are executed in sequence, and each operation waits for the previous one to complete before continuing.
- Asynchronous: Operations can be executed independently, allowing other tasks to run in the background without waiting for a previous one to finish. Promises, async/await, and callbacks are used for handling asynchronous code.
13. What are closures in JavaScript?
Answer:
A closure is a function that has access to the parent scope, even after the parent function has closed. This is because functions in JavaScript form a lexical environment where they remember the scope in which they were created.
14. Explain how this works in JavaScript.
Answer:
In JavaScript, this refers to the context in which a function is called. In global context, this refers to the global object (window in browsers), but within an object method, this refers to the object itself. In arrow functions, this is lexically scoped to the surrounding non-arrow function.
15. What is AJAX?
Answer:
AJAX (Asynchronous JavaScript and XML) is a technique for creating asynchronous web applications. It allows web pages to be updated asynchronously by exchanging small amounts of data with the server in the background, without reloading the page.
16. What is the difference between localStorage, sessionStorage, and cookies?
Answer:
- localStorage: Stores data with no expiration date. Data persists even after the browser is closed.
- sessionStorage: Stores data for the duration of the page session. Data is cleared when the page session ends (i.e., when the browser is closed).
- Cookies: Can store data that persists based on an expiration date. Cookies are sent with every HTTP request to the server, while
localStorageandsessionStorageare not.
17. What is React, and what are its main features?
Answer:
React is a JavaScript library for building user interfaces. Its main features include:
- Components: Reusable UI building blocks.
- JSX: A syntax extension that allows HTML-like code within JavaScript.
- Virtual DOM: A lightweight representation of the real DOM that React uses to improve performance by minimizing DOM manipulations.
- One-way data binding: Ensures that data flows in a single direction, making the app more predictable.
18. What are props and state in React?
Answer:
- Props: Short for "properties," they are used to pass data from a parent component to a child component. Props are immutable.
- State: A component’s internal data storage that can change over time. State is mutable and managed within the component.
19. What is the purpose of Webpack?
Answer:
Webpack is a module bundler that bundles JavaScript files (and other assets like CSS, images) for the browser. It allows you to bundle your assets efficiently and also handles features like code splitting, lazy loading, and Hot Module Replacement (HMR).
20. What is Cross-Origin Resource Sharing (CORS)?
Answer:
CORS is a security feature that allows or restricts web applications running on one origin (domain) to request resources from another origin. It’s handled by browsers and prevents unauthorized access to resources from different domains unless explicitly allowed by the server.
