Web Development Interview Questions and Answers

  • By
  • April 27, 2021
  • Web Development

  1. What are new semantic elements that provide better structuring in HTML5? HTML5 semantic elements are:

<header> – This tag used for header section of an document.  

<footer> – – This tag used for footer section of an document.  

<section> – This elements used for specifying section.  

<article> – This element used for specifying an article.  

<section> – This elements used for specifying section.  

<nav> – This elements used for navigation menu.  

<aside> – This element is used to view content other than the page content.  <details> – This tag adds additional details that a user can show or hide.  <figure> – This element can show illustrations, diagrams, photos, and code listings.  <figcaption> – It adds a caption for the image specified by a <figure> element.  <hgroup> – this tag is used for multiple heading for set of <h1> to <h6> elements.  

  

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

  1. What is a CSS selector?

A CSS selector is used to select an element that want to style. CSS selector can find or  select HTML elements based on their name, id, class, attribute, and more.  

  1. What is a pseudo-class?

A pseudo–class is used to set the style when an element changes its state or define a special  state of an element. Style can be used to style an element when mouse hover, visited or  unvisited links, etc.  

Syntax:  

selector:pseudo-class {  

 property:value;  

} 

Example: a:hover {color: blue;} or a:visited {color: green;} or a:focus {color: purple} 

  1. What are CSS selectors?

CSS selectors are a part of a CSS rule set. With CSS selectors, you can find HTML elements  you want to style. CSS selector select HTML elements with their id, class, html element,  attribute, etc.  

There are different types of selectors in CSS.  

Element Selector  

Id Selector  

Class Selector  

Universal Selector  

Attribute selectors  

Pseudo-Classes  

Pseudo-Elements  

Group Selectors

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

  1. What are the different types of CSS?

These are the different types of CSS.  

Internal – This stylesheet adds the CSS styles using the <style> attribute in head  section of html.  

Inline – This stylesheet adds the CSS directly to the HTML elements.  External – This stylesheet adds an external CSS file(.css) to the HTML document in  head section.  

  

  1. What is Grouping in CSS3?

Grouping in CSS3 is used to apply the same style to multiple HTML elements.  

We can use multiple selectors (Class/Tag/Id) within a single declaration. It works by  specifying all the selectors separated by commas.  

Example: #demo p, h2, .bg {padding:10px; margin:10px;} 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

  

  1. What are transitions in CSS3?

CSS3 transition is used to create a easy and fast animation effect. Using transition effect  your can change the value of a property; also work smoothly slowly for the given duration.  

We can use the following CSS properties for transitions. 

Transition-property, transition-duration, transition-delay and transition-timing-function.  Example: transition: width 2s 1s ease;  

  

  1. What is CSS Box Model and what are its components?

The CSS Box Model is about design & layout. It is a box that wrap around each HTML  element. It contains four core components.  

Margin – It is topmost layer of the box that clears an area outside the border.  Border – Border is around content & padding with width, style & color property  Padding – It clears an area or define spacing around the content.  

Content – It represents the content of box, where you can use images & text.    

  1. What are media queries in CSS3 and why do you use them?

Media queries are used to define responsive styles for devices of different shapes and sizes.  Using Media queries, web pages adjust to any devices like tablets, desktop, mobile devices.  It makes it easy to create responsive design. There are the powerful CSS tool can help to  adjust the Height, Width, Viewport, Orientation, and Resolution.  

Example:  

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

 .container {  

 display: block;  

 width: 100%;  

 }  

}  

  1. What is the use of float property in CSS?

With the help of float property, we can specify how an element should float. It is used for  positioning & formatting content that we can float it left or right. 

Float property have one of these values:  

 Left: The element floats left of its container  

 Right: The element floats right of its container  

None: The element does not float 

Example: div {float: left;}  

  1. How do you add comments in CSS?

CSS commented section of css is not displayed in browser. CSS comment is starts with /*  and ends with */ placed inside <style> element or inside .css file.  

  1. What is Z-index and how does it work?

CSS property z-index which is used to defines the order of web elements. Higher value  elements will appear top of any lower value element. You can give – or + value for z-index.  

You can apply z-index to any positioned elements, like position:absolute, position:fixed, or  position:relative. 

Example: div { position: fixed; left: 5px; top: 5px; z-index: -1;}  

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

  1. What are the core data types available in JavaScript?

Below is the list of data types available in JavaScript.  

Number  

String  

Boolean  

Null  

Undefined  

  

  1. What is the difference between undefined value and null value? Difference between undefined and null value are as below 

  2. If variable has declared but not assigned any value, a variable will have undefined  value.  
  3. If variable has assigned with null, it will define null value. 
  4. Data type of undefined is undefined but data type of null is an object. 4. So values of both are same but data types are different.  
  5. How do you change the style/class on any element from JavaScript? Below JavaScript will change the style of an HTML element.

document.getElementById(“input”).style.backgroundColor = “lightblue”;  Below JavaScript will change class of an HTML Element  

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

  

  1. What is Scope in JavaScript?

Scope in JavaScript is the accessibility of functions and variables in an application. There are  Local and Global scope in JavaScript.  

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

Example:  

function myFunction() {  

 var myLocalVar = “I’m Local”;  

 // code here can use myLocalVar  

}  

Global Scope – If we declare a variable outside function top of script/page, then we  can access it from any of the functions on that page.  

Example:  

var myGlobalVar = “I’m Global”; 

function myFunction() {  

 // code here can use myGlobalVar  

}  

  1. What types of comments does JavaScript support? 

