Web Development Interview Questions

1. What is the difference between HTML and HTML5?

HTML5 introduced new elements, APIs, and improved semantic markup compared to
the previous versions of HTML.

2. Explain the box model in CSS.

The box model refers to how elements are rendered on a webpage, consisting of
content, padding, border, and margin.

3. What is the difference between inline and block elements?

Inline elements don’t start on a new line and only take up the necessary width, while block elements start on a new line and take up the full available width.

4. Describe the “this” keyword in JavaScript.

“this” refers to the object that the function is a method of, or the object that is being constructed by a constructor function.

5. What are the different types of HTTP requests?

GET, POST, PUT, DELETE, and PATCH are the most common HTTP request methods.

6. What is the use of a namespace in Web Development?

A namespace is a simple global object that is used to hold methods, properties, and other objects in them. It adds ease of use via modularity, thereby, providing users with the ability to reuse the code and avoid naming conflicts.

7. What are the newly introduced input types in HTML5?

HTML5 has had multiple revamps in the past years, and the addition of input types has made it very easy to work with. Some of these input types are as follows:

  • color
  • date
  • Datetime-local
  • email
  • month
  • number range

8. How can page loading time be reduced?

There are many factors that affect the page loading time of a website. However, some methods can be implemented to reduce it drastically. They are given below:

  • Reduction in the image size
  • Removal of unnecessary widgets
  • HTTP compression
  • Reduction in lookups
  • Minimal redirection and caching

9. What are some of the new features that are introduced in CSS3?

CSS3 has brought about a lot of changes, making the overall framework more user-friendly and powerful. Some of the features that were added and are very popularly used now are:

  • Rounded corners
  • Animation
  • Custom layout
  • Media queries

10. What is Responsive Web Design (RWD) in HTML and CSS?

Responsive Web Design is a concept that is used to create web pages that can scale across multiple resolutions without any loss of information or screen tearing.

It automatically adjusts the structure of the web page based on the device it is viewed on to provide optimal viewing experience.

11. What is the use of grouping in CSS3?

Grouping is used in CSS3 to give users the ability to reuse and apply the same CSS style element to multiple HTML entities, using just one single declaration statement.

A simple example of grouping is as shown below:

#grouped g, ul { padding-top: 20px; margin: 1; }

12. What is the use of Webkit in CSS3?

Webkit is a rendering engine used in CSS3 to display HTML and CSS elements on various web browsers, including Chrome, Safari, and earlier versions of Opera. It provides the necessary functionality for rendering web content and ensuring consistency across different platforms. It is important to note that Webkit is just one of several browser engines, with others including Gecko (used by Mozilla Firefox), Presto (used by older versions of Opera), and EdgeHTML (used by Microsoft Edge prior to its switch to Chromium).

13. What is pagination? How can pagination be implemented?

Pagination is a simple sequence of pages on a website. These pages are interconnected and have similar content to display to the users.

A simple example is the page selector on an e-commerce site that allows the users to browse through the products present on multiple pages rather than scrolling up and down on one single page.

It can easily be implemented in CSS3 using the following code:

<div class="main_container">
<div class="pagination">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li class="active"><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>

14. What are the components of the CSS box model?

The CSS box model is used to represent an entity that encloses all of the HTML content into a box or a button element.

There are four components:

  1. Border: Denotes the padding and content around the border
  2. Content: Refers to the actual content to be displayed
  3. Margin: Refers to the top layer of the box element
  4. Padding: Defines the empty space around the element

15. What is the use of pseudo-classes in CSS?

Pseudo-classes are used as a popular technique in CSS to change the style of an element when this element changes its state.

There are numerous examples of when you use a pseudo-class:

  • For the style change when the mouse moves over the element
  • For out-of-focus animations
  • For providing styles for external links

16. What is z-index in CSS?

Z-index is a property in CSS that is used to define the order of elements on a web page. It works on the basis of order indices, where a higher-order element will appear before a lower-order element.

It only applies to elements that are positioned, i.e., those elements having the position attribute compulsorily.

Consider the following example:

div {
position: fixed;
left: 15px;
top: 20px;
z-index: -1;
}

17. What is the difference between cookies and local storage?

CookiesLocal Storage
Cookie data is accessible for both the client and the serverData is stored only on the local browser on the client-side machine
Cookies have an expiration time, and data gets deleted post expirationThere is no expiration in local storage unless the data is manually deleted

18. What are the various data types present in JavaScript?

JavaScript supports the following data types:

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

19. How can styles or classes be changed in elements using JavaScript?

JavaScript can be used to easily modify classes and styles in an element by making use of the following syntax:

