Latest 101 Web Developer Interview Questions and Answers

by i Digital Academy | Aug 20, 2019 | Articles

Web Developer Interview Questions are prepared for job seekers. After completing web development training students and experienced candidates can refer most commonly asked interview questions for web development. These interview questions will help you prepare for the next web development interview. All the interview questions are prepared by experts with over 10 years of experience.

Here are latest interview questions and Answers on web developer

What Are The New DocType And Charset In HTML5?

Answer: The DocType element communicates the HTML version to the browser. It usually appears in the first line of code of an HTML page. Unlike the earlier versions/standards of HTML, DocType has got a simplified format in HTML5.

<!doctype html>

The CharSet is a new meta tag attribute in HTML5 which configures the character encoding.

What Are The New Form Elements Introduced In HTML5?

Answer: Here is the list of new form elements available in HTML5.

<datalist> – It specifies a list of options for input controls.

<keygen> – This tag generates an encryption key.

<output> – It defines the result of an expression.

What Are The Various Elements HTML5 Has Added For Media Content?

Answer: Following HTML5 elements supports media content.

<audio> – It specifies sound content.

<video> – It links to a video.

<source> – This tag specified the source of video and audio links.

<track> – This element defines tracks for video and audio.

What Are Various Elements That Provide Better Structuring In HTML5?

Answer: Following HTML5 elements focus on improving the structuring.

<article> – This element allows to specify an article.

<aside> – allows to view content other than the page content.

<bdi> – It lets a part of text getting formatted in a different direction from other text.

<command> – It displays a button element which processes a command upon user action.

<details> – It adds additional details that a user can show or hide.

<dialog> – It initializes a dialog box or popup window.

<figure> – This element can show illustrations, diagrams, photos, and code listings.

<figcaption> – It adds a caption for the image specified by a <figure> element.

<footer> – This tag appends a footer to a document.

<header> – This tag inserts a header into a document.

<hgroup> – If a page includes multiple headings, then this tag groups them into a set of <h1> to <h6> elements.

What Is SVG And Why Do You Use It?

Answer: SVG is an acronym for Scalable Vector Graphics as recommended by W3C.

Its purpose is to display the vector-based graphics over the Web.

The graphics use an XML format.

SVG graphics are of higher quality and does not lose it even when resized.

All elements and attributes of SVG support animation.

What Is A Canvas? And What Is Its Default Border Size?

Answer: Canvas is an HTML5 element which can draw graphics on the fly with the help of JavaScript. The <canvas> element can only contain graphics. It supports a no. of methods for drawing paths, boxes, circles, text, and images.

By default, It has no border. However, it allows using CSS to change the border style.

What Are The New DocType And Charset In HTML5?

<!doctype html>

The CharSet is a new meta tag attribute in HTML5 which configures the character encoding.

What Are The New Form Elements Introduced In HTML5?

Answer: Here is the list of new form elements available in HTML5.

<datalist> – It specifies a list of options for input controls.

<keygen> – This tag generates an encryption key.

<output> – It defines the result of an expression.

What Are The Various Elements HTML5 Has Added For Media Content?

Answer: Following HTML5 elements supports media content.

<audio> – It specifies sound content.

<video> – It links to a video.

<source> – This tag specified the source of video and audio links.

<track> – This element defines tracks for video and audio.

What Are Various Elements That Provide Better Structuring In HTML5?

Answer: Following HTML5 elements focus on improving the structuring.

<article> – This element allows to specify an article.

<bdi> – It lets a part of text getting formatted in a different direction from other text.

<command> – It displays a button element which processes a command upon user action.

<details> – It adds additional details that a user can show or hide.

<dialog> – It initializes a dialog box or popup window.

<figure> – This element can show illustrations, diagrams, photos, and code listings.

<figcaption> – It adds a caption for the image specified by a <figure> element.

<footer> – This tag appends a footer to a document.

<header> – This tag inserts a header into a document.

<hgroup> – If a page includes multiple headings, then this tag groups them into a set of <h1> to <h6> elements.

What Is SVG And Why Do You Use It?

Answer: SVG is an acronym for Scalable Vector Graphics as recommended by W3C.

Its purpose is to display the vector-based graphics over the Web.

The graphics use an XML format.

