Web Design Freshers Advanced Experienced level Most Frequently Asked Latest Interview Question and Answers
1) Mention what are the main language or platform used for web-design?
The main language used for web-designing are
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.
<body background= “picture.gif”>
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”>
3) 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
4) Mention what are some bad examples of web design?
On web page information, architecture is often referred to the structure and navigation of an entire site.
6) Explain how can you align picture so that one may be higher or lower than the other?
In order to align picture so that one may be higher or lower than the other, use the align statement in your IMG SRC tag.
< IMG SRC = “http://www.xyz.com/chguy.gif” align=top > Also, you can use align=top or you can do align=middle/bottom
7) 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.
8) Explain what is the difference between “visibility:hidden” and “display:none”?
They are both style properties
visibility:hidden: This property hides the element, but it still takes up space in the layout
display:none: It eliminates the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
9) In CSS when you will use CSS float?
In CSS, you would use CSS float when you want to make an element of your page be pushed to the right or left and make other elements wrap around it.
10) 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.
11) Explain how can you integrate CSS file to your webpage?
To integrate CSS file with any number of HTML files, you have to integrate the file after the <head> tag using “Link” property.
<head><Link REL=STYLESHEET HREF= “filename.css”Type=“text/css”></head>
12) List out some of the JQuery function used for webpage designing?
Some of the JQuery function used for webpage designing include
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.
14) Explain how can a developer learn about web design?
Developer can learn about web design by following tips
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.
16) 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.
17) 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.
18) While writing an error message what all things you need to take into consideration?
You need to take following things in consideration
1) Mention what are the main language or platform used for web-design?
The main language used for web-designing are
- HTML: Base template
- CSS: Styling
- JavaScript: Functionality
- PHP: Server side scripts
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.
<body background= “picture.gif”>
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”>
3) 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
4) 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
On web page information, architecture is often referred to the structure and navigation of an entire site.
6) Explain how can you align picture so that one may be higher or lower than the other?
In order to align picture so that one may be higher or lower than the other, use the align statement in your IMG SRC tag.
< IMG SRC = “http://www.xyz.com/chguy.gif” align=top > Also, you can use align=top or you can do align=middle/bottom
7) 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.
8) Explain what is the difference between “visibility:hidden” and “display:none”?
They are both style properties
visibility:hidden: This property hides the element, but it still takes up space in the layout
display:none: It eliminates the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
9) In CSS when you will use CSS float?
In CSS, you would use CSS float when you want to make an element of your page be pushed to the right or left and make other elements wrap around it.
10) 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.
11) Explain how can you integrate CSS file to your webpage?
To integrate CSS file with any number of HTML files, you have to integrate the file after the <head> tag using “Link” property.
<head><Link REL=STYLESHEET HREF= “filename.css”Type=“text/css”></head>
12) 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
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.
14) 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
- Learn basic languages as HTML, CSS, JavaScript, PHP or jQuery
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.
16) 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.
17) 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.
18) While writing an error message what all things you need to take into consideration?
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
19) When do you use the following HTML5 tags: STRONG, EM, SMALL?
Although these tags create specific visual treatment (STRONG makes the text bold, EM makes it italicised and SMALL makes it smaller), this is not their purpose and they should not be used simply to style a piece of content in a specific way.
Each of the three has semantic purpose and should only be used to mark text as follows:
EM: Emphasized text. This is text that should be emphasized thus changing the meaning of its context.
STRONG: Strong importance. Can be used in titles, headings or paragraphs to emphasize the word or phrase that bears the most importance in the sentence. It can also be used to stress the importance, or seriousness, of a word or phrase.
SMALL: Small print. Used for disclaimers, clarifications and general de-emphasizing of the marked text.
To style text as bold, italic or in smaller font, generic tags can be used and the styles applied with CSS code instead of abusing semantic HTML5 elements.
20) Why would you bother marking up elements as ARTICLE, FIGURE, ASIDE?
HTML5 provides many new element types so the more complex content may be properly marked up. This helps machines (such as search engines, parsers, screen readers, etc.) read a web page and understand its content structure.
ARTICLE: defines a piece of self-contained content with a heading of its own, which can exist outside the context of its web page. Useful for a news piece, an article, a product.
FIGURE: designates an image as a figure related to the content such as a schematic, blueprint or chart. With FIGCAPTION, a visual description of the image can be added too.
ASIDE: indicates information related to the main content on the page but is not a part of the actual content. An example usage would be a list of related articles on the same topic as the main article.
Although these tags create specific visual treatment (STRONG makes the text bold, EM makes it italicised and SMALL makes it smaller), this is not their purpose and they should not be used simply to style a piece of content in a specific way.
Each of the three has semantic purpose and should only be used to mark text as follows:
EM: Emphasized text. This is text that should be emphasized thus changing the meaning of its context.
STRONG: Strong importance. Can be used in titles, headings or paragraphs to emphasize the word or phrase that bears the most importance in the sentence. It can also be used to stress the importance, or seriousness, of a word or phrase.
SMALL: Small print. Used for disclaimers, clarifications and general de-emphasizing of the marked text.
To style text as bold, italic or in smaller font, generic tags can be used and the styles applied with CSS code instead of abusing semantic HTML5 elements.
20) Why would you bother marking up elements as ARTICLE, FIGURE, ASIDE?
HTML5 provides many new element types so the more complex content may be properly marked up. This helps machines (such as search engines, parsers, screen readers, etc.) read a web page and understand its content structure.
ARTICLE: defines a piece of self-contained content with a heading of its own, which can exist outside the context of its web page. Useful for a news piece, an article, a product.
FIGURE: designates an image as a figure related to the content such as a schematic, blueprint or chart. With FIGCAPTION, a visual description of the image can be added too.
ASIDE: indicates information related to the main content on the page but is not a part of the actual content. An example usage would be a list of related articles on the same topic as the main article.
1 comments:
Write commentsThe Best of the Blogs You have Mentioned here.
ReplyFull Stack Online Training