Modify styles: document.getElementById(“input”).style.fontSize = “10”;
Modify class: document.getElementById(“button”).className = “classname”;

20. What is the meaning of the scope of a variable in JavaScript?

Scope refers to the accessibility of functions and underlying variables in the running environment. There are two scopes supported in JavaScript:

  • Local scope: Here, values and functions declared inside the same function can only be accessed within that function and not outside it. Consider the following example:
// Code present here cannot use localVariable
function myFunction() {
var localVariable = "This is a local variable";
// Code present here can use localVariable
}
  • Global scope:  If a variable is declared as global, it can be accessed from anywhere in the application. Consider the following example:
var globalVariable = "This is a Global variable";
// Code present here can use globalVariable
function myFunction() {
// Code present here can also use globalVariable
}

21. What is the purpose of the box-sizing property in CSS?

The box-sizing property in CSS determines how the total width and height of an element are calculated, taking into account the content, padding, and border box. The default value is content-box, but it can be set to border-box, which includes padding and border in the specified width and height.

22. Explain the concept of event bubbling and event capturing in JavaScript.

Event bubbling and event capturing are two phases of event propagation in JavaScript. Event bubbling is the default behavior where an event triggered on an element is first handled on the innermost element and then propagates to its parent elements. Event capturing is the reverse, where the event is first captured at the outermost element and then propagated inward.

23. Explain DOM (Document Object Model)?

DOM stands for Document Object Model. It is basically a cross-platform, language-independent API (Application Programming Interface) for XML (Extensible Markup Language) and HTML documents. To put it simply, DOM describes the logical structure of documents and how one can access and manipulate them. For example, here is an HTML document that illustrates the DOM hierarchy.

24. What is Type Coercion in JavaScript?

The term type coercion refers to the process of converting values from one data type to another, either automatically or implicitly. For instance, you could convert a number to a string, a string to a number, or a boolean to a number, etc.

Example: Number to String Conversion

<script>          
        // The Number 5 is converted to
        // string '5' and then '+'
        // concatenates both strings   
         const value1 = 5;
         const value2 = '50';
         var x = value1 + value2;
         document.write(x);
</script>

Output: 

550

The above example shows how JavaScript converted the number 5 into a string and concatenate the values together, resulting in 550.

25. What is the difference between <window.onload> and <onDocumentReady>?

It is true that both the <window.onload> and <onDocumentReady> functions perform tasks when the page has been loaded in the browser, however, the execution of the two functions differs slightly.

  • Window.onload: This event is triggered when a web page has fully loaded. In other words, it waits for the DOM and all the associated resources to load, and then executes code. DOM contains all HTML tags, like anchor tag, h1 tag, p tag, etc.
  • onDocumentReady: The “onDocumentReady” method, on the other hand, executes the code when the DOM has been loaded. It typically waits for HTML tags, anchor tags, etc., but not for images, videos, or other contents.

26. What is the difference between a <div> and a <span> in HTML?

<div> and <span> are both HTML elements used for grouping or containing other elements. The main difference is that <div> is a block-level element, while <span> is an inline-level element. Block-level elements create a line break before and after them, while inline-level elements do not.

27. Explain the concept of a callback function in JavaScript.

A callback function is a function that is passed as an argument to another function and is invoked or called at a later time or when a certain condition is met. Callbacks are commonly used for handling asynchronous operations or events in JavaScript.

28. Explain the concept of event bubbling and event capturing in JavaScript.

Event bubbling and event capturing are two phases of event propagation in JavaScript. Event bubbling is the default behavior where an event triggered on an element is first handled on the innermost element and then propagates to its parent elements. Event capturing is the reverse, where the event is first captured at the outermost element and then propagated inward.

29. Enlist some tricks to reduce the load time of a web application.

Some of the most popular hacks to reduce load time are:

  1. Save the images as a compressed file so that image size can be optimized to screen resolution.
  2. Remove every JavaScript file to reduce mobile data.
  3. Minify and combine CSS and JS to call them in the footer.
  4. Switch to asynchronous JavaScript.

30. State how HTML differs from XHTML?

Although, HTML and XHTML are known for writing web pages but HTML is extended version from SGML tagging. On the other hand, XHTML is just an application of markup language called Extensible Markup Language.

However, HTML usually has three components, i.e., start and end tag, elemental attribute tags, and content in text and graphics. In contrast, XHTML includes a single root element that constitutes only lower case elements whose values assigned should be nested and closed. They also need to round with quotation marks. Therefore, it comes down to a conclusion that XHTML is more expressive than HTML is more framed.