Interview Questions For Front End Web Developer

In this article, we will be discussing about the common questions that companies may ask you in your in-person interview as a CSS web developer or Front End Web Developer. There are no any fix pattern for these questions its all depends on the person who takes your interview. And also depends on on which level your are intervening.
So I categories its in to three levels.

  1. Entry level
  2. Intermediate
  3. Expert level

Entry Level: This is the level one your are going for you first interview after finish your studies.


What is CSS or What you mean by CSS ?

In computing, CSS is a style sheet language used to describe the presentation of a document written in a markup language. CSS, short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site designers, developers and users more control over how pages are displayed. more about CSS….

What you mean by Cascading?

Cascading, A fundamental feature of CSS is that more than one style sheet can influence a document’s presentation. In CSS every rule is assigned a specificity value based on the composition of its selector, its location within a style sheet, and the location of that style sheet relative to other style sheets. specificity is what helps the browser determine how much “weight” is to be applied to a given CSS rule, based on the situation in which it appears. more about Cascading…

Difference between HTML and XHTML.

HTML, stands for Hyper Text Markup Language, and XHTML stands for Extensible Hypertext Markup Language is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML).
The main differences of HTML and XHTML are:

  1. XHTML 1.0, a reformulation of HTML 4 as an XML 1.0 application.XHTML uses XML parsing requirements but html used its owm which are defined much more closely to the way browser actully handle HTML today.
  2. XHTML is case-sensitive, HTML is not. All tags and attributes must be lowercase in XHTML.
  3. XHTML allows the use of CDATA sections, HTML does not.
  4. XHTML can use xml:base, HTML cannot.
  5. HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML.

More about html and xhtml….

Types of Style Sheet or No. of way we can use a style sheet in a web page.

There are three common types of CSS styles:

  1. Inline style sheet
    Inline styles are styles that are written directly in the tag on the document.and specified using the “style” attribute.
    <p style=”style=”color:#CC0000;”>text goes here</p>
  2. External Style Sheets
    An external type of style sheet is a separate file apart from the HTML file(s), which can be linked with any number of HTML documents. professionals use it very often.
    <head><link rel=”stylesheet” type=”text/css” href=”stylename.css” /></head>
  3. Embedded (internal) Style Sheets
    Embedded styles are styles that are embedded in the head of the document.You define Embedded (internal) styles in the head section of an HTML page, by using the <style> tag

    <style type=”text/css”>
    P { font-family:Arial, Helvetica, sans-serif;}

we can also attach a style sheet using @import rule. The @import rule allows you to include external style sheets in your document. The @import notations must come before any other declaration.

<style type=”text/css”>
@import url(“URL”);

What’s the difference between cellspaging & cellpadding

It is a technical question. Cell padding is used for formatting purpose. It is used to specify the space needed between the edges of the cells and also in the cell contents. Cell spacing is also used formatting purpose but there is a chief difference between cell padding and cell spacing. Cell padding is used to set extra space which is used to separate cell walls from their contents. But in contrast cell spacing is used to set space between cells.

What tags are used to embed one html page inside another html page

tag used for this purpose.
Intermediate Level:

Difference between DIV and Span

In HTML (including XHTML), the span and div elements are used where parts of a document cannot be semantically described by other HTML elements. Some differences are:

  • <div> tags are block elements that allow you to position elements contained within them, <span> tags are NOT block elements.
  • <div> tags create line breaks, <span> tags do not.
  • DIV is used to select a block of text so that one can apply styles to it. SPAN is used to select inline text and let users to apply styles to it.

The main difference between DIV and SPAN is SPAN does not do formatting by itself. Also the DIV tag is used as a paragraph break as it creates a logical division of the document in which it is applied. This is in contrast to the SPAN as SPAN simply dos the functionality of applying the style and alignment whatever was specified in it. DIV has ALIGN attribute in it which is not present in case of SPAN. Thus DIV is used in cases where one wants to apply styles to a block of text. But there may be situations in which there might not be clear well structured block of text to work with. In those cases one can opt to apply SPAN which is used to applystyles inline. That is in other words DIV is generally used for block of text and SPAN is generally used for words or sentences.

Is CSS case sensitive?

No , CSS is not case sensitive. Some conditions its depends on your DOCTYPE. Like If your page uses an XML declaration and an XHTML DOCTYPE then the CSS selectors will be case-sensitive for some browsers, if your page uses a HTML DOCTYPE then your CSS selectors will be case-insensitive.

What is ID selector?

