50 Web Developer Interview Questions (2020 Edition).

Web Advancement Interview

In this tutorial, we’ve listed down 50 web developer interview questions covering HTML5, CSS3, as well as JavaScript. These are the three key skills where the companies will certainly evaluate the prospects standing for the meetings.


Front end internet growth needs a solid understanding of many languages. And the scale of questions asked throughout the interviews could pass by beyond your assumptions. So you must expand your prep work and cover all the leading web technologies such as HTML/CSS/JavaScript/ AngularJS/Node. js.


Nevertheless, there are numerous aspects like Job experience, Versatility, Perspective that influence the selection procedure. Therefore, feel free to research for a return to layout where you can capably represent these affecting variables. Everything else rests upon you as well as the method you provide.


In this blog post, you’ll find 10 Concerns on HTML5, 20 Inquiries on CSS3, and also 20 Inquiries on JavaScript. By the way, another essential topic which you will not like to lose out gets covered in the below post.

Allow’s explore the essential Web developer interview questions.


10 HTML5 Meeting Questions.

20 CSS3 Interview Questions.

20 JavaScript Meeting Questions.


Web Developer Interview Questions– Part1.

HTML5 Interview Questions.

web questions

Questions-1. What Are The New DocType As Well As Charset In HTML5?

The DocType aspect communicates the HTML variation to the internet browser. It normally appears in the first line of code of an HTML page. Unlike the earlier versions/standards of HTML, DocType has obtained a simplified format in HTML5.

<!doctype html>

The CharSet is a brand-new meta tag characteristic in HTML5 which sets up the character encoding.

<meta charset= ”UTF-8″>

Questions-2. What All New Form Elements Got Introduced In HTML5?

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.


Questions-3. Which Of The HTML5 Elements Support Media Content?

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.
  • <embed> – It acts as a container for external applications.
  • <track> – This element defines tracks for video and audio.


Questions-4. What Are Various Elements That Provide Better Structuring In HTML5?

Following HTML5 elements focus on improving the structuring

  • <article> – This element allows to specify an article.
  • <aside> – It 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.


Questions-5. What Is SVG As well as Why Do You Utilize It?

SVG is a phrase for Scalable Vector Video as advised by W3C.

Its objective is to display the vector-based graphics over the Web.
The graphics use an XML layout.
SVG graphics are of higher quality as well as does not lose it even when resized.
All elements and also attributes of SVG assistance computer animation.


Questions-6. What Does Canvas Mean In HTML? As well as What Is Its Default Border Dimension?

Canvas is an HTML5 element which can attract 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.


Questions-7. Just How Does Canvas Differ From SVG?

Below are a few factors elaborating the distinctions in between Canvas and also SVG.

Canvas relies on the resolution whereas SVG doesn’t.
It does not allow occasion trainers whereas SVG does supply the support for event handlers.
Canvas is perfect for graphic-intensive games whereas SVG does not plan for video gaming.
It functions well for little making areas whereas SVG may carry out far better for large rendering locations like Google map.


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

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

<img draggable=”true”>


Questions-9. What Is HTML5 Web Storage?

HTML5 brought this new ability to store websites within the internet browser cache. This internet storage is not just faster than the cookies but safeguarded too. It can storing a huge quantity of information without endangering the performance of the site.

Also, note that the cached information is not need to for each server request. Instead, it obtains utilized only when the web page asks for it. As well as the web page which receives the information saved can access it.


Questions-10. What Is The Difference Between LocalStorage And SessionStorage Objects?

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.


Web Developer Interview Questions – Part2.

CSS3 Interview Questions.

web interview

Questions-1. Exactly How Does CSS3 Differ From CSS?

CSS3 is the most current version of CSS. It has actually presented a bunch of new tags to give a better customer experience. A few of the functions are rounded edges, animation, custom design, as well as media questions.


Questions-2. How Does CSS3 Support Responsive Web Designing?

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


Questions-3. What Is A CSS Selector?

A CSS selector is an expression adhering to the CSS policies and utilized to choose the element we want to style. As well as CSS selector phrase structure means just how we compose or make use of those selectors in the CSS editor

Please note that a CSS selector can aid you locate or select HTML aspects based on their name, id, course, attribute, and a lot more.

Questions-4. What Are The Different Types Of CSS?

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.


Questions-5. What Is An ID Selector?

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;}

< p id= “selector”>…< / p>


Questions-6. What Does The Class Selector Mean?

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 its style.

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

< div class= “sampleclass”>….< / div>


Questions-7. What Is The Difference Between An ID Selector And The Class Selector?

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.


Questions-8. What Is Grouping In CSS3?

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; }


Questions-9. What Are Child Selectors In CSS?

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; }


Questions-10. How Do You Make Border Rounded With CSS3?

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>.


Questions-11. What Is Webkit In CSS3? And Why Is It Used?

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 of CSS using the Webkit feature.

