Web Developer Interview Questions and Answers Web Development

The Document Object Model (DOM) is a cross-platform programming interface, used to represent HTML and XML documents in nodes and objects. It defines the logical structure of documents and how they are accessed. It enables developers to create, modify, and delete the document structure, style, and content. The DOM represents the webpage in a hierarchical structure in order for programmers and users to navigate it more easily. These documents are treated as a tree structure in which every node is an object representing a specific part of the document. Each branch ends with a node, and every node contains objects. When a document is displayed in the browser, the HTML and CSS is converted into the DOM and combined with the document’s content.

AJAX stands for Asynchronous JavaScript and XML. It enables applications to transfer data to and from a server asynchronously without refreshing the web page. It allows updating some parts of the web page automatically, without reloading the entire page to fetch new resources on the same page. The existing display or behavior of the web page is not hampered while the data is updated. The purpose of AJAX is to create better, faster, and more interactive web applications using technologies such as XML, HTML/XHTML, CSS, DOM, JavaScript, XMLHttpRequest (XHR), etc.

Responsive Web Design means creating web pages that can easily be scaled across devices of different resolutions. The structure of the web page will be automatically adjusted across various platforms and devices to ensure an optimal viewing experience for all users. This is done without losing any information or screen tearing. Following the principle of flexibility, a responsive web page adapts to the size of the screen. Responsive websites use CSS media queries and flexible grids to change styles based on different factors related to the device, such as display type, width, and height.

This is a frequently asked question in web developer interview questions for freshers.

The essential HTTP request types in REST are as follows:

1. GET - The GET method is used to retrieve data or resources from the server and allows read-only access to the data.
2. POST - The POST method is used for creating a new resource. It is often used while uploading a file or submitting a completed web form.
3. PUT - PUT is similar to POST, but it is used to update an existing resource by replacing its contents entirely.  
4. PATCH - PATCH is also used to update an existing resource but unlike PUT, it modifies the existing resource.  
5. DELETE - The DELETE request is used to delete the resource from the server.

There are multiple ways to reduce the loading time of a web page. These are:

1. Cleaning the code - Your pages will load faster if you optimize how your files load. Since the browser needs to load the HTML, CSS, and JavaScript files, it is a good approach to clean up your code and reduce the file size by eliminating unnecessary spaces, characters, comments, and other components. More importantly, removing all redundant pieces of code helps reduce the size of files. As a result, web pages will load faster due to cleaner code.
2. Minimizing redirects - Too many redirects will cause the load time to increase. HTTP request and response times are increased every time a page redirects. Thus, it is a good idea to minimize the number of redirects happening.  
3. Use images of small size - Images are used on web pages to improve the appearance of the website. However, these images add on to the loading time of the website. Images with smaller file sizes have less weight, thus, helping in reducing the load time. Thus, compressing and optimizing images is another way to improve the loading process.
4. Minify and combine CSS and JavaScript - JavaScript and CSS embedded in HTML documents are downloaded each time the HTML document is loaded, which does not utilize browser caching. Placing JavaScript and CSS in external files makes site maintenance easier, utilizing browser caching and reducing the size of HTML documents.
5. Asynchronous loading of CSS and JavaScript files - If CSS and JavaScript files are loaded synchronously, each file is loaded one at a time, in the order of appearance in the HTML document. This requires a higher loading time. On the other hand, asynchronous loading can load multiple files simultaneously, which can speed up the website's performance.  
6. Include JavaScript at the bottom - JavaScript code, either from an external file or within the HTML file, should be placed at the bottom of the HTML body because the script is generally heavier than the HTML content. If JavaScript appears before the HTML body, the browser will load the JavaScript code before loading the document. Whereas adding JavaScript at the bottom ensures that the browser is not blocked due to the loading of JavaScript and can render the HTML document quicker.  

Some other techniques that can be used to reduce the load time of a website are implementing caching, removing redundant widgets, reducing lookups, using Asynchronous JavaScript, and creating Accelerated Mobile Pages (AMP), including code from Content Delivery Network (CDN), etc.

JavaScript code should be placed at the bottom of the HTML document. This is because the JavaScript code is generally huge and complex. If JavaScript code is included before the HTML body, the browser will wait for the JavaScript code to load before rendering the document. This will slow down the overall loading of the website. On the other hand, adding JavaScript at the bottom ensures that the browser is not blocked from rendering the HTML document due to the loading of JavaScript.