SVG graphics are of higher quality and does not lose it even when resized.

All elements and attributes of SVG support animation.

What Is A Canvas? And What Is Its Default Border Size?

By default, It has no border. However, it allows using CSS to change the border style.

How Does Canvas Differ From SVG?

Answer: Here are a few points elaborating the differences between Canvas and SVG.

Canvas depends on the resolution whereas SVG doesn’t.
This does not allow event handlers whereas SVG does provide the support for event handlers.
Ideal for graphic-intensive games whereas SVG doesn’t intend for gaming.
It works well for small rendering areas whereas SVG may perform better for large rendering areas like Google map.

Does HTML5 Provide Drag And Drop Facility? How Do You Set An Image As Draggable?

Answer: To set an image as draggable, initialize the draggable attribute with true.

What Is HTML5 Web Storage?

Answer: HTML5 brought this new ability to store web pages within the browser cache. This web storage is not only faster than the cookies but secured too. It is capable of storing a large amount of data without compromising the performance of the website.

Also, note that the cached data is not must for every server request. Instead, it gets utilized only when the page asks for it. And only the web page which gets the data stored can access it.

What Is The Difference Between LocalStorage And SessionStorage Objects?

Answer: Following points describes the differences between the localStorage and sessionStorage objects.

The <localStorage> object doesn’t have an expiry for the stored data whereas the <sessionStorage> object keeps it only for a single session.

The <localStorage> object doesn’t have a provision to delete the data upon closing of browser window whereas the <sessionStorage> object clears it simultaneously with the window closing down.

How Does CSS3 Differ From CSS?

Answer: CSS3 is the most recent version of CSS. It has introduced a bunch of new tags to give better user experience. Some of the features are rounded corners, animation, custom layout and media queries.

How Does CSS3 Support The Responsive Web Designing?

Answer: CSS3 has come up with a media query feature. It supports RWD (Responsive Web Design) and does help in making a website responsive.

What Is A CSS Selector?

Answer: CSS selector is an expression following the CSS rules and used to select the element we want to style. And CSS selector syntax means how we write or use those selectors in the CSS editor.

Please note that a CSS selector can help you find or select HTML elements based on their name, id, class, attribute, and more.

What Are Different Types Of CSS?

Answer: Below are the different types of CSS.

Embedded – It adds the CSS styles using the <style> attribute.

Inline – It adds the CSS to the HTML elements.

Linked/External – It adds an external CSS file to the HTML document.

What Is An ID Selector?

Answer: The ID selector uses the “ID” attribute of the target HTML element to select it. The constraint to work is that the ID should be unique within a page so that the selector can point it out correctly.

