Top 30 Web Designer Interview Questions and Answers for 2017

Web Designer Interview Question & Answers

Here are some of the best web designer interview questions and answers for job seekers. We are sure these questions and answers will help you out in your web designing interviews. The main intention to create this post is to make you aware of some latest web designing interview questions and answers. So that, you will update yourself with latest trends and can learn new things which happen in the market.

1.What are the leading platforms or languages used for web design?
The main language or platform used for web design are:

  • HTML – Base template
  • CSS – Styling
  • JavaScript – Functionality
  • PHP – Server-side scripts

2. How do you fix an Image as a background on the web pages?

To set an image as a background on the web page, use the code as shown below.

< /head> tag.
 < body background=”picture.gif” >

We can also have the background image fixed, so the image does not move when we are using the scroll bar in the browser. To do this add the BGPROPERTIES tag as given here.

 < body background=”picture.gif” bgproperties=”fixed” >

3. What is the Responsive design on a web page?

Responsive design is an approach to creating sites to provide an optimal viewing and interaction experience. The view of the website should get adjusted. It focuses on easy navigation of site with a minimum of scrolling, panning and resizing across all devices such as desktop, mobiles or tablets.

Bootstrap is the most popular CSS, HTML and JS framework used for developing responsive web design.

4. How will you align pictures so that they are one above the other?
We can use the align statement in the IMG SRC tag as shown here.

< IMG SRC=”” align=top >

Also, instead of align=top you can do align=middle, and align=bottom.

5. Explain what is the difference between “display: none”  and “visibility: hidden”?

These both are style properties
Display: none: It eliminates the element entirely from the document. It does not take up any space, even though the HTML for it is still in the source code.
visibility: hidden: It hides the element, but it always takes up space in the layout.

6. When will you use CSS float in CSS?

In CSS, we use CSS float as an element which is placed along the left or right side of the page, allowing text and made other factors to wrap around it.

7.Explain how you can integrate CSS file into your webpage?

To integrate CSS file along with HTML files, you need to integrate it after the <head> tag using “Link” property.

<head><Link REL=STYLESHEET HREF= “filename.css”Type=“text/css”></head>

8. List out some of the JQuery function used for webpage designing?

Some of the JQuery function used for web page designing including:

  • Image replacement gallery
  • Accordion#1 and Accordion#2
  • Entire block clickable
  • Styling different link types
  • Animated hover effect
  • Chainable transition effect
  • Simple slide panel
  • Collapsible panels
  • Simple disappearing effect

9. As a web-designer while declaring “delete” switch what would be your preferred color?
Make the “Delete” button more noticeable by using colors like Red, particularly when you have to show two button side by side. Red is a sign of warning so that it will help the user to draw their attention.

10. Explain how a developer can learn about the web design?

A Web developer can master on web design by following these tips.

  • Visit website alike “Smashing Magazine” to get better idea of web design
  • Another website named “Best Web Gallery” can also help to get insight of quality design and layouts
  • Try to get practice with some tools like Adobe Illustrator
  • Build dynamic website using PHP and MySQL
  • Learn basic languages like CSS, HTML, JavaScript, PHP or jQuery

web designing course


11. While writing an error message what are all the things you have into consider?

You need to take following things in consideration

  • Mention the error clearly so that the viewer knows what to correct
  • Don’t use negative words
  • Give user a hint or link to solve the error

Fix the blame on yourself and not on the user

12. What is a CSS file? For what purpose it is used for?

CSS is called “cascading style sheets.” It is mainly used to open web pages. It is also used for controlling web pages which include font styles, font sizes and color combinations that are necessary for the webpage. CSS files make changes globally as any change in a CSS file can also lead to an overall change in the website appearance. This means that any change in a specific CSS file can make automatic corrections to the pages that use that particular CSS file and will display the changes.

13. Is CSS case sensitive?

Ans: No, CSS is not a case-sensitive. It is case insensitive under most of its control except for document markup language which is beyond its control.

14. What is an external style sheet? How can you link it?

An external stylesheet is a document/file/template that contains style and appearance data which you will use to link the HTML document, and a huge number of HTML documents can be connected using external style sheets. The document can be linked using the LINK tag below the HEAD element. Files carrying style information must have a proper extension. For example, style.css. The proper syntax for connecting the file using external style sheet is

<head><link rel =stylesheet href=”style.css” type=”text/css”></head>

15.How do you create a webpage that someone can simply just send me a mail by just clicking on text with the subject?
We can apply this by using the mailto command in an AHREF link tag shown here:

< A href””> click here to mail us</a>

16. What are the different types of JavaScript?

There are six types of JavaScript:

String, null, undefined, Object, Boolean and number. Objects include array, functions, and regular objects. Numbers may consist of real numbers, integers and also add special values such as NaN and infinity. Strings contain empty strings, “,“