Cookies and Sessions, both, are used to store information. While cookies are only stored on the client i.e. browser, the sessions get stored on the client as well as the server. Cookies are text files that are stored on the client, for tracking purposes. When the client sends a request to the server in the future, it also sends the stored cookies to the server that can be used to identify the user. The session creates a file in a temporary directory on the server. The data will be available to all pages on the website during that visit. When the user closes the browser or leaves the site, the server will terminate that session.

Local storage uses windows.localStorage objects to store data with no expiration date. The data stored in the local storage will be present even when the user closes and reopens the browser.

Session storage uses the windows.sessionStorage object to store data for a single session. The data is deleted from the browser storage when the user closes the browser because the session is lost.

<div> and <span> both are HTML elements that are used to represent a section on the website. The differences between them are:

ID selector is a type of CSS selector that selects HTML elements using a specific ID attribute. The ID is defined to uniquely identify an element. Thus, there should not be more than one element within a page, having the same ID.

ID selectors are represented as #idName.

For example, the below HTML element will have the ID selector as #footer.

Class selector is a type of CSS selector that selects HTML elements using specific class attributes. The class is defined to apply the same styles to different elements. Class selectors are a good choice if you want to apply common styles like font family, color, etc. to multiple elements.

Class selectors are represented as .idName.

For example, the below HTML element will have the class selector as ‘.post’

It's no surprise that this one pops up often in entry level web developer interview questions.

Simple Object Access Protocol (SOAP) and Representational State Transfer (REST) both are used to transfer data over the web. While SOAP is a protocol, REST is an architectural pattern. The major differences between SOAP and REST are:

The CSS box model is an entity or a box under which HTML contents, or other elements, are enclosed. This box helps in creating layouts with CSS, adding borders, and defining space between elements. The CSS box model has four components that are:

1. Content - It is the actual content that is displayed within the box.  
2. Border - It is the border around the box that includes the content.  
3. Padding - Padding is the empty space between the content and the border.
4. Margin -  Margin is the top layer of the box element. It is the empty space outside the border of the box.

CSS Media Queries are a way to define styles in CSS that are responsive according to the user’s window. Using media queries will enable you to style your HTML webpage responsively, i.e the way your website appears may vary according to the screen size, resolution, or media type. Media Queries are used to apply different styles or change the behavior or appearance of a website depending on certain queries. This will ensure a seamless viewing experience for all users, irrespective of whether they are using a desktop, mobile, or tablet.  

Using media queries, we can check the device height and width, the viewport height and width, the orientation, i.e. landscape or portrait, and the resolution of the device.

One of the most frequently posed junior web developer interview questions, be ready for it.

JavaScript provides three types of pop-up boxes to display notifications and messages to users. They are:

1. Alert Box - This pop-up box is used to give information to the user. This box contains a message and an OK button, that the users can click to close the popup box.

2. Confirm Box - This type of pop-up box is used to obtain confirmation from the user. This box contains a message and two buttons - OK and Cancel, out of which the user has to select one. The user can click the OK button to confirm the decision and click the Cancel button to disagree with the decision. Clicking either of the buttons will close the popup. Based on which button is clicked by the user, the function to open the confirm box will return a boolean indicating whether the user has confirmed or not.

3. Prompt Box - The prompt box is used to display a text box in order to take user input, followed by OK and Cancel confirmation buttons. If the user enters a value and clicks OK, the function to create the prompt box will return the value that was entered. If the user clicks Cancel, null is returned.

The difference between POST, PUT and PATCH is:

1. POST - The POST method is used for creating a new resource.  
2. PUT - The PUT method is similar to POST, but it is used to update an existing resource by replacing its contents entirely.  
3. PATCH - PATCH is also used to update an existing resource but unlike PUT, it modifies the existing resource instead of completely replacing it.

There are three ways of adding CSS style rules to an HTML file.

1. Inline CSS - This is used to apply styles to a single HTML element, by making use of the style attribute.

Example,

<div style=“color: red;”> This div has inline CSS applied </div>

2. Internal or Embedded CSS - This is used to apply styles for a single HTML page. The style rules are defined in the <head> section of that HTML page, enclosed within the <style> </style> tags.

Example,

<!DOCTYPE html>
<html>
     <head>
          <style>
               div { color: red; }
               p { color: blue; }
          </style>
     </head>
     <body>
          <div> This is a div with embedded CSS </div>
          <p>This is a paragraph with embedded CSS </p>
     </body>