To build an ID selector expression, start with a hash (#) character, followed by the id of the element.

Here is an example which selects a paragraph element using its ID.

#sample {padding: 10px;}

What Is A Class Selector?

Answer: In CSS, a class selector is an expression which begins with a full stop (“.”) and followed by the name of a class. The class attribute could be a space-separated list of items, and one of those must match with the class name specified in the selector.

Here is an example which selects a div and modified it style.

.sampleclass {font-family: Ariel; font-size: 10; background: green;}

What Is The Difference Between An ID Selector And The Class Selector?

Answer: An ID Selector finds and modifies the style to only a single element whereas a class selector may apply to any no. of HTML elements.

What Is Grouping In CSS3?

Answer: Grouping makes it possible to apply the same style to multiple HTML elements (Classes/Tag/ID) within a single declaration. It happens by specifying all the selectors separated by commas.

#page p, ul { padding-top: 10px; margin: 0; }

What Are Child Selectors In CSS?

Answer: A child selector looks up for the child of some element. To form a child selector, we need two or more selectors separated by “greater than” symbol.

Let’s take an example. We have a <ul> tag inside a paragraph. Here, <ul> is the child of the paragraph element. So, to apply the CSS styles, we can use the following syntax.

p > ul { font-size:15px; }

How Do You Make Border Rounded With CSS3?

Answer: Yes, in CSS3, there is a <border-radius> property which allows creating an element with rounded corners. We can apply the same style to all the sides and make the corners round.

The <border-radius> property has four individual properties <border-top-left-radius>, <border-top-right-radius>, <border-bottom-left-radius> and <border-bottom-right-radius>.

What Is Webkit In CSS3? And Why Is It Used?

Answer: Webkit is a core software component which is responsible for rendering HTML and CSS in browsers like Safari and Chrome. There are other similar rendering engines like Gecko for Mozilla, Presto for Opera, and Edge for IE.

To enable Webkit on a web page, it requires prefixing the <-webkit> keyword with CSS values.

Here is an example CSS using the Webkit feature.

.box_shadow {

-webkit-box-shadow: 0px 0px 5px 0px #ffffff;

box-shadow: 0px 0px 5px 0px #ffffff;

}

How Do You Enable Pagination Using CSS3?

Answer: Making use of a <ul-li> structure, we can allow Pagination with CSS3.

<ul>

</ul>

</div>

What Are Transitions In CSS3?

Answer: CSS3 transitions help to create easy and fast animation effect. They not only give us control to change the value of a property but also let it proceed slowly for the given duration.We can use the following CSS properties.

transition, transition-delay, transition-duration, transition-property, and transition-timing-function.

What Is CSS Box Model And What Are Its Components?

Answer: It is common in HTML to term all of its elements as Boxes. Similarly, in CSS, Box Model refers to modeling the design and layout of its elements. It has primarily four core components.

Margin – It refers to the top most layer of the box.

Border – The padding and content options work around the Border. Changing the background color can also affect the Border.

Padding – It defines spacing around the box.

Content – It represents the actual content to be shown.

What Are Media Queries In CSS3 And Why Do You Use Them?

Answer: Media queries are one of the latest features of CSS3 used to define responsive styles for devices of different shapes and sizes.

They are the powerful CSS tool which makes it easy to create responsive design for tablets, desktop, mobiles devices. They can help adjusting the Height, Width, Viewport, Orientation and Resolution.

@media screen and (min-width: 480px) {

body {

background-color: #ffffff;

}

What Are Pseudo-Classes In CSS?

Answer: A Pseudo-Class is a CSS technique to set the style when the element changes its state.

For example.

Edit the style upon mouse hover event.

Set the style when an element gets focus.

Apply different styles for visited/unvisited links.

selector:pseudo-class {

property:value;

}

What Is The Use Of Float Property In CSS?

Answer: With the help of float property, we can control the position and layout of elements on a web page.

For example, it can define the placement of a <div> either to the right or left side.

Also, to note that it doesn’t interfere with the elements appearing before.

div {

float: left;

}

Which Property Do You Use To Modify The Face Of A Font In CSS?

Answer: First of all, please note that both the terms <@font-face> and <font-family> refers to changing the font of an HTML element. However, there is a slight difference between the two.

The <@font-face> is a CSS rule that facilitates the use of custom fonts on a web page.
The <font-family> is a CSS property which specifies the font for a web element.

Also, to change the font or face of a font, we need to set the <font-family> property. Please see the below example.

@font-face {

font-family: myCustomFont;

src: url(sansation_light.woff);

}

body {

font-family: ‘myCustomFont’, Fallback, Ariel;

}

How Do You Add Comments In CSS?

Answer: It is just the same in CSS as we do in JavaScript. Place the comments inside the enclosing /* and */.

What Is Z-Index And How Does It Work?

Answer: The z-index is a CSS property which defines the stack order of web elements. Higher order elements will appear before any lower order element.

Note – The z-index only applies to the positioned elements. For example, position:absolute, position:relative, or position:fixed.

div {

position: absolute;

left: 10px;

top: 10px;

z-index: -1;

}

What Are The Core Data Types Available In JavaScript?

Answer: Below is the list of data types available in JavaScript.

Number

Object

String

Boolean

Function

Null

Undefined

What Is Difference Between <Window.Onload> And <OnDocumentReady>?

Answer: The <onload> event doesn’t invoke until the page gets finished loading of CSS and images. It could cause a significant delay in rendering of the web page.

As a web developer, we have to ensure the page should load as quick as possible. The event <onDocumentReady> lets us only wait for the DOM to initialize instead of delaying any action required.

39. What Is The Difference Between Undefined Value And Null Value?

Answer: <undefined> Vs. <null> value.

A variable will have <undefined> value if it has declaration but not assigned any value.
A variable will yield a <null> value if assigned with null.
<undefined> is a type itself whreeas <null> is an object.
<undefined> value is set via JavaScript engine whereas null value is set directly in the code.

40. How Do You Change The Style/Class On Any Element From JavaScript?

Answer: Following JavaScript will modify the style/class of an HTML element.

document.getElementById(“input”).style.fontSize = “10”;

-or-

document.getElementById(“button”).className = “classname”;

41. What Is Namespacing In Javascript And Where Is It Used?

Answer: Using global variables is a bad practice in most programming languages including JavaScript. But sometimes, it is not possible to avoid the global variables. So JavaScript introduces the concept of namespacing which ties down a part of the code and register it with a unique name.

A namespace is just an object in JavaScript that acts as a container for methods, properties, and objects. It encourages modularity and reusability in a web application.

42. How Does JavaScript Handle Automatic Type Conversion?

Answer:

As per ECMA Script standard, JavaScript is dynamic as well as weakly typed language with first-class functions which means a function can accept other functions as arguments.

Also, it does support auto-type conversion. Whenever an operator or a statement doesn’t get a value of the expected type, then the conversion takes place automatically.

43. What Are Different Types Of Popup Boxes Available In JavaScript?

Answer: JavaScript allows following types of dialog boxes.

Alert – It just has an <Ok> button to proceed.

Confirm – It pops up a window showing up <Ok> and <Cancel> buttons.

Prompt – It gives a dialog asking for user input followed by showing <Ok>/<Cancel> buttons.

44. What Is The Difference Between <Alert()> And <Confirm()> Popup Boxes?

Answer:

The <alert()> method displays a message in a popup box and has only one <Ok> button.

But the <confirm()> method asks for confirmation from the user so that it can get the opinion of visitors. It has two buttons i.e. <Yes> and <No>.

In short, <alert()> popup is to display the messages to the users whereas the <confirm()> dialog is good for knowing the choices of the visitors.

45. What Is Scope In JavaScript?

Answer: The general meaning of scope is the accessibility of functions and variables in an application. Usually, we use them in two ways i.e. Local and Global.

A) Local Scope.

If we declare a function or variable inside a function, then we can access it only inside that function.

// code here can not use myLocalVar

function myFunction() {

var myLocalVar = “I’m Local”;

// code here can use myLocalVar

}

B) Global Scope.