17. What is a negative infinity in JavaScript?
In JavaScript, Negative infinity is a number which is created by dividing a negative number by zero. The number will return undefined if utilized by negative infinity.

Example: number.negative_infinity.

18. What does the NaN function do?
If the argument is not a number Return ‘true’.

19. What does “1”+2+4 return?
In the question it contains strings and + sign which is typically used for catenation, the answer delivered will be 124.

20. What is <!DOCTYPE>? Why is it essential to use in HTML5?

A <!doctype> or document type declaration is an instruction that is used to indicate the version of HTML. <!doctype> is usually initialised before the <html> tag. The <!DOCTYPE> tag does not have an end tag, and it is not case sensitive.

The <!doctype> is an important in old version of HTML4.0.1, because HTML 4.0.1 was based on a standard generalized markup language (SGML) and indicating the <!doctype> helped in the process of document type definition (DTD). Whereas HTML5 is not dependent on SGML and no data type definition is required. Hence, in HTML5 it is not required to indicate <!doctype> at the beginning.

21. What is a prompt box?
A prompt box is a pop-up box which allows the user to insert the required inputs. This can be performed by giving a text box. The prompt box can also have the ‘OK’ and the ‘cancel button’ to proceed with the input data entered to execute the action.

22. What is the primary difference between an alert box and a confirm box?
An alert box is a pop-up box that has only one element. That is an OK button. While the confirm box has two switches such that the OK and the cancel button.

23. How many H1 tags will you have on the single web page? Does it even matter?

The page only have one H1 element except there are ARTICLE or SECTION elements, in this case, each of those can have a single H1 of its own.

The H1 tag is very important for the search engines and other machines which recorded the web page’s code and understand its content. The H1 of an article or section and a document is considered to be its title or main heading. Not using H1 elements properly will impact the website’s SEO performance.

24. What are the new media elements that are included in HTML5? Why is canvas used in HTML?
The new media elements include:

  • <source>: To determine the media sources of various media elements that are set inside the webpage as video and audio media.
  • <video>: For multimedia contents that include movies, video clips or any other types of video streams.
  • <audio>: For multimedia contents, sounds, music, and different types of audio streams.
  • <canvas>: We can use canvas element in HTML to add various components together.
  • <track>: To set the text tracks that are applied to different media players such as mp3 players.

25. What is the advantage of local storage in HTML5?

Before the coming of HTML5, the local storage was used to be connected with cookies. Cookies were not beneficial for usages that include a vast amount of data. This was moved on from server to server and therefore resulted in a very slow and inefficient website performance. But in HTML5 data is not passed in every subsequent server and is applied only when asked. Hence, it can be possible to store huge amounts of data by itself and still do not affect the website’s performance. Such records are stored in various areas of the site, and the website can access most of the data stored by itself.

26. How many HTML tags to be used for the simplest of web pages?

The simplest of webpages should contain 8 tags, in pairs of 4.




Simple webpage







27. How to Reduce a Page’s Loading Time?

Some of the best ways to Reduce a Page’s Loading Times are removing unnecessary widgets, HTTP compression, reducing image size, etc.

Web Designing Certification Course

28. Define the difference between cookies, sessionStorage, and localStorage?
Cookies are small text files that websites place in a browser for tracking or login purposes. Meanwhile, localStorage and sessionStorage are new objects, both of these are storage specifications but vary in scope and duration. localStorage is permanent and website-specific whereas sessionStorage only lasts as long as the duration of the longest open tab.

29. How to add video and audio in HTML5

 We can add video in html5 like below:

<video width=”320″ height=”240″ controls=”controls”>

<source src=”pcds.mp4″ type=”video/mp4″ />

<source src=”pcds.ogg” type=”video/ogg” />


And audio as follows:

<audio controls=”controls”>

<source src=”song.ogg” type=”audio/ogg” />

<source src=”song.mp3″ type=”audio/mpeg” />


30.What is the difference between HTML  and HTML5?

HTML5 is the latest version of HTML. It includes various features such as date select function, placeholder, video and audio modifications, 2d and 3d images, Canvas, and also an added local SQL database. There is no need to do external plugins like Flash player or other libraries. The main difference between HTML and HTML5 is that neither video nor audio is a constituent of HTML, whereas in HTML5 both can be considered as integral parts.


We hope that learning web designing interview questions and answers like above will be useful for job seekers and it will give some ideas to face web designer interviews with confidence. Do you want to add any other web designing interview questions in this list? Kindly share your questions in the below comment section and we will try to include it. If you like this post, then do share on Social Media for others to learn and explore.


Leave a Reply

How to Start a Career in PHP in India?
Start a Career in PHP in India