</html>

3. External CSS - This is the most efficient way to add CSS styles. Using an external stylesheet, you can add styles to many HTML pages at once. You use the <link> tag to link your HTML web pages to the external CSS file.

Example,

  <link rel="stylesheet" href="styles.css">

NPM is a package manager for JavaScript. It is a command-line tool that installs, updates, publishes, and uninstalls JavaScript packages and modules required for applications. Using npm, you can install a number of libraries that are extremely useful for developers, speeding up the process of developing applications.

AJAX is used to update a part of a web page, without reloading the entire page. This is an essential feature when the user needs fast results without waiting for the HTTP response. AJAX can be used where small amounts of data need to be retrieved from the server without reloading the entire page. Few of the use cases of AJAX are data validation without submitting the form and dynamic dropdown population based on other input values. Using AJAX can save bandwidth and reduce the load on the server.

Client-Server Architecture is a computing model in which the server hosts, distributes, and controls the resources and services to be used by the client. The client sends a request to the server, asking for data, through the internet. The server accepts the request, processes it, and sends the response back to the client. The server is capable of managing multiple clients simultaneously. Moreover, a single client can connect to multiple servers simultaneously, each server providing a different set of services to the client.

In JavaScript, you can pass a function to another function as an argument. A callback is a function passed as an argument into another function for executing later. JavaScript callback functions can be used synchronously as well as asynchronously.  

Below is a simple example of callback functions in JavaScript.

function postProcessing(result) {
          console.log(‘Processing is over! The result returned is: ’ + result);
}
function addNumbers(a, b, next) {
          let sum = a + b;
          next(sum);
}

addNumbers(10, 5, postProcessing);

The output of the above code will be:

Processing is over! The result returned is: 15

Event Bubbling is defined as the type of event propagation in which one element is nested inside another element, and both elements have handlers for that event. When the event is triggered, it bubbles up to the elements in the hierarchy starting from the innermost element. In simpler words, the event is first captured and handled by the innermost element and then propagated to the outer elements. This causes all the events of a child element to be passed to the parent node.

It's no surprise that this one pops up often in web developer interview questions.

Most websites rely on HTTP calls to fetch the data from a server. It takes time for a function to fetch data from an API over HTTP.  

In synchronous programming, the browser runs the script one line at a time, in order, and waits for the instruction to be completed before moving to the next line. The problem with synchronous programming is that the program becomes completely unresponsive while a function is running.  

On the other hand, asynchronous programming was devised, which enables your script to start a potentially long-running task, but instead of waiting for the task to be finished, the browser can be responsive to other events while the task is running simultaneously. As soon as the task is finished, the script presents the result. This allows users to continue using the application while processes are running in the background, thus enhancing the user experience.

z-index is a CSS property that allows the creation of a custom stacking order of elements. The z-index property can be provided with an integer value representing the position of that element along the z-axis. This value can be either negative, positive, or zero.  

On the other hand, the tabindex is an HTML attribute indicating whether the element can be focused by sequential keyboard navigation, usually done with the Tab key, and in what order. Similar to z-index, the tabindex attribute also takes an integer value, either negative, positive, or zero. A negative value indicates that the element cannot be sequentially navigated using the keyboard, but can be focused on using JavaScript or by clicking with the mouse. A positive value indicates that the element can be focused sequentially via the keyboard navigation, with its order defined by the numerical value provided. An element with the tabindex value 0 can be focused on using the keyboard after any element with a positive tabindex value.

There are multiple ways to dynamically add styles to HTML elements using JavaScript. The most direct way to add style using JavaScript is using the style property on elements that can be accessed in JavaScript using the DOM API. There are multiple document methods like getElementById(), getElementsByClassName(), getElementsByTagName() and querySelector() that allow fetching HTML Element objects whose CSS selectors match the specified string. Once you have the HTML element, you can access the style property and apply the desired style value.

For example,

const element = document.getElementById(‘header’);
element.style.color = ‘black’; // change the color
element.style.fontSize = ‘1rem’; // change the font size

The general syntax of applying style is element.style.cssProperty = value. Here, the CSS property names are written in camelCase.  

A cleaner way to dynamically change the styles of an element using JavaScript is to add or remove the classes from the element.

Example,