Declaring a variable anywhere on the page would mean that we can access it from any of the functions on that page.

var myGlobalVar = “I’m Global”;

// code here can use myGlobalVar

function myFunction() {

// code here can use myGlobalVar

}

46. What Types Of Comments Does JavaScript Support?

Answer:

There are two ways to insert comments in JavaScript code.

For single line comment, we can use // (double forward slash).

For multiline comment, we enclose comments using /* */.

47. How Do You Distinguish Between An Undefined And Undeclared Variable?

Answer: Undefined refers to a variable which has declaration but not initialized yet. However, an undeclared variable is one which has a reference in the code without being declared.

Example.

var iExistButUndefined;

alert(iExistButUndefined); // undefined

alert(iMNotDeclared); // accessing an undeclared variable

48. What Are == And === Operators In JavaScript And How Do They Differ?

Answer:

== – Equal to operator

=== – Equal value and equal type operator

Both of the above operators belongs to the Comparison Operator Category. However, the equality operator <==> only checks for the value whereas the strict equality operator <===> checks for the values as well as types.

49. What Relates JavaScript With ECMA Script?

Answer: ECMA Script is another technical name for JavaScript as it is also known as LiveScript. The current JavaScript that you may see running in browsers is ECMA Script revision 6.

50. What Is The Mechanism To Submit A Form Using Javascript?

Answer:

We can call the following method to submit a form using JavaScript.

document.forms[0].submit();

0 -> index of the form

Note – if we have more than one form, then the first one stays at index 0, next is at index 1 and so on.

51. What Is The Mechanism To Detect The Operating System On The Client Machine?

Answer: The following JavaScript property gives back the operating system version on the client machine. It returns the OS version string.

navigator.appVersion

52. What Is The Function Of Delete Operator In JavaScript?

Answer: The delete operator clears all the variables and objects used on the web page. But it leaves the variables declared using the var keyword as is.

53. What Is The Use Of <This> Keyword In JavaScript?

