Web Designing Interview Questions and Answers

1. What is the DOM, and how does it work?

Answer:
The Document Object Model (DOM) is a tree-like representation of HTML elements in a web page. JavaScript manipulates the DOM to dynamically update content.

Example:

document.getElementById("demo").innerHTML = "Hello World!";

2. What is the difference between HTML5 Local Storage and Session Storage?

Answer:

• Local Storage: Stores data permanently until manually cleared.

• Session Storage: Stores data for a single session, cleared on browser close.

Example:

localStorage.setItem("key", "value"); sessionStorage.setItem("key", "value");

3. What are Web Components in HTML5?

Answer:
Web Components are reusable custom elements that encapsulate HTML, CSS, and JS.

Example:

<my-component></my-component>

4. What is the difference between GET and POST in HTTP?

Answer:

• GET: Retrieves data, appends parameters in the URL.

• POST: Sends data securely in the request body.

Example:

fetch("https://api.example.com/data", { method: "POST", body: JSON.stringify({name: "John"}) });

5. What is the difference between CSS Grid and CSS Flexbox?

Answer:

• Grid: Two-dimensional layout (rows & columns).

• Flexbox: One-dimensional layout (row OR column).

Example (Grid):

display: grid; grid-template-columns: repeat(3, 1fr);

6. What is a Content Delivery Network (CDN)?

Answer:
A CDN speeds up content delivery by serving assets from servers closest to the user.

7. What are pseudo-elements in CSS?

Answer:
Pseudo-elements style specific parts of an element.

Example:

p::first-letter { font-size: 2em; }

8. What is a Service Worker in web development?

Answer:
A Service Worker is a script that runs in the background to enable offline capabilities.

Example:

self.addEventListener('install', event => { event.waitUntil(caches.open('v1').then(cache => cache.addAll(['/index.html']))); });

9. What is lazy loading, and how does it improve performance?

Answer:
Lazy loading defers the loading of images until needed.

Example:

<img src="image.jpg" loading="lazy" alt="Example">

10. What are the differences between a relative, absolute, and fixed position in CSS?

Answer:

• Relative: Moves relative to its normal position.

• Absolute: Moves relative to its nearest positioned ancestor.

• Fixed: Stays in place even when scrolling.

11. What is the difference between async and defer in script loading?

Answer:

• Async: Loads script independently, executes as soon as available.

• Defer: Loads script in order, executes after the page is parsed.

Example:

<script src="script.js" defer></script>

12. How do you implement dark mode using CSS?

Answer:

@media (prefers-color-scheme: dark) { body { background: black; color: white; } }

13. What is the difference between SVG and Canvas in HTML5?

Answer:

• SVG: Scalable, object-based graphics (good for icons).

• Canvas: Pixel-based, best for real-time drawing.

14. What is Cross-Origin Resource Sharing (CORS)?

Answer:
CORS allows a website to request resources from another domain securely.

Example (Allow CORS in server response headers):

Access-Control-Allow-Origin: *

15. What is the difference between Progressive Web Apps (PWA) and Single Page Applications (SPA)?

Answer:

• PWA: Works offline, installs like an app.

• SPA: Loads one HTML file, updates dynamically via JavaScript.

16. What is a 404 and 301 HTTP status code?

Answer:

• 404 Not Found: Page does not exist.

• 301 Moved Permanently: Redirects to another URL.

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

Answer:

• var: Function-scoped.

• let: Block-scoped, can be reassigned.

• const: Block-scoped, cannot be reassigned.

Example:

const name = "John"; // Cannot be reassigned let age = 30; // Can be reassigned

18. How do you optimize a website for performance?

Answer:

• Minify CSS & JS.

• Use lazy loading.

• Enable caching.

• Optimize images.

19. What is an IIFE (Immediately Invoked Function Expression)?

Answer:
An IIFE runs immediately after definition to avoid global scope pollution.

Example:

(function() { console.log("Executed immediately"); })();

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

Answer:

• call(): Calls function with arguments separately.

• apply(): Calls function with arguments in an array.

• bind(): Returns a new function with bound context.

Example:

function greet(name) { console.log(this.message + ", " + name); } const obj = { message: "Hello" }; greet.call(obj, "John");

21. What is WebAssembly, and why is it useful?

Answer:
WebAssembly (WASM) runs high-performance compiled code in the browser (e.g., C++ in web apps).

22. What is a WebSocket, and how does it work?

Answer:
WebSockets provide real-time two-way communication between client and server.

Example:

const socket = new WebSocket("ws://example.com"); socket.onmessage = event => console.log(event.data);

23. What is the difference between REST and GraphQL?

Answer:

• REST: Predefined endpoints, multiple requests needed.

• GraphQL: Single query returns only requested data.

Example (GraphQL Query):

query { user(id: 1) { name, email } }

24. What is the Shadow DOM in web development?

Answer:
Shadow DOM encapsulates styles and markup inside a web component.

Example:

const shadow = document.createElement('div').attachShadow({ mode: 'open' });

25. What is Brotli compression, and why is it used?

Answer:
Brotli is a modern, high-compression algorithm that reduces web file sizes for faster load times.

Example (Server config):

Content-Encoding: br

This technical Q&A covers advanced web design principles, performance optimization, and JavaScript best practices. Let me know if you need even deeper topics! 🚀