const element = document.getElementById(‘header’);
element.classList.add(‘className’);
element.classList.remove(‘className’);

By adding or removing className to the list of classes of the element, the styles can be dynamically added or removed.

In HTML, the <form> tag can be used to create a form for taking user input. <form> tags have various attributes.  

The action attribute is used to specify where to send the data entered in the form after the form is submitted by clicking the Submit button. Usually, the data is sent to the server.  

The method attribute specifies the HTTP method that should be used when sending the data in the form to the location specified in the action attribute. The default HTTP method used to submit the form data is GET. The form data can be sent either by GET or POST. If GET is specified, the data will be sent as URL variables. If POST is specified, the data will be sent in the request body.

Pseudo-classes in CSS are used to define special states of HTML elements. They can be used along with the existing CSS selectors in order to add styles to elements based on their current state. The general syntax of using a pseudo-class with a regular selector is

selector:pseudo-class {
          // styles here
}

The pseudo-classes are divided into different types such as:

1. Links: These classes are used to track the state of elements that contain a link. :active and :visited are two of the commonly used link-based pseudo-classes. The :active pseudo-class selects elements containing the link that is currently active. The :visited pseudo-class targets elements that have links already visited by the user.  
2. Dynamic: These classes can be applied to any elements to track their state that is defined by the cursor actions. For example, when a user hovers over an element, it can be tracked using the :hover pseudo-class. Similarly, the :focus pseudo-class can track the element that is currently focused on by the user.  
3. Structural: These classes allow selecting elements according to their exact numerical position with respect to their parent element. Commonly used structural pseudo-classes are :only-child, :only-of-type, :first-child, :last-child, :first-of-type, :last-of-type, :nth-child, etc.

The value of the margin CSS property can be negative. This makes it possible to move the element closer to its top or left neighbor, or move its right or bottom neighbor closer to the border. Depending on the value of the position property of the element, the behavior of the negative margin for that element will vary. However, a negative padding value is not considered valid.

The differences between HTTP and HTTPS are:

Both window.onload and onDocumentReady are used to perform operations when the web page has been loaded. However, there are differences in these in terms of execution.

window.onload is triggered when the DOM and all external resources like images and videos are loaded. Due to the loading of external resources, there is a delay in the execution of the actual script when the page is displayed. window.onload is not cross-browser compatible while using jQuery.  

On the other hand, the onDocumentReady method is triggered when the DOM has loaded, i.e it waits for the HTML elements to be loaded but not for multimedia content like images and videos. The DOM tree has been built when the onDocumentReady event is triggered. Thus, any delays in the execution of the script are reduced. Moreover, it is compatible with all browsers.

<canvas> and <svg> are two new graphical containers, used to create and store graphic elements in the HTML document. They have a few differences between them that are:

ECMAScript is the language standard for JavaScript, the commercial name/trademark of the language. Under ECMA, JavaScript is evolved and nurtured by the TC-39 committee.  

JavaScript is a scripting language that conforms to, or in other words, implements the ECMAScript specification.

Long polling is a technique for maintaining a persistent connection between the client and the server. It is used to push data from the server to the client. The connection is maintained after a request for new information has been made by the client to the server, until the data becomes available on the server and it is ready to send it to the client. The connection is closed when the server has sent the data to the client or a connection timeout occurs. The flow of long polling is:

1. The client sends a request for information to the server.
2. The server holds the client’s connection until new data is available.
3. The server responds to the client as new information becomes available.

Single Page Applications (SPAs) are those web applications that load only a single web document and then update that document when different content or layout is to be displayed. Single Page Applications do not require page reloading during use. This prevents the loading of whole new pages from the server, resulting in better performance with some disadvantages including SEO, state maintenance, etc. SPA is faster as compared to traditional multi-page applications as most resources like HTML, CSS, and scripts are loaded only once during the application lifecycle, and only the data is transferred multiple times from the server.

A staple in web dev interview questions, be prepared to answer this one.

Progressive rendering is a technique that is used to render content for display as quickly as possible. Here, small parts of a website are updated sequentially on the server and streamed to the client in parts instead of waiting for the whole page to be rendered. Once the critical content is rendered on the server, it is streamed to the client without waiting for non-critical content, which is streamed later. The browser progressively renders the HTML on the web page as soon as it receives a chunk of the critical content. As and when the non-critical chunks are received from the server, they are rendered on the web page.