Answer: The <this> keyword refers to the current object in the program. It is usually available inside a method for referencing the current variable or current object.

54. What Does The <TypeOf> Operator Do In JavaScript?

Answer: The <typeof> operator give back the type of a variable in the form of a string.

55. How Do You Make Generic Objects In JavaScript?

Answer: JavaScript provides a new operator to produce generic objects.

Follow the below example creating a generic object.

var obj = new object();

56. What Does The “Defer” Attribute Do In JavaScript?

Answer: The <defer> attribute is primarily of boolean type. It defers executing a javascript till the page doesn’t complete the parsing process.

Below is the example of JavaScript code deferring a sample script.

57. Explain what are the key responsibilities of a Web Developer?

Answer: Program test and debug all web applications

Design, develop, test and deploy web applications

Uploading sites onto server and registering it with different search engines

Coordinate with other designers and programmers to develop web projects

Fix bugs, troubleshoot and resolve problems

In case of system failure initiate periodic testing and implement contingency plans

Develop appropriate code structures to solve specific tasks

Support and assist in the upkeep and maintenance of websites

Assume ownership of code throughout staging, development, testing and production

58. What web developer should know?

Answer: A good web developer should know

HTML

CSS

SQL

PHP/Ruby/Python

JQuery

JavaScript

59. Explain what is CORS? How does it work?

Answer: (CORS) Cross-Origin Resource Sharing is a mechanism that enables many resources (e.g., JavaScript, fonts etc.) on a web page to be requested from another domain outside the domain from which the resource originated. It is a mechanism supported in HTML5 that manages XMLHttpRequest access to a domain different.

60. List out the advantage of HTTP/2 as compared with HTTP 1.1?

Answer: The advantage of HTTP/2 compared to HTTP/1.1 is

HTTP headers data compression

Server push technologies

Over a single TCP connection parallel loading of page elements

Prioritization of request

61. Explain what is an ETag and how does it work?

Answer: An ETag is an opaque identifier allocated by a web server to a specific version of a resource found at a URL. The ETag is a part of HTTP, the protocol for the world wide web and when the server reads the ETag from client request, the server can then tell whether to send the file (HTTP 200) or tell the client just to use their local copy (HTTP 304).

62. Explain what is long polling?

Answer: Long polling is a web application development pattern used to emulate pushing data from the server to the client. When the long polling is used, the client sends a request to the server, and the connection remains intact until the server is ready to send data to the client. The connection will be closed only after the data is sent back to the client or connection timeout occurs.

63. Explain what is DTD (Document Type Declaration)? Mention what is the difference between CDATA and PCDATA in DTD?

Answer: A DTD means Document Type Definition (DTD) which defines the structure, legal elements and attributes of an XML document.

PCDATA: A PCDATA is a Parsed Character Data. XML parsers usually parse all the text in an XML document.

CDATA: While CDATA is an Unparsed Character Data, the term CDATA is used about text data that should not be parsed by the XML parser.

64. Mention some tips you can use to reduce the load time of a web application that you have written?

Answer: To decrease the load time of a web application you have to follow the following tips

Optimize images to no longer than screen resolution and save it as a compressed file

Eliminate all JavaScript files to reduce the amount of transferable data

Combine & Mininify all CSS and JS and call them in footer

Defer or Asynch JS Files

65. Mention what is the correct way to include JavaScript into your HTML?

Answer: The correct way to include JavaScript into your HTML is by using inline event handlers or inline code.

66. Explain in CSS, how can you make a form element’s background color change when the user is entering text? Does this work in all browsers?

Answer: Yes, you can change the default look of form elements by styling their HTML tags: input, select and textarea but it won’t work for all browsers.

67. In HTML what tag can be used for a multi-line text input control?

Answer: For multi-line text input control, you can use the “textarea tag”.

68. Explain how can you refer to CSS file in the web page?

Answer: You can refer to the .CSS file in the webpage by using the <link> tag. It should be kept between <head></head>tag. For example <linkhref=”/css/mystyle.css” type=”text/css” rel=”stylesheet”/>

69. List out few ways you can reduce page load time?

Answer: You can do following things to reduce the page load time

Reduce image size

Remove unnecessary widgets

HTTP compression

