Web Designing Interview Questions and Answers
Last updated on 04th Jul 2020BlogInterview Questions
These Web Designing Interview Questions have been designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of Web Designing . As per my experience good interviewers hardly plan to ask any particular question during your interview, normally questions start with some basic concept of the subject and later they continue based on further discussion and what you answer.we are going to cover top 100 Web Designing Interview questions along with their detailed answers. We will be covering Web Designing scenario based interview questions, Web Designing interview questions for freshers as well as Web Designing interview questions and answers for experienced.
1. What is web design?
Web design can be defined as a process in which a web layout is imagined, planned and finally created in the form of electronic files that help to direct the proper color, fonts, images and graphics together in an interactive yet attractive web format.
2. What is a CSS file? For what purpose it is used?
CSS is called “cascading style sheets”. It is mainly used to open and control web pages. It is usually used for controlling web pages which include font sizes, font styles 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 certain CSS file can cause automatic changes to the pages that use that certain CSS file and will display the changes.
3.Is CSS case sensitive?
No, CSS is not case sensitive. CSS is case insensitive under most of its control except for document mark-up language which is beyond its control.
4. What is the external style sheet? How can we link it?
External stylesheet is a template/document/file which contains style and appearance information which can be used to link the HTML document and a large number of HTML documents can be linked using external style sheets. The file document can be linked using the LINK tag under the HEAD element. Files containing style information should have a suitable extension. For example, style.css. The proper syntax for linking the file using external style sheet is <head><link rel =stylesheet href=”style.css” type=”text/css”></head>
5. How do I make 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 mailto command in an AHREF link tag given below:
< A href mailto:email@example.com?subject=enquiry””> click here to mail ABC</a>
6.How to align pictures so that they are one above the other?
By using the align statement in the IMG SRC tag.
<img src=”abdc.gif” align=top>. Align can also be modified as align=top, align=middle, align=centre etc.
7. What are the possible values for “position”?
The type of positioning used for the webpages can be determined by using the “position” element. These include static, relative, fixed, inherit and absolute.
10. What does the NaN function do?
Return ‘true’ if the argument is not a number.
11. What does “1”+2+4 return?
Since the question contains strings and + sign is usually used for catenation, the answer returned will be 124.
Usually to convert the number in their different bases use the parseInt() function. This function parses a string and returns a function. The first parameter is the number and the second parameter is the base to be changed. For example: to covert a hexadecimal number to a decimal number we use this function as (“3F”, 16).
13. What is a prompt box?
A prompt box is a popup box that allows the user to enter the required inputs. This is done by providing a text box. The prompt box can also have the OK and the cancel button to proceed with the input entered to execute the action.
14. What is the basic difference between an alert box and a confirm box?
An alert box is a popup box that has only one element. That is the OK button. While the confirm box has two buttons the OK and the cancel button.
15. What is the work area in Photoshop?
The Photoshop work area has many features:
1. Menu bar:
This is where the user can select most of the functions and commands and features in Photoshop.
2. Drawing area or drawing palette:
This is the area where the image to be worked upon appears in Photoshop.
3. Options bar:
Shows a wide array of different tools. This contains specific features that can change the tools used. This changes the properties of tools as each option is selected.
4. Lasso option bar:
Tools for creating different images can be selected from this function. This is a toolbox for the different tools available.
To modify and manage different images available. There are five variations of palettes available in Photoshop.
6. Palette well:
Used to organize different palettes while working or doing a project.
16. What is the difference between HTML5 and HTML?
HTML5 is the newer version of the basic HTML that includes various other properties such as placeholder, video and audio modifications, canvas, 2d and 3d images, date select function and also an added local SQL database. This also enables the webpage to reduce the use of external plugins such as Flash players or any other libraries.
17. What is <!DOCTYPE>? Why is it necessary to use HTML5?
The <!doctype> is an element used to indicate what type and version of HTML are been used. <!doctype> is usually initialised under the <html> tag. This also does not have an end element and is not case sensitive. The <!doctype> is more important in older versions of HTML, such as the version 4.0.1 since indicating the <!doctype> helped in the process of document type definition (DTD). This is because HTML 4.0.1 was based on standard generalized markup language (SGML). This is not the same case as for HTML5 since that is not dependent on SGML and hence no data type definition is required. Hence, in HTML5 it is not necessary to indicate <!doctype> at the beginning.
18. How many markup elements do you know used in HTML5?
- There are many markup elements, these include:
- <article>: Specifies the self-contained and independent content. This includes a news article, a blog post, a forum post and other elements that could be used to share and distribute from the rest of the site.
- <aside>: Used to indicate the aside content from the main content. The aside content should be related to the outside content.
- <bdi> : For elements that should not be bounded by the text direction of the parent elements.
- <command>: A checkbox, a radio button, or just a simple button can be used as a command.
- <details>: To describe the details about the document and parts of the document.
- <summary>: A caption or a summary inside the details of the document or parts of the document.
- <figure>: For grouping a section or a stand-alone part of a web page. This can include an audio or a video.
- <figcaption>: To edit the caption of the figure selected. Used to give names of the figure selected.
- <footer>: Found at the end of the bottom of a page of the document. The footer information may include the author’s information, the page number, the date of the document, the contact information and the copyright information and details.
- <header>: Found at the top of the webpage could include various buttons like navigation and also information about the website.
- <hgroup>: Used to set the heading size of the webpage. The largest id for the main heading while the rest are all subheadings. The heading size varies from <h1> to <h6>. This constitutes the hgroup.
- <mark>: Used for texts that should be highlighted.
- <meter>: Used for measurement purposes. Also done when the maximum and minimum values are known.
- <nav>: Used for navigational purposes or for a section of the webpage that requires navigation.
- <progress>: To state the work progress of a webpage.
- <ruby>: For ruby annotations or foreign languages and their symbols.
- <section>: For a section in the document. This includes headers, footers, chapters or any other subsections of the document.
- <time>: For defining the date, time or both.
- <wbr>: For depicting word break or for the areas where there is a new line or a paragraph.
19. What are the new media elements that are included in HTML5? Why is canvas used in HTML?
- The new media elements include:
- <audio>: For multimedia contents, sounds, music, and other types of audio streams.
- <video> : For multimedia contents that include video clips, movies or any other types of video streams.
- <source>: To define the media sources of various media elements that are defined inside the webpage as audio and video media.
- <track>: To define the text tracks that are used in different media players such as mp3 players.
- <canvas>: We can use the canvas element in HTML to add various elements together.
20. What is the use of local storage in HTML5?
- Before the coming of HTML5, the local storage was used to be associated with cookies. Cookies were not beneficial for usages that include a large amount of data. This was passed on from server to server and hence resulted in very slow and ineffective website performance. This is not the same case in HTML5 as data is not passed in every subsequent server and is used only when asked.
- Hence, it can be possible to store large amounts of data by itself and still do not affect the website’s performance. Such data is stored in different areas of the website, and the website can access most of the data stored by itself.
21. What is the basic difference between HTML elements and tags?
The main difference between HTML elements and HTML tags is that elements are used to communicate with the website on how to render the information. They are represented within <>, these form the HTML tags. Tags usually come in pairs and surround the text.
22. What are the limitations seen when serving XHTML servers?
One of the biggest drawbacks is the poor browser support that the XHTML provides. Internet Explorer and various other browsers cannot parse XHTML as XML. Thus, it is not as extensible as it was promised to be. There can also be a large number of other drawbacks. You can also define those problems.
23. What is the difference between standard modes and quirk modes?
Quirks mode is a defined compatibility mode that is different from browser to browser and usually does not promise efficient use of the browser. Standard mode is something that is defined by a user, and the behavior is as shown by the CSS and HTML specifications.
24. How many HTML tags should be used for the simplest of webpages?
It is one of the basic question from web designer interview questions.The simplest of webpages should contain 8 tags, in pairs of 4.
- Simple webpage
25. What is the difference between linking to an image, a website and an email address?
To link an image you use the <img> tags. In this, the user has to define the image source and its attributes through the src tag. For hyper-texting or for linking the different parts of the website, using <a> which is also called the anchor tag. The link is usually specified in the href attribute. The href attribute is also called as hypertext reference and is used to refer the formed link back to the source. The text to be linked should be placed in between the anchor tags. For example: <a> text linked <a>.
26. Why do you want to be a web designer?/What makes you want to become a web designer?
- The interviewers often ask this question to see whether you really want and love this job.
- So, no matter whether you plan to tell a story or list your reasons, just try to show your passion and love for web design. Moreover, be mindful of maintaining positive body languages.
27. How do you handle pressure and tight deadlines?
- This question is asked to see whether you have your own ways of handling pressure effectively. Living in this fast-paced and high-pressure society, the ability to overcome hardships and handle stressful situations is very important.
- Here it is best to illustrate several effective techniques that you use to handle pressure and tight deadlines. An example or two of a situation where you used these techniques is also helpful.
28.How long do you plan to stay with us?/How long did you work in the last company?
- The interviewers often ask this to test your loyalty to the company.
- So, if you’ve worked in the last company for a very long time,They may naturally think you will also be loyal to their company. Of course, you may have changed companies frequently in the past few years. Be sure to have a good reason why. Maybe these were short-term contracts, or you moved. Always be honest but never speak poorly of a previous employer.
- If you would rather not discuss a specific company at which you worked but did not have a good experience, simply disregard it from your resume.
29.What is your expected salary range?
- This question is one of the must-have questions in the junior web designer interviews. Interviewers just try to know your requirements about their web design position through this question.
- If you are a newbie, this question might be difficult for you to answer. It is best for you to research average salaries for new web designers in advance, so you are prepared to answer the question. You want to be careful not to ask for a salary that’s too high — you might not be taken seriously. Too low and it will appear that you lack confidence in your abilities.
30. How would the developers/project managers you’ve worked with describe you?
- These questions are asked to see whether you can communicate and collaborate with others smoothly.
- When answering, be sure to highlight your collaboration and communication skills. You should let the interviewers know that you are a team-player who can effectively work through challenges amicably and professionally.
31. For what reason will you use CSS float?/In CSS when will you use CSS float?
It is often used when you want a page element to be published to the right or left and make other elements wrap aroundt
32.What tools do you use most when designing a web/app design?
- Some companies or design studios will ask this question to test your language and communication skills, as well as to determine if you are familiar with common tools of the trade.
- The best approach to answering this question is to discuss common design tools, such as Sketch, Photoshop, Figma, Mockplus and Mockplus iDoc, making them know that you are always open to using any useful tool and you are willing to learn new things at any time.
33. How do you reduce a page’s loading time?
- You can expect one or two questions regarding to troubleshooting issues in real design cases. This question gives you an opportunity to shine and really impress the interviewers.
- Regarding the question specifically, there are many ways to minimize website loading times, such as compressing images, removing unnecessary components, using a loading animation, etc.
34. How do you incorporate current design trends in your work?
- This question tests the currency of your skills and whether or not you have a desire to keep learning and updating your skills.
- The best way to prepare for this question is to search and read lots of web design trend articles, choose several hot topics and write a good draft of your answer for your interview. Describing your own ideas with good project examples is ideal.
35.Explain difference between number list and bulleted list?
In short, There are a number of questions an interviewer can ask to test your web design knowledge and skills. No matter what the question is, always keep calm and answer it clearly, succinctly, accurately and logically.
36. What are the responsibilities of a web devpeloer?
Best to answer it with your own thoughts.
37. Difference between div and span?
Div is used to block the particular row and span is used to block particular space for the word,content an image.
38. List types of stylesheets in CSS?
- There are three types of stylesheets present in CSS.They are,
- Inline styleshee
- Internal Stylesheet
- External stylesheet
39.Difference between implode and explode functions?
Implode is used to join array to string.Explode is used to split string to array.
40. what is the use of in_array() in PHP?
In PHP the in_array() is used to check whether the given value is exist in an array or not.
41. When to use mysql_pconnect ?
Mysql_pconnect is used to close the database connection once the request has been processed.
42. List the types of errors in PHP.
- Mainly there are 4 types are error occur in PHP ,they are,
- Notice error
- phrase error
- Warning error
- Fatal error
43. Difference between array_merge and array_combine.
Array_merge is used to merge two arrays and array_combine is used to combine keys from one array and values from another array
44. Mention 5 array functions in PHP
45. what are the sort() available in PHP?
There are many sort() functions available in PHP.They are,
46. what is the default port for MySQL?
The default port is 3306.
47. How to get the current version of MySQL?
We can use SELECT VERSION(); to get the current version of MySQL.
48. What are the types of table present in MySQL?
49. What are the triggers are available in MySQL?
There are 6 triggers available in MySQL.They are,
- Before Insert
- After Insert
- Before Update
- After Update
- Before Delete
- After Delete
50. Different types of join in MySQL?
- Inner join
- Right join
- Left join
- Full join
- By using document.getElementById(‘id’).id;
53. What are the types of pop up available in js?
- There are 3 types of popup.
- By using new keyword,
- Var I = new Object();
- There are 3 types of errors.they are
- Logical Error
- Runtime Error
- Loadtime Error
57. What is the use of count() in PHP?
- The count() is used to count the number of elements in an array.
58. Mention the different types of selectors used in jQuery.
- Xpath selector
- Custom Selector
- CSS selector
59. Define the use of ENUM in MySQL.
ENUM is an object of string which used at the time of table creation and that values should be used at the time of insertion.
60. Mention the string types in MySQL.
- There are many types of string are used in MySQL ,some are,
61. List some drivers in MySQL.
- JDBC driver
- C WRAPPER
- Python driver
- Php driver
- ODBC driver
62. What is the use of distinct in MySQL?
- Distinct is a keyword used to remove the duplicate value from table while selecting values.
63. In MySQL how to display first 10 rows?
- <Select * from table limit 0,10;
64. What is the use of array_keys() in PHP?
An array_keys() is used to get the key of each array element.
65. What are some leading languages or platforms used for website design?
- HTML – HyperText Markup Language for Base template
- CSS – Cascading Style Sheet for Styling
- PHP – Personal Home Page for Server-side scripting
are the main language or platform used for web designing.
66. What is HTML?
HyperText Markup Language (HTML) is the most influential markup language for building web pages, websites or anything that is displayed in a browser.
67. How to fix image in the background?
To do so, point the body background with the image name as mentioned below:
- < /head> tag.
- < body background=”image.gif” >
You can also have the BG image fixed, so the image doesn’t move when you use the scroll bar in the browser. For doing this, you need to add BGPROPERTIES and tag as given below:
- < body background=”picture.gif” bgproperties=”fixed” >
68. Explain the difference between “display: none” and “visibility: hidden”?
- These both are style properties.
- display: none: This doesn’t allocate any space and removes the element entirely from the page which means the does not appear at all though it remains in the source code.
- visibility: hidden: The tag is not visible (hidden) on the page but the space is allocated unlike display:none
69. What is doctype?
Document type declaration <!doctype> is an instruction given to the browser to intimate about the HTML v ersion. It is not case sensitive and is usually written at the beginning before the <html> tag, and it does not require end tag. It is important in the old versions of HTML, whereas for HTML5 is not mandatory to declare it in the beginning.
70. How do you integrate CSS file into your webpage?
- You can integrate CSS with HTML Files, you have to add the file after <head> tag using a property called “link.”
- Say example,
- <head><Link REL =STYLESHEET HREF= “filename.css”Type=“text/css”></head>
71.What is white space and how does it affect content on the web? What are some of the principles of “gestalt”?
- White space in graphic design is any area left intentionally blank. It doesn’t have to be white. Both in web design and other media white space can be efficiently used to visually separate or group elements, to draw attention to a specific element, to reinforce the content layout or grid. Sometimes, white space is also used purely aesthetically to create visually interesting compositions.
- Gestalt principles are part of the theory of visual perception. They deal with the mind’s ability to “see” things that are not explicitly visible, by subconsciously combining shapes, finding similarities, completing compositions of physically disconnected elements. A few of the principles commonly used in design are:
- Similarity – the human mind perceives elements with similar features (either in color, shape, size or combination of the three) as related, meaningfully connected or grouped together. This is especially useful in navigation systems design and application toolbars;
- Proximity – similarly to the similarity principle, elements which are placed close to each other are considered grouped, related, or parts of a whole. This is a building principle of layout design. It’s especially important when designing pages with large amounts of varied content (like the home page of a news website or application)
- Closure – when faced with a familiar looking object which is incomplete in its visualisation (parts of the image are missing) the mind automatically “completes the picture” or fills in the blanks and effectively sees the image as if it was fully displayed. This is a principle often used in logo design. Using the closure principle can make an element more interesting to look at (as the user’s mind “works” to complete the element) which makes the design more memorable;
- Figure-ground relation is the tendency to mentally separate “objects” from “backgrounds” based on combination of color, shape and past experience. When properly used in graphic design, this principle directs the user’s attention to important elements of the composition;
- Common fate – elements moving synchronously in tandem are often conceived as grouped or as parts of a single object. Common fate can be useful in interaction design;
- Continuity – the mind’s ability to see connections and follow one path or another based on similarities and to follow lines past their end points. This principle can be used in logo design to generate interest. It can also be used when buildi
72.When do you use JPEG compression and when would you prefer PNG instead?
- Different image compression formats have different purposes with different compression methods.
- JPEG compression reduces the image size by finding areas of a similar color; the higher the compression level, the more aggressively it looks for such areas leading to a loss of visual information and the generation of artefacts at the edges of the compressed areas. This compression is effective for photos, drawings, gradients, most illustrations and other colorful, rich images. JPEG doesn’t work as well for screenshots, simple UI elements, flat icons, schematics, and it is especially bad for text.
- PNG compression works by reducing the number of used colors. Depending on the level of compression this could lead to slight loss of color shades. PNG is great for logos, icons, signs, images containing text, for simple illustrations, UI elements and screenshots. Unlike JPEG, it also allows images to have transparent areas. PNG files are usually larger than JPEGs and don’t provide good compression for photos and complex, colorful images and gradients.
73.As a website specialist while using “delete” button what color would you like to prefer?
- Make the “Delete” link/button more eye-catching by using color like Red, mainly when you need to indicate two catch one next to the other. Red is an indication of alert, with the goal that will help the client to draw their consideration.
74. What is the significant sign that your site isn’t responsive or having issues?
- Horizontal bar presence in desktop or mobile screens is the main sign that site is having responsive mistakes and will become the reason of fail check or testing device individually.
75.What are the new media components that are incorporated into HTML5? Is canvas used as a part of HTML?
The new media components include:
<audio>, <video>, <source>, <track>, <canvas>.
76. What are the confinements when serving XHTML pages?
The biggest problem that we are facing currently is the poor browser support. Web Explorer and various other client operators can’t parse XHTML as an XML. It isn’t the extensible language it was guaranteed to be. There are numerous different issues. Take your pick.
77. Should device width have any impact on the font-size of the site content?
Indeed on desktop screens, as they generally bigger on the other hand cell phones have smaller screen sizes. The designer needs to consider the way that clients are considerably nearer to the mobile screens instead of laptop or desktop screen separately. So it is prescribed to use smaller text dimensions for the mobile screen gadgets.
78.How would you scale route in Mobile Screens?
In Mobile Screens numerous alternatives are used possibly you can hide the desktop menu and utilize selectable navigation, or the well-known application sidebar type menu that is clearing a path into new sites as well.
79. Clarify what Information Architecture is?
- It is frequently referred to the structure and route of a whole site.
80. For what purpose NaN functioning used?
Return true if the contention isn’t a number.
81. What’s the contrast between quirks mode and standard mode?
Quirk Mode is a default similarity mode and might be not quite the same as the browser to browser, which may result in the absence of consistency in appearance from browser to browser.
82. What is the function of CSS in web design?
CSS or Cascading Style Sheets are needed to give the look and feel of any website. They help in the management of font styles, sizes and color combinations that are required for web pages. One change in the CSS file will cause a change to the entire website because web pages retrieve data every time and then display it.
83. What is Semantic HTML?
Semantic HTML denotes a coding style where the tags indicate the semantics of text that is to be conveyed. For e.g., denotes bold text, denotes italics and so on. Semantic HTML only represents formatting without any structure or meaning.
84. What could be the problem of the hyperlink or image is not displaying correctly?
Reasons for hyperlink or image not displaying properly are a missing quote, tag, bracket for href, alt or src text.
85. Mention what do you mean by Responsive design on a web page?
- Responsive design is an approach to building sites to provide an optimal viewing and interaction experience. It focuses on easy navigation of site with a minimum of scrolling, panning and resizing across all devices.
- Bootstrap is the most popular CSS, HTML and JS framework used for developing responsive web design
86. Mention what are some bad examples of web design?
- Blinking, spinning or flashing images
- Black background with white, light or pale text
- Black backgrounds with dark text
- Busy tiled background images with any color text
- Everything Centered
- Too many images or Huge images
- List of links
- Too many headlines or Blinking text
87. Explain what is a Dreamweaver Template?
Dreamweaver Templates enables webmasters to define “non-editable” and “editable” regions of a webpage, only in Dreamweaver template the “non-editable” regions can be edited. Any changes implemented to the Dreamweaver Template will update any HTML pages that use the template.
88. Why should a graphic containing several words should be saved in GIF instead of JPG?
It is preferable to store the image in GIF format if image consists of certain words because JPG has file compression features which may render the fonts unreadable.
89. List out some of the JQuery function used for webpage designing?
- Some of the JQuery function used for webpage designing include
- Simple slide panel
- Simple disappearing effect
- Chainable transition effect
- Accordion#1 and Accordion#2
- Animated hover effect
- Entire block clickable
- Collapsible panels
- Image replacement gallery
- Styling different link types
90. Explain how can a developer learn about web design?
- Developer can learn about web design by following tips
- Visit website like “Smashing Magazine” to get better idea about web design
- Another website is “ Best Web Gallery” can also be helpful to get insight of quality design and layouts
- Try your hands on tools like Adobe Illustrator
- Create dynamic website using MySQL and PHP
91. Explain why do people clear the screen multiple times when using a calculator?
The older version of calculators have several “cancel” button (C, CE). The CE button will only clear the last entry but does not interrupt with the current computation. For instance, if you enter 2+1 and then press CE, it would show 0, but the calculator expects a second operand for the addition. (2+ is still there in memory). So to ensure that nothing remains left in memory and to start a new calculation we often see people hitting clear button couple of times. It is not due to a flaw in the calculator’s design.
92. Mention why is the mouse cursor slightly tilted and not straight?
During beginning of mouse technology, it was found that given the low resolution of the screens in those days, drawing a straight line and a line at a 45 degree angle was easier to do and more recognizable than the straight cursor. Also, the tilted arrow can help the click position easier to calculate because the origin of the cursors bitmap was in the upper left. This saved the mouse tracking subroutine a calculation on every click.
93. Explain what is Grid system?
A grid system is a structure comprising a series of horizontal and vertical lines which intersect and used to arrange content. It is a way of providing a system that designers can work with the structure and present content. For web design beginners, it is always suggested that they use the pre-made framework for web design as they are relatively easy to use.
94. What Is Gradient? How To Apply Gradient?
Gradient is a mixing of two or more colors.
95. What Is Dhtml?
- DHTML is a TERM describing the art of making dynamic and interactive web pages.
96. What Is Xml?
- XML stands for extensible Markup Language.
- XML is designed to transport and store data.
97. What Is Css?
- CSS stands for Cascading Style Sheets.
- Styles define how to display HTML elements.
- Styles were added to HTML 4.0 to solve a problem.
- External Style Sheets can save a lot of work.
- External Style Sheets are stored in CSS files.
98. What Is Html5?
- HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
- HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.
99. What Is Negative Infinity?
100. What Does Isnan Function Do?
Return true if the argument is not a number.
101. How Do I Add Scrolling Text To My Page?
Keep in mind not all browsers support scrolling text. however to do this add a tag similar to the below example. < marquee >THIS WOULD SCROLL< /marquee> The above example would create the below scrolling text. If your browser supports scrolling text the below example should be scrolling. More examples can be found on our main HTML page that lists most of the HTML commands.