HTML is the standard markup language used for creating web pages, while HTML5 is the latest version that introduces new elements like <video>, <audio>, and <canvas>. HTML5 offers improved support for multimedia, better semantic structuring through tags like <article>, <section>, and native support for offline storage (Web Storage API).

It also provides better performance and cross-platform compatibility, eliminating the need for third-party plugins like Flash. Moreover, HTML5 APIs like Geolocation, Drag-and-Drop, and Web Workers greatly enhance web application capabilities.

Classes and IDs are selectors in CSS but differ in usage and specificity. A class (using .) can be applied to multiple elements, allowing you to group styles easily. An ID (using #) should be unique to one element, making it more specific and powerful in the cascade hierarchy.

IDs have higher specificity than classes, so if there’s a conflict, styles defined using an ID will override those using a class. For flexible styling, classes are generally preferred, while IDs are used for unique elements like a header or a main container.

Responsive web design ensures that a website looks and functions well on all devices, from desktops to smartphones. It uses flexible grids, flexible images, and media queries to adapt the layout based on screen size and orientation.

Instead of building separate sites for mobile and desktop, a responsive site adjusts automatically, improving usability and reducing development and maintenance efforts. Frameworks like Bootstrap and CSS Flexbox/Grid help greatly in building responsive designs.

Media queries are a key component of responsive design. They allow you to apply different CSS rules based on the device’s characteristics, such as screen width, height, orientation, or resolution.

A media query typically includes conditions like @media (max-width: 768px) to target specific devices like tablets. Media queries make it easier to create fluid, adaptable layouts without needing different codebases for each device, greatly enhancing user experience across platforms.

Hoisting in JavaScript refers to the behavior where variable and function declarations are moved to the top of their scope during the compile phase. Only the declarations are hoisted, not the initializations. For instance, a var variable declared after it's used will be undefined rather than throwing an error.

Functions declared using the function keyword are fully hoisted, allowing them to be called before their actual definition in code. However, variables declared with let and const are hoisted but stay uninitialized in a temporal dead zone.

Promises in JavaScript represent the eventual completion or failure of an asynchronous operation. A promise has three states: pending, fulfilled, or rejected. They are used to handle asynchronous operations like network requests cleanly, avoiding the "callback hell" problem.

A promise is created using new Promise() and handled with .then() for success and .catch() for errors. Promises make code more readable and manageable, especially when chaining multiple asynchronous actions.

The Document Object Model (DOM) is a programming interface that represents the structure of a webpage as a tree of objects. Each HTML element is represented as a node, allowing programming languages like JavaScript to dynamically access, modify, or delete elements and content.

The DOM makes it possible to change the structure, style, and content of documents after they are loaded, enabling interactivity and dynamic behavior in web applications.

Website performance can be optimized by minimizing HTTP requests, using efficient images, enabling caching, minimizing JavaScript and CSS, and implementing lazy loading for images and videos. Tools like Lighthouse, Webpack, and minimizing critical rendering path resources help significantly.

Server-side optimizations like using a CDN (Content Delivery Network) and compression techniques (like Gzip) also enhance performance. Moreover, writing clean and minimal code ensures faster loading times, leading to better user experience and SEO ranking.

Cookies are small data stored on the client side that can be sent to the server with every request, usually used for authentication. localStorage stores data with no expiration time, making it persistent even after the browser closes.

sessionStorage stores data for only the duration of the page session, meaning it is cleared when the page or browser is closed. Unlike cookies, localStorage and sessionStorage are not sent to the server with every request, making them more suitable for storing large amounts of client-only data.

AJAX (Asynchronous JavaScript and XML) is a technique for creating faster, more dynamic web applications.

It allows data to be sent and retrieved from a server asynchronously without refreshing the whole page. Traditionally, XML was used, but now JSON is more common due to its lightweight nature. AJAX enhances user experience by enabling partial page updates and seamless background data loading, leading to more interactive and responsive websites.

A Single Page Application is a web application that interacts with the user by dynamically rewriting the current page instead of loading entire new pages from the server. This results in faster navigation and better performance. SPAs use AJAX and APIs to load content dynamically.

Frameworks like React, Angular, and Vue.js are widely used to develop SPAs. SPAs improve user experience but can pose challenges like SEO optimization and initial load time.

Block elements take up the full width available, starting on a new line (like <div> and <p>). Inline elements take up only as much width as necessary and do not start on a new line (like <span> and <a>).

Inline-block elements are like inline elements but allow setting width and height, behaving like a mix of block and inline. Understanding these differences is crucial when designing webpage layouts and controlling element positioning.

CORS is a security feature implemented by browsers to restrict web pages from making requests to a different domain than the one that served the web page. It prevents malicious websites from accessing sensitive data.

When a cross-origin request is made, the server must include appropriate CORS headers to allow the request. If not, the browser will block it. Configuring CORS properly ensures secure communication between client-side applications and APIs.

WebSockets provide a full-duplex communication channel over a single, long-lived connection between a client and a server. Unlike HTTP, which is request-response based, WebSockets allow both parties to send data independently without polling.

This is particularly useful for real-time applications like chat apps, live feeds, and online gaming. WebSocket connections are initiated with an HTTP handshake and then upgraded to a persistent TCP connection, enabling low-latency, efficient communication.

The defer attribute downloads the JavaScript file during HTML parsing but defers its execution until after the document has been fully parsed.

The async attribute downloads the file during parsing and executes it as soon as it’s available, without waiting for the HTML to finish parsing. defer ensures scripts are executed in order, while async does not guarantee execution order. Choosing between them helps optimize page load performance.

A Progressive Web App (PWA) uses modern web capabilities to deliver an app-like experience to users. PWAs are reliable, fast, and engaging. They can work offline, send push notifications, and be installed on the user's device without requiring an app store.

Technologies like Service Workers, Web App Manifests, and responsive design are used to build PWAs. They offer businesses a cost-effective way to reach users across platforms without building separate native apps.

Data attributes are custom attributes added to HTML elements using the data- prefix (like data-id="123"). They store extra information about the element without affecting the visual output.

JavaScript can easily access these attributes using element.dataset. Data attributes are especially useful when you need to store metadata associated with an element without polluting the HTML structure.

REST APIs are based on the concept of resources, each identified by a unique URL and accessed through standard HTTP methods. GraphQL, on the other hand, allows clients to request exactly the data they need in a single request, often reducing over-fetching and under-fetching of data.

GraphQL uses a single endpoint and supports complex querying and nested data fetching. REST is simpler and widely adopted, but GraphQL offers more flexibility for modern applications.

Server-Side Rendering (SSR) means that the HTML is generated on the server for every request and sent to the client. Client-Side Rendering (CSR) renders content in the browser using JavaScript. SSR improves SEO and initial load time but can increase server load.

CSR is good for rich interactivity but may have slower initial load times. Frameworks like Next.js support SSR, while React, Vue, and Angular primarily use CSR.

The viewport meta tag controls the layout on mobile browsers. It helps ensure that web pages are scaled correctly to the device's screen size. Without it, mobile browsers default to a desktop layout and scale it down, making pages hard to read.

A common viewport tag is <meta name="viewport" content="width=device-width, initial-scale=1.0">, which ensures the page adapts to the screen width and displays content correctly on all devices.

A Content Delivery Network (CDN) is a network of distributed servers that deliver web content to users based on their geographic location. The main goal of a CDN is to improve website load times and reliability by serving content from a server nearest to the user.

By reducing the distance between the server and the user, CDNs significantly decrease latency and load times. They also help handle traffic spikes and provide protection against certain cyber-attacks like DDoS attacks. Popular CDN providers include Cloudflare, Akamai, and AWS CloudFront. Using a CDN improves user experience, boosts SEO rankings, and can lower the load on the origin server, ensuring faster and more secure content delivery.

In JavaScript, var is function-scoped and can be redeclared and updated. It was traditionally used before ES6 but has certain drawbacks like hoisting-related bugs. let is block-scoped and can be updated but not redeclared in the same scope, making it more predictable and safer for managing variables. const is also block-scoped but cannot be updated or redeclared; it is used for variables that should not change their value.

However, if the const variable holds an object or array, the object's contents can still be modified. Generally, let and const are preferred over var for better code clarity and fewer bugs.

Lazy loading is a technique where resources like images, videos, or scripts are only loaded when they are actually needed, usually when they are about to enter the viewport. Instead of loading all resources upfront, lazy loading defers the loading of non-critical resources, significantly improving the initial page load time and reducing bandwidth usage.

This leads to faster performance and a better user experience, especially on mobile devices with slower networks. Lazy loading can be implemented using JavaScript libraries or natively with the loading="lazy" attribute in HTML for images and iframes.

Service workers are scripts that run in the background, separate from the web page, and provide features like offline support, background sync, and push notifications. They act as a proxy between the browser and the network, allowing developers to intercept network requests and cache assets strategically. Service workers are essential for building Progressive Web Apps (PWAs) because they enable offline access and faster load times by serving cached resources.

They have a lifecycle separate from the web page, and to work securely, they require HTTPS. With proper configuration, service workers dramatically improve reliability and performance.

In CSS, relative positioning moves an element relative to its normal position without removing it from the document flow. absolute positioning removes the element from the flow and positions it relative to the nearest positioned ancestor (or the document if none exists). fixed positioning anchors an element relative to the browser window, meaning it stays in place even when the page scrolls.

sticky positioning is a hybrid; the element toggles between relative and fixed based on the scroll position — it behaves like relative until a threshold is crossed, then it becomes fixed. Understanding these positioning types helps in building dynamic, responsive layouts and handling overlapping elements properly in web design.