Placing CSS at the top and script reference at the bottom or in external files

Reduce lookups

Minimize redirects

Caching,

70. How XHTML is different from HTML?

Answer: XHTML requires that all tags should be in lowercase

XHTML requires that all tags should be closed properly

This requires that all attributes are enclosed in double quotes

XHTML forbids inline elements from containing block level elements

71. List out the new APIs provided by HTML 5 standard?

Answer: HTML 5 comes with number of new APIs

Media API

Text track API

Application Cache API

Data transfer API

User Interaction

Command API

Constraint Validation API

History API

72. What is a pseudo-class?

Answer: It is a CSS technique which sets the style when an element changes its state. E.g. style changes when mouse hover, different styles for visited or unvisited links, etc.

73. What is Namespacing in JavaScript?

Answer: It is usually not a good practice to use global variables in programming languages including JavaScript. However, you may be forced to use global variables sometimes. So, JavaScript introduces the concept of namespacing which ties down a part of the code and register it with a unique name.

74. How can you reduce page loading time?

Answer: These are the following ways you can reduce web page loading time: reduce image size, remove unnecessary widgets, HTTP compression, placing CSS at the top and script referencing at the bottom or external files, reduce lookups, minimise redirects and caching.

75. What is CORS?

Answer: Cross-Origin Resource Sharing (CORS) is a mechanism that enables different resources on a web page to be requested from another domain outside the domain from which the request originated.

76. What are the advantages of HTTP 2.0 over HTTP 1.1?

Answer: The major advantages are: headers compression, push notification, intelligent packet streaming management and parallel loading of page elements over a single TCP connection.

77. How do you take into account SEO, maintainability, UX, performance, and security when you’re building a web application?

Answer: Explain how you prioritise your actions as per the requirements of the organisation. If your organisation handles vital data, then security will be your top priority. If it is a medium-sized online business, SEO and UX might be your top priority and so on.

78. What are the new form elements introduced in HTML5?

Answer: The new form elements introduced in HTML5 are:

<datalist> – specifies a list of options for input controls.

<keygen> – generates an encryption key.

<output> – defines the result of an expression.

79. What’s the best way to integrate 5 different stylesheets into a website?

Answer: It usually depends on how the site is laid out. However, in most cases combining the stylesheets into single a one is the best approach. You can use Gulp to do so.

80. What’s the difference between Canvas and SVG?

Answer: Canvas is an HTML5 element which can draw graphics on the fly with the help of JavaScript. SVG (Scalable Vector Graphics) is used to display vector-based graphics on the web.

81. What is the default border size of a Canvas?

Answer: There is no default border size of a Canvas. You can adjust using CSS.

82. What is the difference between ID and Class selector?

Answer: ID selector finds and modifies the style to any single element while Class selector can do to any number of elements.

83. What is your preferred development environment?

Answer: This question is not about checking if you are perfect for the same environment as the organisation works but to measure if you are flexible to work in any environment. So, give them a hint that you are able to adapt to any environment with the core skills that you have.

84. Which are the new APIs provided by HTML5?

Answer: The new APIs are media API, text track API, application cache API, data transfer API, user interaction API, command API, constraint validation API and history API.

85. What are your key responsibilities in your current organisation?

Answer: Are you working in specific development areas? Do you only support the maintenance and upkeep of a website? Or Are you involved in all major steps in development including fixing bugs? Do not leave out any responsibilities which you think can help in leveraging your candidacy for the role.

86. What is the difference between null value and undefined value?

Answer: Undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value.

87. What are the web technologies that you are proficient in?

Answer: As already mentioned, you must have expert skills in three technologies: HTML5, CSS3 and JavaScript. Apart from that, you should be able to have at least some working knowledge of some of the other technologies like popular frameworks, APIs and database management.

88. What are the different types of pop-up boxes available in JavaScript? Explain them.

Answer: There are three types of pop-up boxes:

Alert – it just displays a message with an OK button.

Confirm – it pops up a confirmation message window with OK and Cancel button.

Prompt – it pops up a dialog box asking user input followed confirmation buttons.

89. What is Scope in JavaScript? Name the different types of Scopes.

Answer: The scope defines the accessibility of the functions and variables in an application. There are two types of scopes: local and global.

90. What is the difference between ‘==’ and ‘===’ operators?

