30 Basic Front End Developer Interview Questions :
What is the difference between HTML and XHTML?
HTML is more forgiving of errors, while XHTML is stricter and requires well-formed documents.
Explain the purpose of the ‘alt’ attribute in HTML.
The ‘alt’ attribute in HTML is used to provide alternative text for an image, which is displayed if the image cannot be loaded.
Describe the box model in CSS.
The box model in CSS comprises content, padding, border, and margin. It defines how these elements interact with each other.
What is the CSS specificity and how is it calculated?
Specificity is a set of rules that determines which style is applied when multiple conflicting styles exist. It is calculated based on the number and type of selectors used.
Explain the concept of responsive design.
Responsive design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
What is the purpose of media queries in CSS?
Media queries allow the application of different styles for different devices or conditions, such as screen width, height, or resolution.
How does Flexbox differ from Grid layout in CSS?
Flexbox is a one-dimensional layout method for laying out items in rows or columns, while Grid layout is a two-dimensional layout system for arranging items in rows and columns.
What is the role of ‘localStorage’ and ‘sessionStorage’ in web development?
‘localStorage’ and ‘sessionStorage’ are web storage options in browsers. ‘localStorage’ stores data with no expiration date, while ‘sessionStorage’ stores data for the duration of the page session.
Explain the purpose of AJAX.
AJAX (Asynchronous JavaScript and XML) is used to make asynchronous requests to a server, allowing data to be retrieved and updated without a page refresh.
What is the purpose of the ‘viewport’ meta tag in HTML?
The ‘viewport’ meta tag is used to control the viewport’s size and scale for responsive web design.
How does CORS (Cross-Origin Resource Sharing) work?
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.
What is the significance of the ‘async’ and ‘defer’ attributes in script tags?
‘async’ and ‘defer’ are attributes used to control the execution of external scripts. ‘async’ allows the script to be executed asynchronously, while ‘defer’ ensures the script is executed in order after the document is parsed.
Explain the concept of ‘this’ keyword in JavaScript.
‘this’ in JavaScript refers to the object it belongs to. In a function, ‘this’ refers to the global object; in a method, ‘this’ refers to the owner object; and in an event, ‘this’ refers to the element that triggered the event.
What are arrow functions in JavaScript?
Arrow functions are a more concise way to write function expressions in JavaScript. They have a shorter syntax and lexically bind the ‘this’ value.
How does event delegation work in JavaScript?
Event delegation is a technique where a single event listener is attached to a common ancestor, and it can manage events for multiple descendants. This helps in optimizing performance and managing dynamic content.
What is the purpose of the ‘document.ready’ function in jQuery?
The ‘document.ready’ function in jQuery is used to ensure that the DOM is fully loaded before executing JavaScript code.
Explain the concept of promises in JavaScript.
Promises are objects representing the eventual completion or failure of an asynchronous operation. They help in handling asynchronous operations in a more organized and readable way.
Differentiate between ‘==” and ‘===’ operators in JavaScript.
‘==’ is the equality operator that performs type coercion, while ‘===’ is the strict equality operator that checks both value and type without type coercion.
What is the role of ‘preventDefault()’ in JavaScript event handling?
‘preventDefault()’ is used to stop the default behavior of an event, such as preventing a form submission or a link from navigating to a new page.
How does content delivery network (CDN) improve website performance?
CDNs distribute website content across multiple servers worldwide, reducing latency and speeding up content delivery by serving resources from a server geographically closer to the user.
What are web components in HTML?
Web components are a set of technologies that enable the creation of reusable custom elements with their styles and scripts, encapsulating functionality in a self-contained unit.
Explain the concept of virtual DOM in React.
The virtual DOM is a lightweight copy of the actual DOM in React. It helps in optimizing updates by comparing changes in the virtual DOM and selectively updating only the necessary parts of the actual DOM.
What is the purpose of Redux in a React application?
Redux is a state management library for JavaScript applications, especially useful in React applications for managing the state in a predictable and centralized manner.
How does GraphQL differ from RESTful APIs?
GraphQL allows clients to request only the data they need, reducing over-fetching and under-fetching of data compared to traditional RESTful APIs.
Explain the concept of shadow DOM in web components.
Shadow DOM is a part of web components that encapsulates the DOM and CSS of a component, preventing styles and functionality from leaking into or being affected by the surrounding document.
What is the purpose of the ‘async’ keyword in JavaScript functions?
The ‘async’ keyword is used to create asynchronous functions in JavaScript, allowing the use of the ‘await’ keyword within the function to pause execution until a Promise is settled.
What is the role of a service worker in web development?
Service workers are scripts that run in the background, enabling features like push notifications, background sync, and caching to enhance the performance and offline capabilities of web applications.
Explain the Same-Origin Policy in the context of web security.
The Same-Origin Policy is a security measure implemented by web browsers to restrict web pages from making requests to a different domain than the one that served the web page, preventing potential security vulnerabilities.
How does lazy loading improve website performance?
Lazy loading defers the loading of non-critical resources until they are needed, reducing initial page load times and improving overall website performance.
What is Progressive Web App (PWA) and how does it benefit web development?
A Progressive Web App is a type of application software delivered through the web, built using common web technologies. PWAs provide an app-like experience with features such as offline access, push notifications, and improved performance, contributing to a better user experience.