ID selectors are used when you want to define a style relating to an object with a unique ID. ID is specified by including a number sign (#) before the selector name.
#div {

Difference between ID and class.

Both id and class are CSS properties and HTML attributes. when we are layouting a web pages some basic elements like h1, p, ul, span also helpful for us but this set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and Classes.

The main difference between id’s and class are that ID  is a unique and therefore can only exist only one time in a single html file and on other side  CLASS can be use multiple times on any html elements. id’s designated by a hash (#)  and Class designated by a period (.). ID selector will always take  more superiority over any conflicting styles declared in the class selector.

Why use div based layout instead table based layout.

When we start developing a static website we have two options for layouts.  One is CSS based layout and another is table based. more about table based layout…..

What is the w3c?

w3c stands for World Wide Web Consortium. w3c is the main international standards organization for the World Wide Web (www) Founded and headed by Sir Tim Berners-Lee. w3c is working to Standardize the Web and make the web accessible to all users. W3C was created in 1994 as a collaboration between the Massachusetts Institute of Technology (MIT) and the European Organization for Nuclear Research (CERN), with support from the U.S. Defense Advanced Research Project Agency (DARPA) and the European Commission.

Difference between Inline and block level elements.

Every HTML page is built out of a series of elements and these elements are naturally displayed in following ways:

  • block (display:block;)
  • Inline (display:inline;)
  • Not display (display:none;)

Block-level elements always appear on their own line in the document.It creates large blocks of content. A block-display element will span the full width of the space available to it. They start new lines of text when you use them, and can contain other blocks as well as inline elements and text or data. some block level elements are:
div, h1…h6, p, ul, ol, table, tr, td, blockquote.

Inline elements appear within an existing line in the document. they are only as wide as the content they contain and don’t break the flow. They just fit in with the flow of the document.Because of this, the some of the properties cannot be set on inline elements like height, width, padding-top, padding bottom,margin-top, margin-bottom. some inline level elements are: i, b, a href, em, strong.

What are pseudo-elements?

In CSS pseudo-elements are used to add special effects to some selectors.
selector:pseudo-element {property:value;}
ex. P:first-line{ color:#ff0000; font-weight: bold; }
these are four type:
“:first-line” and “:first-letter”
These two pseudo-element selectors are based on traditional typesetting, where the first letter or the first line of text appears different to all other text on a page.
“:before” and “:after”
These two pseudo-element selectors are used to insert generated content either before or after an element on the page.

What is shorthand property?

Main advantages of using CSS is the large reduction in web page download time. Writing mulitple declarations and values in a single line of CSS code called CSS Shorthand Technique. more about CSS shorthand property..
Expert Level

What is DTD?

The DTD() document Type Declaration tells the browser which version of (X)HTML you’re using, so it will know how to display the page. The doctype declaration refers to a Document Type Definition (DTD). more about DTD…

What should you put in alt text for presentational images?

ALT tags provide a text alternative to an image for non-visual browsers when they come across images. This means, that the text is meant to be used when the image is not visible on the page. Instead, what is displayed (or read) is the alternative text.

What’s inheritance?

Inheritance is where specific CSS properties are passed down to descendant elements.

Explain Graceful degradation?

In general terms Graceful degradation is the property that enables a system (often computer-based) to continue operating properly in the event of the failure of (or one or more faults within) some of its components.
In web design “Graceful Degradation” is an important principle. Graceful degradation focuses on building the website for the most advanced/capable browsers means when you put in features designed to take advantage of the latest and greatest features of newer browsers, you should do it in a way that older browsers, and browsers letting users disable particular features, can “step down” to a method that still allows access to the basic content of the site, though perhaps not as snazzy in appearance. more about Graceful degradation…

Why shouldn’t I use fixed sized fonts ?

Because we are working for web rather than printing. You can put a magazine, newspaper closer to your eyes but not a monitor. So if some one is sort of sight or have vision problem then it could be a problem to read on web. And a information which cannot be read becomes a product without purpose.

Explain Progressive Enhancement?

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page. more about Progressive Enhancement…

What is parent-child selector?

Parent-child selector is a selector representing the direct descendant of a parent element. Parent-child selectors are created by listing two or more tilde (~) separated selectors.
body ~ P {color:#000000; background-color:#CCCCCC;}

What are CSS hacks and what are they used for?

CSS hack is a slight modification to the CSS or HTML code developed to works in an individual or many browser.

I hope  these question and answers helps you to prepare for  technical interview. or you can send me or comments here about any of the help or questions you want to ask or know.

Joginder Poswal

This entry was posted on Friday, February 12th, 2010 at 12:59 am and is filed under CSS, Design, Web Design, XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “Interview Questions For Front End Web Developer”

  1. sts Says:

    I think you are good writer, keep us posting

  2. jposwal Says:

    thanks i’ll.

  3. expekt Says:

    It’s always pleasure to read your articles, will back here soon

  4. jposwal Says:


  5. dselva Says:

    Thanks for sharing the interview questions

  6. Rajkumar Says:

    Thanks Joginder. Its great work.

  7. Aniket Says:

    very very nice set of questions ! Thank you… Very important questions and the answers are also explained very nicely.

    Totally appreciate your efforts !

  8. Krishna upadhyay Says:

    Nice post & most important questions for UI Developers…..

  9. Chary Says:

    Mr. Joginder, really nice set of questions and answers.
    Keep posting these type of useful articles.

    Thanks for your effective work!!

Leave a Reply

This blog is kept spam free by WP-SpamFree.


Get Adobe Flash player