We can insert comments in JavaScript code in two ways.  

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

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

  

  1. How do you distinguish between an undefined and undeclared variable?

Undefined refers to a variable which is declared but not initialized yet. An undeclared variable  is one which has a reference in the code without being declared.  

Example 

var num1;  

alert(num1); // undefined  

alert(num2); // accessing an undeclared variable  

  

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

  1. What are == and === operators in JavaScript and how do they differ?

Both ‘==’ and ‘===’ operators are Comparison Operators. But, the equality operator ‘==’ only  checks the value whereas the strict equality operator === checks for the values and types.  

  

  1. What is the mechanism to submit a form using Javascript?

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

document.forms[0].submit();

0 – index of the form  

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

  1. What is the mechanism to detect the operating system on the client machine?

The following JavaScript property detects the operating system version on the client  machine. It returns the OS version string.  

navigator.appVersion  

  1. What is the use of <this> keyword in JavaScript?

The ‘this’ keyword refers to the current object in the JavaScript program. It is used inside a  method for referencing the current variable or current object.  

  

  1. What does the <typeOf> operator do in JavaScript?

The ‘typeof’ operator gives back the type of a variable in the form of a string.  

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

  1. What is jQuery?

jQuery is a fast, lightweight, ‘write less, do more’ feature-rich client-side JavaScript. Jquery  greatly simplifies Javascript programming. Jquery is easy to learn.  

Purpose of Jquery is to make it much easier to use Javascript on your website.  It is open source and cross-platform – supports different types of browsers.  

  1. What is the starting point of code execution in jQuery?

In jQuery, $(document).ready() function is starting point.  

 It is executed when DOM is loaded. 

  1. What are the effects methods used in jQuery?

These are some effects methods used in jQuery:  

o show() – It displays or shows the selected elements.  

o hide() – It hides the matched or selected elements.  

o toggle() – It shows or hides the matched elements. It means, it toggles between the  hide() and shows() methods.  

o fadeIn() – It fades the selected elements by fading it to opaque. It means, it fades in the  selected elements.  

o fadeOut() – It fades the selected elements by fading it to transparent. It means, it fades  out the selected elements.  

o slideUp() – It slides Up the selected element with slide effect.  

o slideDown() – It slides Down the selected element with slide effect.  

o slideToggle() – It toggles between slideUp() & slideDown()  

  1. What is the use of html() method in JQuery?

The jQuery html() method is used to change the content of the selected elements. It can also  add html element in selected element. It means, it changes the content and html inside selected  element.  

Syntax:  

$(document).ready(function(){  

 $(“button”).click(function(){  

$(“p”).html(“<b>Welcome to Javascript!</b>”);  

});  

});  

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

  1. What is the use of css() method in JQuery?

The jQuery CSS() method is used to get or set style properties or values for selected elements.  Using css() method, you can get one or more style properties. The jQuery CSS() provides two  ways: 

Return a CSS property  

It is used to get the value of a specified CSS property of selected element.  

$(document).ready(function(){  

$(“button”).click(function(){  

 alert(“Background color = ” + $(“p”).css(“background-color”));  });  

});  

Set a CSS property  

This property is used to set a specific value for all matched element. 

$(document).ready(function(){  

 $(“button”).click(function(){  

 $(“p”).css(“background-color”, “blue”);  

 });  

});  

  1. What are the selectors in jQuery? How many types of selectors in jQuery?

Jquery syntax is made for selecting html element and performing some action on it. So, first you  need to select/find element from html page, that’s why required selector in jQuery.  

jQuery selector is used to query or find html element. There are all css selector used in jquery  as a jQuery selector  

There are many types of selectors in jQuery. Some basic selectors are:  

Html Element: It is used to select all elements which match with the selected html  element Name.  

#ID: It is used to select a single element which match with the selected ID  .Class: It is used to select all elements which match with the selected Class.  Universal (*): It is used to select all elements available in a DOM.  

Attribute Selector: It is used to select elements based on its attribute value.

  1. What is bootstrap?

Bootstrap is most popular Html, CSS, JavaScript framework for developing responsive  mobile first websites. 

 Bootstrap is completely free to download & use.  

 Bootstrap is a free front end framework for faster & easier web development.   Bootstrap includes Html & CSS based design templates for typography, forms,  button, tables, navigation, models, image carousels & many others as well as  JavaScript plug-in included  

 Easily creates responsive design.  

  1. What are the advantages of Bootstrap?

 Easy to use: basic knowledge of Html & CSS.  

 Responsive features: Bootstrap’s responsive CSS adjusts to phone, tables &  Desktops.  

 Mobile first approach: Mobile-first styles are part of the framework   Browser Compatibility: Compatible with all modern browsers  

  1. How many types of layouts are there in Bootstrap?

There are two types of layouts in Bootstrap.  

They are: 

 Fluid Layout  

 Fixed Layout  

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

  1. What are the different button styles in Bootstrap?

In bootstrap, there are different styles which we can use with the bootstrap button.  

.  

.btn-primary  

.btn-success  

.btn-info 

.btn-warning.  .btn-danger.  .btn-link.  

.btn-secondary  .btn-dark  

.btn-light

 

Author- Nahid Shaikh
 | SevenMentor Pvt Ltd.

Call the Trainer and Book your free demo Class for Web Development Nahid Shaikhnow!!!

© Copyright 2020 | Sevenmentor Pvt Ltd.

 

Submit Comment

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

*
*