Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer : After collecting questions from many interviews. I came to search for those answer which is needed for the interviews question. These questions are very interesting which covers mostly HTML, CSS/ JavaScript, and jQuery, and Experience a couple of years. This is going to be very useful before anyone faces any interview.


In CSS when will you use a CSS float?

Ans –  The “float” CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it.

Q2 – While writing an error message what are all things do you need to take into consideration?

Ans –  Be Clear And Not Ambiguous

Be Short And Meaningful

Be Humble

Be Specific And Relevant

Don’t Use Technical Jargons.

Avoid Negative Words

Avoid Uppercase Text.

Give Direction to User

Explain what a Grid System is?

Ans –  There is nothing worse for an artist than a blank canvas. A grid system is a set of measurements a graphic designer can use to align and size objects within the given format. Although there are a few different categories of grid systems, there are no strict rules on what can or cannot be a grid. It’s up to you. Any guides that help you shape the final design are okay.

Q4 – What does is NaN Function do?

Answer –  The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value equates to NaN. Otherwise, it returns false.

isNaN(123) //false

isNaN(-1.23) //false

isNaN(52) //false

isNaN(0) //false

isNaN(‘123’) //false

isNaN(‘Hello’) //true

isNaN(‘2005/12/12’) //true

isNaN() //false

isNaN(true) //false

isNaN(undefined) //true

isNaN(‘NaN’) //true

isNaN(NaN) //true

Explain What is Information Architecture?

Answer –  Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design, architecture and information science to the digital landscape.

What is the difference between span & Div?

Answer –  The primary difference between a div and a span is their default behavior. By default, a <div> is a block-level-element and a <span> is an inline element. In other words, if you want to adjust a small portion of text and not break it out of the current line, you should use a <span>. If you need to modify a large division, the height, move an element, or contain other elements, you should use a <div>.

What is Mobile-First Design ?.

Answer – Responsive design starts on the desktop; that is, at the maximum required resolution, and then scales down to the smallest screen. Even though the content and layout contract to fit smartphones, the navigation, content, and download speeds are geared more for your traditional website.

Mobile-first design is similar to designing a mobile app and then adapting the layout that it can be viewed neatly on tablet and desktop devices without too many modifications. Your whole design and layout are based on providing an excellent mobile user experience: fast download speeds, rich media content to keep your target audience interested, easy touchscreen navigation, and so on.


Responsive design sounds good, we hear you say. Why should you risk a mobile-first design? Quite simply, the stats show that we have become addicted to surfing on mobile devices. Currently, 52.64% of the total traffic on the Internet is done via mobile phones, and by the end of the year experts from Zenith Media predict an increase of up to 75%. With this information in mind, it is essential to understand what mobile-first design is and what its benefits are. Unlike responsive design, mobile-first is about a complete mobile user experience: adapted app-like user interface, less text, larger fonts, fast download speed, video and audio, one call-to-action per page, short forms, etcetera. Additionally, mobile browsers shortly will have access to more of the smartphone features like camera, haptic feedback, voice detection, so that a mobile-first design will be able to provide a unique experience to put your site ahead of the competition and drive traffic.

Difference between bootstrap3 and bootstrap 4?

Answer – Bootstrap 3 Source CSS Files is LESS.

Bootstrap 4 Source CSS files Converted in SCSS. 

Bootstrap 3 has 4 grid system (col-xs-3, col-sm-3, col-md-3, col-lg-3).

Bootstrap 4 has 5 grid system (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3). Bootstrap 4 has removed the xs from the lowest break point. Therefore, (col-) covers all devices. 

Bootstrap 3 Offset class is like this (col-md-offset-4).

Bootstrap 4 has changed the offset class (offset-md-4). 

In Bootstrap 3 we are used this (.img-responsive) class for the responsive images.

Bootstrap 4 has changed the class for responsive image (.img-fluid). 

In Bootstrap 3 we are used (.input-lg) and (.input-sm) to increase and decrease the input size.

Bootstrap 4 has changed to (.form-control-lg) and (.form-control-sm) to increase and decrease the input size.

What is the difference between Body.Onload() & document.ready() ?