Answer: Though both of them belongs to the comparison operator category, the ‘==’ operator checks the value whereas, the ‘===’ operator checks both the value and the type.

91. By which mechanism in JavaScript can you detect the operating system on a client machine?

Answer: The operating system on a client system can be known by using the JavaScript property navigator.appVersion.

The above web developer interview questions and answers will help you to get an understanding of the type of questions you can expect in such interviews. However, if you need to gain expert-level skills to clear the technical round of interviews in any organisation, you should enrol in a certification course. Naukri Learning offers you a variety of online web development courses which you can enrol in and get certified to improve your chances of clearing an interview and getting a career boost.

92. What is CORS? How does it work?

Answer: Cross-origin resource sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. It’s a mechanism supported in HTML5 that manages XMLHttpRequest access to a domain different.

CORS adds new HTTP headers that provide access to permitted origin domains. For HTTP methods other than GET (or POST with certain MIME types), the specification mandates that browsers first use an HTTP OPTIONS request header to solicit a list of supported (and available) methods from the server. The actual request can then be submitted. Servers can also notify clients whether “credentials” (including Cookies and HTTP Authentication data) should be sent with requests.

93. Explain the purpose of each of the HTTP request types when used with a RESTful web service.

Answer: The purpose of each of the HTTP request types when used with a RESTful web service is as follows:

GET: Retrieves data from the server (should only retrieve data and should have no other effect).

POST: Sends data to the server for a new entity. It is often used when uploading a file or submitting a completed web form.

PUT: Similar to POST, but used to replace an existing entity.

PATCH: Similar to PUT, but used to update only certain fields within an existing entity.

DELETE: Removes data from the server.

TRACE: Provides a means to test what a machine along the network path receives when a request is made. As such, it simply returns what was sent.

OPTIONS: Allows a client to request information about the request methods supported by a service. The relevant response header is Allow and it simply lists the supported methods. (It can also be used to request information about the request methods supported for the server where the service resides by using a * wildcard in the URI.)

HEAD: Same as the GET method for a resource, but returns only the response headers (i.e., with no entity-body).

CONNECT: Primarily used to establish a network connection to a resource (usually via some proxy that can be requested to forward an HTTP request as TCP and maintain the connection). Once established, the response sends a 200 status code and a “Connection Established” message.

94. What is Long polling, how does it work, and why would you use it? Considering server and client resources, what is the main drawback of using long polling? Which HTML5 feature is the best alternative to long polling?

Answer: The HTTP protocol is based on a request/response pattern, which means that the server cannot push any data to the client (i.e., the server can only provide data to the client in response to a client request). Long polling is a web application development pattern used to emulate pushing data from server to client. When the long polling pattern is used, the client submits a request to the server and the connection then remains active until the server is ready to send data to the client. The connection is closed only after data is sent back to the client or connection timeout occurs. The client then creates a new request when the connection is closed, thus restarting the loop.

There are two important drawbacks that need to be considered when using long polling:

Long polling requests are not different from any other HTTP request and web servers handle them the same way. This means that every long poll connection will reserve server resources, potentially maxing out the number of connections the server can handle. This can lead to HTTP connection timeouts.

Each web browser will limit the maximum number of connections web application can make. This means that your application load time and performance may be degraded.

In HTML5, a useful alternative to long polling is using a WebSocket. A WebSocket is a protocol providing full-duplex communications channels over a single TCP connection. The WebSocket protocol makes possible more interaction between a browser and a web site, facilitating live content and eliminates the need for the long polling paradigm.

Another potential answer could be Server-sent DOM Events. Which is method of continuously sending data from a server to the browser, rather than repeatedly requesting it. However, this HTML5 feature is not supported by Microsoft Internet Explorer, thus making it less attractive solution.

95. What is an ETag and how does it work?

Answer: An ETag is an opaque identifier assigned by a web server to a specific version of a resource found at an URL. If the resource content at that URL ever changes, a new and different ETag is assigned.

In typical usage, when an URL is retrieved the web server will return the resource along with its corresponding ETag value, which is placed in an HTTP “ETag” field:

ETag: “unique_id_of_resource_version”

