Interview Questions and answers for web designers – HTML & CSS

Interview Questions and answers for web designers – HTML & CSS

  1. How can we submit a form without a submit buttom?
  2. How do I center a table?
  3. Can I include comments in my Style Sheet?
  4. In DHTML what is the difference between “FontSize” and “Font Size”
  5. HTML is a Programming Language or Scripting Language?
  6. How do I quote font names in quoted values of the style attribute?
  7. What are META tags?
  8. How can I check for errors om html?
  9. How do I make my div 100% height?
  10. what can be done with style sheets that can nit be accomplished with regular HTML ?
  11. Is there anything that can’t be replaced by style sheets ?
  12. What browsers support style sheets? To what extent?
  13. Do any WYSIWYG editors support the creation of Style Sheets? Any text-based HTML editors?
  14. Can you use someone else’s Style Sheet without permission?
  15. What does the “Cascading” in “Cascading Style Sheets” mean?
  16. Which style specification method should be used? Why?
  17. What are the advantages/disadvantages of the various style methods?
  18. How do you override the underlining of hyperlinks?
  19. What is the difference between ID and CLASS?
  20. Which characters can CSS-names contain?


Download the answers file here


HTML, CSS, JS, Interview Question and answers

HTML, CSS, JS, Interview Question and answers

  1. What is HTTP ?
    1. HTTP is standards for Hyper Text Transfer Protocol.
  2. What does it mean Small lock on the status bar?
    1. It was a secured connection.
  3. Which is better, gif or jpg format, justify?
    1. Generally JPG is used for High resolution Images, such as artistic images but this takes lot of size in document.  The people who uses slow connections they may face the problems like slow loading but in GIF format it takes low size in 128depth and 256 depth colors and we can also use small animations in GIF format.
  4. Explain HTML Frames (Frames, iFrame, NoFrame, Target controls, Frame Attributes) ?
    1. Frames concept is used to load multiple pages in a single page. We can create frame page by horizontally and vertically if we want to use horizontal frames we use Where Iframe is used.
  5. What is the purpose of an HTML forms?
    1. To get few details from the user.
  6. How Many maximum colors does GIF has ?
    1. 256
  7. Write HTML code to create a INLINE Frame ?
    1. <iframe src=”demo_iframe.htm” width=”200″ height=”200″></iframe>
  8. Why is JavaScript not a programming language but script language? Justify
    1. Write JavaScript code to call multiple function with a single events ?
  9. Write HTML code to control the margins of page?
    1. <body  topmargin=”50”, leftmargin=”50”>
  1.                                                                i.      The above script makes 50px left and top margin
  2. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
  3. The <meta> tag always goes inside the <head> element.
  4. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
  5. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable
  1. Write JavaScript code to call multiple functions with a single event ?
    1. onclick = “f1(); f2”
      or onclick = “funct()”
      function funct() {

  2. Write JavaScript code to change an image when the users mouse points
    1. document.getElementById(“id”).src = “url Value”;
  3. What is META Tags ?
  1. How can i control the tab order in HTML Form elements?
    1.  <form>
      Field 1 (first tab selection):
      <input type=”text” name=”field1″ tabindex=1 /><br />
      Field 2 (third tab selection):
      <input type=”text” name=”field2″ tabindex=3 /><br />
      Field 3 (second tab selection):
      <input type=”text” name=”field3″ tabindex=2 /><br />
  2. How do i get a pop up window to always stay on top using JavaScript ?
    1. <SCRIPT LANGAUGE=”JavaScript”><!–
      function newWindow(file,window) { msgWindow=open(file,window,’resizable=no,width=200,height=400′);
  3. Difference between the DIV and Tables ?
    1. Div generally separates a block of code. It can contain any number of elements, and is controlled by CSS. Think of a table as a block of cells cut into squares. Each cell in the table can be customized and shaped as needed. While both are acceptable for building websites, web developers will tell you that using CSS and divs is the way to go.
  4. Difference between the DIV and SPAN  and  Why Can’t I use only SPAN tag in Document ?
    1. The main difference between the DIV and Span tag is
  5. What is RIA (Rich Internet Application) ?
    1. A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with deskop applications. RIAs generally split the processing across the Internet/network divide by locating the user interface and related activity and capability on the client side, and the data manipulation and operation on the application side.
  6. What is web 2.0 ?
    1. Web 2.0 is a concept that takes the network as a platform for information sharing, interoperability, user-centered design and collaboration on the World Wide Web. A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators  of user-generated content in a virtual community, in contrast to websites where users are limited to the passive viewing of content that was created for them.
  7. What is Semantic Web?
    1. The Semantic Web is a collaborative movement lead by the World Wide Web Consortium (W3C). The standard promotes common data formats on the Web. By encouraging the inclusion of semantic content in web pages, the Semantic Web aims at converting the current web dominated by unstructured and semi-structured documents into a “web of data”. The Sematic Web stack builds on the W3C’s Resource Description Framework (RDF).
  8. What are the difference between DIV tag and SECTION element ?
    1. If you need the element simply to add styles to that area of the page, you should use theDIV element.
    2. If that area of the page has a specific meaning, for example it holds all your social media elements or it contains your blogroll, then you should use the SECTION element.
Web Designer interview Questions and Answers

Web Designer interview Questions and Answers

  1. What is the difference between cell spacing and cell padding?
    1. cell padding Specifies the space between the cell wall and the cell content and
      cell spacing Specifies the space between cells
  2. If a page has to be loaded over all frames in window, what should be the value of TARGET attributes?
    1. Target is main window or main frame.
  3. Which one of the following settlement is correct?
    1. A table cannot contain another table and A Form can be nested inside another form
  4. Which element are table cells?
    1. <td> </td>
  5. What tags are used to embed one html page inside another html page (without using frames)?
    1. <div style=”margin: 0 auto; width:100%; height:400px;”><object type=”text/html” data=”” style=”width:100%; height:400px; margin:1%;”></object></div>
  6. In Dreamweaver what is used to apply same layout to my pages?
    1. By using Templates option we can apply same layout for all pages.
  7. Which HTML tag is used to define an internal style sheet?
    1. < style type=text/css media=”screen”>your css here</style>
  8. How to define an inline style in HTML tag ?
    1. <p style=”color: red; text-align:right; font-weight: bold”>
  9. How do you define an inline style?
    1. A CSS or cascading style sheets style that is written directly on the element or tag it affects.
  10. How to align total webpage center?
    1. body{margin: 0 auto;}
  11. What is a DTD? What DTD do you generally use?
    1. A DTD is a Document Type Definition, also know as DOCTYPE. In a document served as text/html, the DOCTYPE informs the browser how to interpret the content of the page. If the the doctype is not declared, the browser assumes you don’t know how to code, and goes into “quirks mode”. If you know what you are doing and include a correct XHTML DOCTYPE, your page will be rendered in “standards mode”.
  12. What are the possible values for the display attribute that are supported by all browsers?
    1. Display : Block;
  13. What is the default value for the display attribute for the image element?
    1. <img src=”smiley.gif” alt=”Smiley face” height=”42″ width=”42″ />
  14. what is the difference between inline and block level elements ?
    1. A block-level element is an element that creates large blocks of content like paragraphs or page divisions. They start new lines of text when you use them, and can contain other blocks as well as inline elements and text or data.An inline element is an element that define text or data in the document like STRONG makes the enclosed text strongly emphasized and Q says the enclosed text is a quotation. They don’t start new lines when you use them, and they generally only contain other inline tags and text or data. Or they include nothing at all, like the BR tag.
  15. What does display: run-in do?
    1. Creates either block or inline boxes, depending on context. Properties apply to run-in boxes based on their final status (inline-level or block-level).
  16. Difference between “visibility:hidden” and “display:none”?
      These two style properties do two different things.

    1. visibility: hidden hides the element, but it still takes up space in the layout and display: none removes 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.
  17. What are the pros and cons of using display:none?
    1. Pros
      1. Makes fonts look smoother
      2. Rounded edges look round
      3. Type is easier to read (for some) because it looks more like what printed type looks like
      4. Some people feel it’s prettier
    2. Cons
      1. Small fonts become too fuzzy to read
      2. Sharp edges may be fuzzy and not precise
      3. You can’t print anti-aliased text as it comes out blurred
      4. Images are generally larger
      5. Type is easier to read (for some) because the blurring is reduced and the fonts are clear
  18. When to Use Anti-aliasing or Font Smoothing
    1. Anti-aliasing is a good choice for web images with flat colors and curves and text that is intended for web pages. With text, you should try to let the browser display the fonts with CSS, rather than putting them in a graphic.
  19. What are the five possible values for “position”?
    1. Values for position: static, relative, absolute, fixed, inherit
  20. What is the default/initial value for “position”?
    1. Static
Adobe Photoshop Interview Questions and Answers.

Adobe Photoshop Interview Questions and Answers.

1 :: What is Adobe Photoshop? 

Adobe Photoshop is a professional image editing software package that can be used by experts and novices alike. While this handout offers some very basic tips on using the tools available in Photoshop, more comprehensive guidance can be accessed on the web or in the help menu of your version of Photoshop. The version used for this tutorial is Adobe Photoshop CS.

2 :: Explain about the Photoshop Work Area? 

The work area can be intimidating to work with because of all the complex functionality but with a quick breakdown of the available features and their uses, you will be ready to comfortably navigate the work area with ease. The work area in Photoshop has the following basic functionality and features:

a. Menu Bar : This is where you can access most of the commands and features in Photoshop

b. Drawing Palette : Where the image being worked on will appear

c. Options bar : Content sensitive display of tool options changes as different tools are selected display using Window > Options or Click a tool in the toolbox.

d. Tool box : for creating an editing images (display or hide using Windows > Tools

e. Palettes – to monitor and modify images (there are 5 palettes by default)

f. Palette Well – to organize palettes in work area Drag a palettes tab into the palette well to store it in the palette well. Once in the palette well click on the palette tab to use it

3 :: What is Resizing Images and Size Guide in Adobe Photoshop?

 When working with images for a website, you will need to resize your images to suit your particular purpose. Here is a basic guide that can help you decide on what is suitable. (The units used here are pixels, which are standard units across all computer platforms. The conversion between pixels and inches is roughly 1inch = 72 pixels or 1cm = 28 pixels) To use this particular unit of measure you will need to adjust you preference settings by selecting Edit > Preferences > Units and Rulers and changing the units and rulers to measure in pixels.

a. Type of picture : Size in Pixels

b. Background : 1024 x 768

To resize a picture look on the menu bar and select Image > image size

4 :: How do we crop an image in Photoshop?

Cropping an image allows you to cut out any portion of the image you don’t like and/or make an image smaller. This document contains the steps performed to crop an image in each of the major image editors. To the right is a visual example of a large image, such as a image scanned into the computer being cropped to a smaller image.

5 :: What is Gradients in Adobe Photoshop? 

Gradients are a great way to introduce flashy, eye-catching graphics in your pages.

6 :: How do we print the grid in Adobe Photoshop?

Put the non printing grid on how you want it, then take a screen capture (alt + PrintScreen on PC) Open a new file, the size should be set as the size of the grab, and paste. Crop away everything (the background of the photoshop window, etc.)except for the image with grid on it…and print.

7 :: Can you organize layers as in photoshop?

Yes we can organize layes..
For example you create a Ball in 1st layer and then in
second layer you create the background. But you should lock
all the layers and unlock the layer which u r working,
because unlocked layers will be active always(active means,
if u want to drage the ball, background layers also will be

8 :: For photoshop is cs3 really that much better than cs2 on an Intel Mac?

On both the Photoshop CS works fine. But on Mac it seems to speed up faster. The startup is much faster than on windows but relative to the velocity of the CS2, it indeed is faster. So yes, photoshop cs3 is better at functioning on an intel mac rater than cs2, due to the faster startup

9 :: What is a Smart Object in Adobe Photoshop?

Photoshop CS2 introduces a new type of layer called a Smart Object layer. Smart Objects are a little like symbols in Illustrator. Smart objects can consist of pixel-based content or vector-based content, like an Illustrator drawing placed in a Photoshop document. With smart objects, you can make multiple copies of a single object and all copies will be updated when one of the copies is edited ? but you can still apply layer styles and adjustment layers to the individual smart objects without affecting all copies, which provides for a lot of flexibility. Pixel-based smart objects also remember their original size and can be transformed multiple times without loss.

10 :: How do I slice up an image in Adobe Photoshop CS4 Extended?

Well, I just got Adobe Photoshop CS4 Extended and I saw that there is no slice tool. I found that kind of strange. I mean, that is a HUGE tool. All master web designers use the slice tool to make their websites which is what I need it for. So could someone please tell me how I slice an image in Adobe Photoshop CS4 Extended? Thanks!

11 :: Explain about stress analysis in Adobe Photoshop?

People working on these areas as a aerospace engineers should have familiarity and exposure to NASTRAN and MATLAB with knowledge on space environment and modeling of flexible dynamics. These aerospace engineers will be responsible to conduct stress analysis on metallic and composite structures. NASTRAN, IDEAD, Oracle and PATRAN proficiency level is required. Their duties also include on aircraft which are metallic and composite structures. This includes and understanding of control surface stiffness and loop calculations, finite element modeling (FEM), fatigue testing requirement and analysis.