Web Design Interview Questions and Answers

by Nithyanandham, on Sep 10, 2022 4:37:04 PM

Q1.Mention what are the main language or platform used for web-design?

Ans: The main language used for web-designing are

HTML: Base template
CSS: Styling
JavaScript: Functionality
PHP: Server side scripts

Q2.Explain how can you set an image as a background on web pages?

Ans: To set an image as a background on web page, point the body background to the name of your image you want to set as a background as shown below.

</head>tag.

You can also fix the background image, so while using the scroll bar in the browser, it does not move. To do this add the BGPROPERTIES tag as shown below
<body background = “picture.gif”bgproperties=”fixed”>

Q3. Explain how can you integrate CSS file to your webpage?

Ans: To integrate CSS file with any number of HTML files, you have to integrate the file after the <head> tag using “Link” property.

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

Ans: 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

Q5. As a web-designer while declaring “delete” button what would be your color choice?

Ans: Make the “Delete” button more prominent by using color like Red, especially when you have to show two button side by side. Red is sign of caution, so that will definitely help the user to draw their attention.

Q6. Explain how can a developer learn about web design?

Ans: 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
Learn basic languages as HTML, CSS, JavaScript, PHP or jQuery

Q7. Explain why do people clear the screen multiple times when using a calculator?

Ans: 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.

Q8. Mention why is the mouse cursor slightly tilted and not straight?

Ans: 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.

Q9. Explain what is Grid system?

Ans: 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.

Q10. While writing an error message what all things you need to take into consideration?

Ans: You need to take following things in consideration

Don’t use negative words
Clearly mention the error so that the user knows what to correct
Give user a clue or link to solve the error
Put the blame on yourself and not on the user

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

Ans: CSS is called as “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 colour combinations that is necessary for the webpage. CSS files makes 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 uses that certain CSS file and will display the changes.

Q12. Is CSS case sensitive?

Ans: 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.

Q13. What is external style sheet? How can we link it?

Ans: External style sheet 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>

Q14. How do I make a webpage that someone can simply just send me a mail by just clicking on text with subject?

Ans: We can apply this by using mailto command in an AHREF link tag given below:

< A href mailto:abc@gmail.com?subject=enquiry””> click here to mail ABC</a>

Q15. How to align pictures so that they are one above the other?

Ans: 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.

Q16. What are the possible values for “position”?

Ans: The type of positioning used for the webpages can be determined by using “position” element. These include static, relative, fixed, inherit and absolute.

Q17. What are the different JavaScript types?

Ans: There are six types of JavaScript: Object, null, string, undefined, Boolean and number. Objects include functions, array and ordinary objects. Numbers may include integers and real1 numbers, and also include special values such as NaN and infinity. Strings include empty strings, ““,

Q18. What is called as negative infinity in JavaScript?

Ans: It is a number in JavaScript which is formed by dividing a negative number by zero. The number will return undefined, if used by negative infinity. Example: number.negative_infinity.

Q19. What does the NaN function do?

Ans: Return ‘true’ if the argument is not a number.

Q20. What does “1”+2+4 return?

Ans: Since the question contains strings and + sign is usually used for catenation, the answer returned will be 124.

Q21. How do you convert numbers between different bases in JavaScript?

Ans: 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).

Q22. What is a prompt box?

Ans: A prompt box is a pop up 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 so as to execute the action.

Q22. What is the basic difference between an alert box and a confirm box?

Ans: An alert box is a pop up box that has only one element. That is the OK button. While the confirm box has two buttons the OK and the cancel button.

Q23. What is the work area in Photoshop?

Ans: The Photoshop work area has many features:

Menu bar:This is where the user can select most of the functions and commands and features in the Photoshop.
Drawing area or drawing palette:This is the area where the image to be worked upon appears in the Photoshop.
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.
Lasso option bar:Tools for creating different images can be selected from this function. This is basically a tool box for different tools available.
Palettes:To modify and manage different images available. There are five variations of palettes available in Photoshop.
Palette well:Used to organise different palettes while working or doing a project.

Q24. What is <!DOCTYPE>? Why is it necessary to use in HTML5?

Ans: The <!doctype> is an element used to indicate what type and version of html is 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 generalised 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.

Q25. How many markup elements do you know used in HTML5?

Ans: 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 or the bottom of a page of the document. The footer information may include the author 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 sub headings. 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 for 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.

Q26. What are the new media elements that are included in HTML5? Why is canvas used in HTML?

Ans: 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 canvas element in HTML so as to add various elements together.

Q27. What is the use of local storage in HTML5?

Ans: Before the coming of HTML5, the local storage was used to be associated with cookies. Cookies was not really 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.

Q28. What is the basic difference between HTML elements and tags?

Ans: 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 text.

Q29. What are the limitations seen when serving XHTML servers?

Ans: One of the biggest drawback 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.

Q30. What is the difference between standard modes and quirk modes?

Ans: 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 user and the behaviour is as shown by the CSS and HTML specifications.

Q31. How many HTML tags should be used for the most simplest of webpages?

Ans:

The simplest of webpages should contain 8 tags, in pairs of 4.
<html>
<head>
<title>
Simple webpage
</title>
</head>
<body>
Hello
</body>
</html>