.box_shadow {

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

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



Questions-12. How Do You Enable Pagination Using CSS3?

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

<div class=”main_container”>

<div class=”pagination”>


<li><a href=”#”></a></li>

<li><a href=”#”></a></li>

<li class=”active”><a href=”#”></a></li>

<li><a href=”#”></a></li>





Questions-13. What Are Transitions In CSS3?

CSS3 transitions aid to develop an extremely simple and also rapid computer animation result. They not only give us control to change the worth of a residential property however additionally let it continue gradually for the given duration.

We can utilize the following CSS residential or commercial properties.

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

Questions-14. What Is CSS Box Model And What Are Its Components?

The CSS Box Model represents a box that confines every HTML element such as a text box, a menu or a button. It has primarily four core components.

  • Margin – It refers to the topmost 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.


Questions-15. What Are Media Queries In CSS3 And Why Do You Use Them?

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 to adjust the Height, Width, Viewport, Orientation, and Resolution.

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

    body {

        background-color: #ffffff;




Questions-16. What Are Pseudo-Classes In CSS?

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 {




Questions-17. What Is Using Float Residential Or Commercial Property In CSS?

With the help of float residential or commercial property, we can regulate the position as well as format of elements on a website.

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

Also, to note that it does not interfere with the aspects showing up in the past.

div {

    float:  left;



Questions-18. Which Property Do You Use To Modify The Face Of A Font In CSS?

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.

  1. The <@font-face> is a CSS rule that facilitates the use of custom fonts on a web page.
  2. 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;



Questions-19. How Do You Add Comments In CSS?

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


Questions-20. What Is Z-Index And How Does It Work?

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 ;



Web Developer Interview Questions – Part3

JavaScript Interview Questions


Questions-1. What Are The Core Data Types Available In JavaScript?

Below is the list of data types available in JavaScript.

  • Number
  • Object
  • String
  • Boolean
  • Function
  • Null
  • Undefined


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

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.


Questions-3. What Is The Difference Between Undefined Value And Null Value?

<undefined> Vs. <null> value

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


Questions-4. How Do You Change The Style/Class On Any Element From JavaScript?

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

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


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


Questions-5. What Is Namespacing In Javascript As Well As Where Is It Used?

Using global variables is a bad practice in a lot of shows languages consisting of JavaScript. However occasionally, it is not possible to prevent global variables. So JavaScript presents the idea of namespacing which restrains a part of the code and register it with an one-of-a-kind name.

A namespace is just an item in JavaScript that functions as a container for approaches, buildings, and other kinds. It urges modularity as well as reusability in a web application.


Questions-6. How Does JavaScript Manage Automatic Type Conversion?

As per ECMA Manuscript standard, JavaScript is vibrant in addition to weakly keyed in language with top-notch features which means– “A JavaScript function can accept various other functions as debates.”

Also, it does support auto-type conversion. Whenever an operator or a declaration does not obtain a worth of the anticipated kind, then the conversion takes place immediately.


Questions-7. What Are Different Types Of Popup Boxes Available In JavaScript?

JavaScript allows the following types of dialog boxes.

  • Alert – It just has a <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.


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

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 useful for knowing the choices of the visitors.


Questions-9. What Is Scope In JavaScript?

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



Questions-10. What Types Of Comments Does JavaScript Support?

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 /* */.






Questions-11. How Do You Distinguish Between An Undefined And Undeclared Variable?

Undefined refers to a variable which has declaration yet not booted up yet. Nonetheless, an undeclared variable is one which has a referral in the code without being declared.


var iExistButUndefined;

 alert( iExistButUndefined);  // undefined

 alert( iMNotDeclared);  // accessing an undeclared variable


Questions-12. What Are == And === Operators In JavaScript And How Do They Differ?

== – Equal to operator

== – Equal value and equal type operator

Both of the above operators belong 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.


Questions-13. What Relates JavaScript With ECMA Script?

ECMA Script is an additional technical name for JavaScript as it is likewise referred to as LiveScript. The existing JavaScript that you may see running in web browsers is ECMA Manuscript modification 6.


Questions-14. What Is The Device To Send A Kind Making Use Of Javascript?

We can call the complying with approach to send 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.


Questions-15. What Is The System To Detect The Os On The Customer Device?

The following JavaScript residential property gives back the operating system version on the customer machine. It returns the OS version string.



Questions-16. What Is The Feature Of Erase Operator In JavaScript?

The erase operator gets rid of all the variables and objects used on the web page. However it leaves the variables stated utilizing the var key words as is.


Questions-17. What Is The Use Of <This> Keyword In JavaScript?

The <this> keyword refers to the current object in the program.It is generally offered inside a technique for referencing the present variable or current object.


Questions-18. What Does The <TypeOf> Operator Do In JavaScript?

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


Questions-19. Just how Do You Make Generic Objects In JavaScript?

JavaScript supplies a brand-new operator to produce common things.

Adhere to the below example creating a generic item.

var obj =  new object();


Questions-20. What Does The “Defer” Attribute Do In JavaScript?

The <defer> is largely of boolean type. It postpones implementing a javascript till the web page finishes the parsing process.

Below is the example of JavaScript code deferring an example script.

<script src= “/mysample.js” defer></script>


Summary– Essential Web Developer Interview Questions

Planning for a web developer interview isn’t as very easy as it seems to be. If you want to prosper, after that it will certainly need a minimum of a moderate degree of understanding of all associated locations.

And that’s what we maintained believing in our mind until we generated the 50 essential web developer interview questions spanning across 3 core web technologies HTML5, CSS3, and also JavaScript.

In the end, we like to thank you for stopping by and desire you were able to repossess some expertise as well as sufficient confidence to face challenges head-on.







50 Web Developer Interview Questions (2020 Edition).

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top