Top 20 Web Developer Interview Questions and Answers (HTML, CSS, JavaScript, and DevTools)

Read Time:6 Minute, 36 Second

Welcome to Top 20 Web Developer Interview Questions and Answers. This article will help you prepare for the interviews and provide confidence boost that will help you get this awesome job.

Keep in mind that it’s really hard to guess exactly which questions will be asked during an interview; however, we will cover some of the most important aspects of HTML, CSS, JavaScript, and DevTools.

Not only are these questions likely to come up during an interview-a selection of questions will prepare you for “what if” scenarios based of code given.

Median Salary for Web Developer is $58,074.00 US Dollars*.

If you are interested in additional educational material my channel youtube.com/cobuman has over 300 videos that you can enjoy. Additionally, if you’d like to support me; you can do so through Patreon.com/cobuman.

1. What is the importance of Doctype in HTML?

Answer:

Doctype tells the browser which version of HTML/XHTML standard is used and how to render the page.

2. What is the difference between display: none and visibility: hidden?

display: none removes the element from the flow, allowing other elements to fill in.

visibility: hidden – only hides the element, but space is allocated for it on the page.

3. Consider the code; What font-size will have the text inside the <p> element?

Answer:

8px, because “em” units represent percentage of its parent. In this case it is a half of 16px.

4. What is the difference between sessionStorage and localStorage?

Answer:

sessionStorage is available only when a browser’s tab is opened.

localStorage survives on closing and reopening a browser.

5. What are data – attributes?

Answer:

Data – attributes are used to store custom data directly inside HTML tags. They are easily-accessible from CSS and JavaScript.

6. Explain the difference between Normalize CSS and Reset CSS?

Answer:

Resetting removes all the native styles provided by browsers.

Normalizing is just a correction of some common bugs.

For example:

sup and sub elements will work as usual after normalizing, resetting would make them look like plain text though.

7. What are sprites, what is their purpose?

Answer:

CSS sprite is merging multiple images into a single image.

It reduces the amount of WEB-requests and increases page speed.

8. What is SVG?

Answer:

SVG stands for Scalable Vector Graphics, it is used to show vector graphics on the page. The biggest benefit is that SVG-images don’t lose quality when zoomed or resized (unlike JPG).

You can easily change the size, color and animate SVG images. SVG’s also can be bundled in a SVG – sprite.

9. What are the new features of HTML5 standard?

Answer:

Added new semantic elements:

<nav>, <article>, <section>, <header>, <footer>, and <aside>

Added new form controls:

<calendar>, <date>, <time>, <email>, <url>, and <search>.

Better support for embedded media using <audio>, <video> and <canvas>.

10. What is a CSS preprocessor?

Answer:

CSS preprocessor is a tool which allows you to create CSS code much faster, in a more structured manner. Preprocessors extend the CSS functional by adding variables, mixins, partials, also allow to use operators inside the code.

11. What is microdata?

Answer:

Microdata is a set of additional HTML tags for specifying the additional semantic information to help the search engines read your site properly.

12. What tags are used to make a table?

Answer:

<table> For wrapping a table.
<th> This tag represents of the table heading.
<tr> Creates a table row that store the data elements.
<td> Represents column in a row.

13. What is the CSS Box Model?

Answer:

Box model represents a structured way to space elements in relationship to each other. It is made of margins, borders, padding, and content. When the page is being rendered, the browser shows each of the elements as a rectangular which can be styled using CSS.

14. Consider this code; What color will the text have?

Answer:

Blue, because !important overrides every other selectors, including inline added into a tag.

15. What is the reason for wrapping the entire content of a JavaScript source file in a function?

Answer:

This is a one of best-practices which creates a private namespace and thereby helps avoid potential name conflicts between different JavaScript functions and external libraries.

16. How would you inspect a hover state of an element in the devtools?

Answer:

To open it click the small :hov text in the top right corner of the styles pane.

17. How would you edit HTML in the devtools?

Answer:

Right click on the text you want to edit on the HTML pane.

Choose Edit as HTML.

Make your changes.
Press Enter.

18. What is the difference between “==” and “===” operators in JavaScript?

Answer:

The “===” operator behaves identically to the equality “==” operator, but more strictly, the types must be the same to be considered equal.

For example:

0 == ‘0’ // true

0 === ‘0’ // false

19. What kind of loops are in JavaScript?

Answer:

for – goes through an inner code a number of times

for/in – used for looping through the properties of an object

while – goes through an inner code while a specified condition is true

do/while – also goes through a block of code while a specified condition is true

20. What would be a result of this code?

Answer:

The result is a string in a console:

My pet’s name is Rumba

Even though the function was called, it’s declaration, the code works because of hoisting.

Bonus Questions and Answers!

21. What would be the output of the code? Explain your answer.

Answer:

Global scope = 1

Scope a = 2

Scope b = undefined

Global scope after launching function a() = 1

In the first log line x is obviously 1 because it was assigned 1 globally at the line var x = 1;

In the second line x is 2 because it is reassigned inside the function a()

Inside the function b() x is undefined, because it was declared but without any value.

At the fourth line the x is still 1 because local (functions’) scope doesn’t change the global scope.

22. What would this code show in the console?

Answer:

This code shows Uncaught SyntaxError: Unexpected identifier

We have two assignments in the IIFE:

b = 5;

and

var a = b;

a is a local variable because it is declared using var.

b is declared without the var and should’ve been visible from a global scope.

But we are using the strict mode, therefore b doesn’t need to be assigned to the global scope.

Editor notes:

Before going to an interview, please take time to learn about the company that you are applying with in order to be 100% ready for any questions that may come your way. All of the questions and answers listed are contributed by a professional front-end developer; however, keep in mind that is incredibly hard to predict exactly which questions will be asked during an interview. If you wish to collectively assist, you can contribute by providing feedback of your interviewing experience and web development expertise by commenting below.

If you are interested in commenting on each questions and answers; you can do so at cobuman.com website.