The client may then decide to cache the resource, along with its ETag. Later, if the client wants to retrieve the same URL again, it will send its previously saved copy of the ETag along with the request in a “If-None-Match” field.

If-None-Match: “unique_id_of_resource_version”

On this subsequent request, the server may now compare the client’s ETag with the ETag for the current version of the resource. If the ETag values match, meaning that the resource has not changed, then the server may send back a very short response with a HTTP 304 Not Modified status. The 304 status tells the client that its cached version is still good and that it should use that.

However, if the ETag values do not match, meaning the resource has likely changed, then a full response including the resource’s content is returned, just as if ETag were not being used. In this case the client may decide to replace its previously cached version with the newly returned resource and the new ETag.

96.Explain the difference between stateless and stateful protocols. Which type of protocol is HTTP? Explain your answer.

Answer: A stateless communications protocol treats each request as an independent transaction. It therefore does not require the server to retain any session, identity, or status information spanning multiple requests from the same source. Similarly, the requestor can not rely on any such information being retained by the responder.

In contrast, a stateful communications protocol is one in which the responder maintains “state” information (session data, identity, status, etc.) across multiple requests from the same source.

HTTP is a stateless protocol. HTTP does not require server to retain information or status about each user for the duration of multiple requests.

Some web servers implement states using different methods (using cookies, custom headers, hidden form fields etc.). However, in the very core of every web application everything relies on HTTP which is still a stateless protocol that is based on simple request/response paradigm.

97. Describe the key advantages of HTTP/2 as compared with HTTP 1.1.

Answer: HTTP/2 provides decreased latency to improve page load speed by supporting:

Data compression of HTTP headers

Server push technologies

Loading of page elements in parallel over a single TCP connection

Prioritization of requests

An important operational benefit of HTTP/2 is that it avoids the head-of-line blocking problem in HTTP 1.

98. What is a “MIME type”, what does it consist of, and what is it used for? Provide an example.

Answer: MIME is an acronym for Multi-purpose Internet Mail Extensions. It is used as a standard way of classifying file types over the Internet.

Web servers and browsers have a defined list of MIME types, which facilitates transfer of files of a known type, irrespective of operating system or browser.

A MIME type actually has two parts: a type and a subtype that are separated by a slash (/). For example, the MIME type for Microsoft Word files is application/msword (i.e., type is application and the subtype is msword).

99. What’s the difference between GET and POST?

Answer: Both are methods used in HTTP requests. Generally it is said that GET is to download data and PUT is to upload data. But we can do both downloading as well as uploading either by GET/POST.

GET:

If we are sending parameters in a GET request to the server, then those parameters will be visible in the URL, because in GET, parameters are append to the URL. So there’s a lack of security while uploading to the server.

We can only send a limited amount of data in a GET request, because the URL has its max limit and we can not append a long data string to the URL.

POST:

If we are using POST then we are sending parameters in the body section of a request. If we send data after using encryption in the body of an http request, it’s quite a bit more secure.

We can send a lot more data using POST.

Note: GET is faster in the case of just getting data using a static API call in cases where we don’t have to pass any parameters.

100. What is the difference between window.onload and onDocumentReady?Answer: The window.onload event will not trigger until every single element on the page has been fully loaded, including CSS, images and/or other assets. The main disadvantage is that it might take a while before any code is actually executed. On the other hand, onDocumentReady executes code as soon as DOM is loaded.

101. Which is faster between Javascript and ASP?
Answer: Javascript is obviously faster. Why? Because Javascript is a client-side language and execution does not need assistance from the web server. In contrast, ASP is server-side therefore is slower.

0 Comments

Quick Enquiry



# 138, 3rd Floor, 6th C Main Road, 4th Block, Jayanagar, Bengaluru, Karnataka 560011



099866 78681



info@idigitalacademy.com

ABOUT US

Acquire IT and Digital Marketing Skills from Experienced Professionals and Real-Time Consultants. Demonstrate your skills on Live Projects and get placement support.

USEFUL LINKS

Home
About Us
Student Reviews
Blog
Contact Us

Digital Marketing Course Near Me

+91 99866 78681

Latest 101 Web Developer Interview Questions and Answers

Here are latest interview questions and Answers on web developer

0 Comments

Recent Posts

Categories

Quick Enquiry

ABOUT US

USEFUL LINKS