Answer- The main differences between the two are:

  1. Body.Onload() event will be called only after the DOM and associated resources like images got loaded, but jQuery’s document.ready() event will be called once the DOM is loaded i.e., it won’t wait for the resources like images to get loaded. Hence, the functions in jQuery’s ready event will get executed once the HTML structure is loaded without waiting for the resources.
  2. We can have multiple document.ready() in a page but Body.Onload() event cannot.

What are the Different JavaScript Types?

Answer- In JavaScript, there are two different kinds of data: primitives, and objects. A primitive is simply a data type that is not an object and has no methods.

In JS, there are six primitive data types:


Boolean, Undefined,  Number, Null, String, Symbol

What about Objects?

Objects are not a primitive dataType.

An object is a collection of properties. These properties are stored in key/value pairs. Properties can reference any type of data, including objects and/or primitive values.

What is the prompt box?

Answer – The prompt() method displays a dialog box that prompts the visitor for input. A prompt box is often used if you want the user to input a value before entering a page.

Note: When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed.

The prompt() method returns the input value if the user clicks “OK”. If the user clicks “cancel” the method returns null.

What is the difference between HTML & HTML5?

Ans – The biggest advantage that HTML5 has over its unnumbered predecessor is that it has high-level audio and video support which was not a part of the version specifications in the previous HTML. Other differences between HTML and HTML5:

SVG, canvas and other virtual vector graphics are supported in HTML5, whereas in HTML, using vector graphics was only possible by using it in conjunction with different technologies like Flash, VML, and Silver-light, etc.

HTML5 uses web SQL databases, application cache for temporary storing data, meanwhile, in HTML, only browser cache could be utilized for this purpose.

Another difference between HTML and HTML5 worth mentioning is that the former doesn’t allow JavaScript to run within the web browser (it instead runs in the browser interface thread) whereas the latter provides full support for JavaScript to run in the background (This is a possible courtesy to the JS web worker API of HTML5).

HTML5 is not based on SGML, and that allows it to have improved parsing rules which provide enhanced compatibility.

In HTML5, inline MathML and SVG can be used in text whereas this wasn’t possible in HTML.

Some of the deprecated elements that have now been dropped completely are index, no frames, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.

HTML5 supports new kinds of form controls, for example, dates and times, email, number, range, tel, url, search, etc.

There are many new elements introduced in HTML. Some of the most important ones are: summary, time, aside, audio, command, data, data list, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

What is $() in the jQuery library? 

Answer – The $() function is an alias of jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love its brevity. $() function is used to wrap any object into a jQuery object, which then allows you to call various method-defined jQuery objects. You can even pass a selector string to the $()function, and it will return a jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it’s quite basic, it is used to differentiate between developers who know jQuery or not.

 What is Grouping?

Answer – When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.h1, h2, h3 {background: red;}

What is “Semantic Element”?

Ans – A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.

Which command will give you a version of Jquery”?

Ans – The command $.ui.version returns jQuery UI version.

What is event bubbling?

Event bubbling is a term you might have come across on your JavaScript travels. It relates to the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event (a click, for example).

Why do we use metatag?

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload the page), search engines (keywords), or other web services.

What is a web worker?

Ans- When executing scripts on an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

What are webhooks?

Webhooks provide a mechanism whereby a server-side application can notify a client-side application when a new event (that the client-side application might be interested in) has occurred on the server. Webhooks operate on the concept of “event reaction” (don’t call me, I’ll call you if I have something new), and thus avoids the need for constant polling of the server-side application by the client-side application. Thus, rather than the client-side application constantly polling the server-side application to check for new events, the server-side application calls the client-side application (by invoking a client-provided webhook URL) anytime the server-side has something new to report to the client.

This is the core concept of the Webhook.

What is DOCTYPE!?

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language so that the browsers render the content correctly.

HTML5 is not based on SGML and therefore does not require a reference to a DTD.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

What is the Callback Function? 

Simply put: A callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’.

Is JavaScript case sensitive?

Ans: Yes!

A function getElementById is not the same as getElementbyID.

 What are undeclared and undefined variables?

Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered.

Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.

What is the ‘this’ keyword in JavaScript?

‘This’ keyword refers to the object from where it was called.

What is closure in JavaScript?

A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Lexical scoping

Consider the following example code:

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function

init() creates a local variable called name and a function called displayName(). The displayName() function is an inner function that is defined inside init() and is available only within the body of the init() function. Note that the displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

What is Hoisting in JavaScript?

JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.