Cross-site scripting (XSS) is a client-side code injection attack. It enables an attacker to introduce malicious code into a web page which is executed in the browser of the victim. When the victim visits the web page, the script reaches the user’s browser and is executed. XSS attacks are common in JavaScript.

Webpack is a static module bundler tool that is designed to bundle JavaScript files, to be used in a browser. Modules are reusable code chunks built from JavaScript, external libraries in node_modules, CSS styles, images, and other assets. They are packaged and can be easily added to a website. Webpack generates a single or a few files that can run your application from a large number of original files.

Webpack puts all files, assets, code, images, fonts, etc. in a dependency graph. Based on this graph, a new package is created that contains only the bare minimum files required that can be easily embedded into the HTML file and used in the application.

Progressive Web Applications (PWAs), as the name suggests, are web applications but they deliver an app-like user experience. They have capabilities like push notifications and can even work offline. PWAs provide the best of both worlds - the web and native applications. They are cheaper to develop as compared to native apps because you need not have separate code bases for developing applications for different platforms. You can have a single codebase for building one web application that can run on almost all platforms. Once you have developed your website, it requires a few configuration-based changes to be converted to a PWA. Thus, many companies have now started to resort to PWAs.

A common question in web developer job interview questions, don't miss this one.

The different APIs provided in HTML5 are:

1. History API: This API gives access to the browser’s history.
2. User Timing API: This API provides developers with high-precision timestamps to measure JavaScript code performance.  
3. High-Resolution Time API: This API gives the current time in a sub-millisecond resolution independent of system clock skew or adjustments.
4. Battery Status API: This offers information about the device's current battery status like power source, battery charge level, expected time to charge or discharge, etc.
5. Navigation Timing API: This API lets developers obtain accurate timing information related to navigation such as time required for domain lookup, redirection, time to construct the DOM, etc.  
6. Vibration API: This API provides access to the vibration mechanism of devices using which developers can simulate the vibration of devices in order to trigger certain events.
7. Page Visibility API: This API enables us to determine the current visibility status of the page such as currently focused, minimized, etc.  
8. Network Information API: This API enables applications to access information about the network connection in use by the device, using which we can identify the connection type and status of the entire bandwidth log.
9. Geolocation API: This API helps in tracking the location of the device using the Global Positioning System (GPS). Using this API, we can retrieve the latitude and the longitude of the current location.

The ‘use script’ expression is used to enable strict mode in JavaScript, which makes it easier to write good JavaScript code. We can then run a restricted variant of JavaScript. The strict mode was introduced in ECMAScript version 5. Using strict mode eliminates some silent errors in JavaScript by changing them to throw errors. JavaScript code in strict mode can sometimes run faster than the same code without the strict mode. Strict mode also ensures the security of JavaScript code and improves compiler efficiency.

A promise in JavaScript represents the eventual completion or failure of an asynchronous operation and its resulting value. It is a proxy for a value that might not necessarily be known when the promise object is created. Promises are used in Asynchronous methods, where instead of immediately returning a value, the method returns a promise to provide a value at some point in the future. To put it simply, promises are a way to return synchronous values from an asynchronous method. The value for which the promise acts as a proxy, can either be a resolved value, or a reason that it was rejected.

A promise can be in either of the three states:

1. Pending: This is the initial state of a promise, i.e. it has neither been fulfilled nor been rejected.  
2. Fulfilled: This state means that the operation was completed successfully.
3. Rejected: This state means that the operation could not be completed successfully.

A promise is considered to be settled if it is either in the fulfilled state or in the rejected state.

Async/Await is a special syntax that allows developers to work with JavaScript promises in an easier and more comfortable manner.

Async is a keyword that is written before a function definition, which indicates that the function always returns a promise.

Await is a keyword that is used inside a function marked async. You cannot use await in a not async function. The await keyword makes JavaScript wait until a promise is settled and the result is returned.

Example,

async function fetchData() {
          let promise = new Promise((resolve, reject) => {
                    setTimeout(() => { resolve(‘Promise is successful’);}, 2000);
          });
          let result = await promise;  
          console.log(result);
}

Running the above function will log ‘Promise is successful’ after 2 seconds in the console.  

The function call fetchData() will return a promise which is later resolved to the value ‘Promise is successful’.  

On the line  

let result = await promise;

JavaScript waits for the promise variable to be resolved before the value is returned to the result variable.