What's the difference between standards mode and quirks mode?

In the old days, pages were written in two versions:

  1. Netscape Navigator
  2. Microsoft Internet Exploreer
When W3C, was introduced, browsers could not just start using them as doing so would break most existing sites on the web. Browsers introduced two modes to treat new standards compliant sites differently from old legacy sites. 

Layout engines in browsers uses three modes:
  1. Quirks mode: In quirks mode, layout emulates nonstandard behavior in Navigator 4 and IE 5. These were needed for websites written before introduction of web standards. 
  2. Full standard mode: In this mode, the behavior described is same as described by HTML and CSS specifications. Most of the modern browsers uses full standard mode.  
  3. Almost standard Mode: In almost standard mode there is very small number of quirks implementation. 

Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.
The DOCTYPE as, <!DOCTYPE html>, is the simplest possible, and the one recommended by HTML5. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE, even the dated Internet Explorer 6. 
Learn more »

Important Front end Developer interview questions and answers

General Questions:

  • What did you learn yesterday/this week?
  • What excites or interests you about coding?
  • What is a recent technical challenge you experienced and how did you solve it?
  • What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?
  • Talk about your preferred development environment.
  • Which version control systems are you familiar with?
  • Can you describe your workflow when you create a web page?
  • If you have 5 different stylesheets, how would you best integrate them into the site?
  • Can you describe the difference between progressive enhancement and graceful degradation?
  • How would you optimize a website's assets/resources?
  • How many resources will a browser download from a given domain at a time?
    • What are the exceptions?
  • Name 3 ways to decrease page load (perceived or actual load time).
  • If you jumped on a project and they used tabs and you used spaces, what would you do?
  • Describe how you would create a simple slideshow page.
  • If you could master one technology this year, what would it be?
  • Explain the importance of standards and standards bodies.
  • What is Flash of Unstyled Content? How do you avoid FOUC?
  • Explain what ARIA and screenreaders are, and how to make a website accessible.
  • Explain some of the pros and cons for CSS animations versus JavaScript animations.
  • What does CORS stand for and what issue does it address?

HTML Questions:

  • What does a doctype do?
  • What's the difference between standards mode and quirks mode?
  • What's the difference between HTML and XHTML?
  • Are there any problems with serving pages as application/xhtml+xml?
  • How do you serve a page with content in multiple languages?
  • What kind of things must you be wary of when design or developing for multilingual sites?
  • What are data- attributes good for?
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
  • Describe the difference between a cookiesessionStorage and localStorage.
  • Describe the difference between <script><script async> and <script defer>.
  • Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before</body>? Do you know any exceptions?
  • What is progressive rendering?
  • Have you used different HTML templating languages before?

CSS Questions:

  • What is the difference between classes and ID's in CSS?
  • What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
  • Describe Floats and how they work.
  • Describe z-index and how stacking context is formed.
  • Describe BFC(Block Formatting Context) and how it works.
  • What are the various clearing techniques and which is appropriate for what context?
  • Explain CSS sprites, and how you would implement them on a page or site.
  • What are your favourite image replacement techniques and which do you use when?
  • How would you approach fixing browser-specific styling issues?
  • How do you serve your pages for feature-constrained browsers?
    • What techniques/processes do you use?
  • What are the different ways to visually hide content (and make it available only for screen readers)?
  • Have you ever used a grid system, and if so, what do you prefer?
  • Have you used or implemented media queries or mobile specific layouts/CSS?
  • Are you familiar with styling SVG?
  • How do you optimize your webpages for print?
  • What are some of the "gotchas" for writing efficient CSS?
  • What are the advantages/disadvantages of using CSS preprocessors?
    • Describe what you like and dislike about the CSS preprocessors you have used.
  • How would you implement a web design comp that uses non-standard fonts?
  • Explain how a browser determines what elements match a CSS selector.
  • Describe pseudo-elements and discuss what they are used for.
  • Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
  • What does * { box-sizing: border-box; } do? What are its advantages?
  • List as many values for the display property that you can remember.
  • What's the difference between inline and inline-block?
  • What's the difference between a relative, fixed, absolute and statically positioned element?
  • The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?
  • What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
  • Have you played around with the new CSS Flexbox or Grid specs?
  • How is responsive design different from adaptive design?
  • Have you ever worked with retina graphics? If so, when and what techniques did you use?
  • Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?

JS Questions:

  • Explain event delegation
  • Explain how this works in JavaScript
  • Explain how prototypal inheritance works
  • What do you think of AMD vs CommonJS?
  • Explain why the following doesn't work as an IIFE: function foo(){ }();.
    • What needs to be changed to properly make it an IIFE?
  • What's the difference between a variable that is: nullundefined or undeclared?
    • How would you go about checking for any of these states?
  • What is a closure, and how/why would you use one?
  • What's a typical use case for anonymous functions?
  • How do you organize your code? (module pattern, classical inheritance?)
  • What's the difference between host objects and native objects?
  • Difference between: function Person(){}var person = Person(), and var person = new Person()?
  • What's the difference between .call and .apply?
  • Explain Function.prototype.bind.
  • When would you use document.write()?
  • What's the difference between feature detection, feature inference, and using the UA string?
  • Explain AJAX in as much detail as possible.
  • Explain how JSONP works (and how it's not really AJAX).
  • Have you ever used JavaScript templating?
    • If so, what libraries have you used?
  • Explain "hoisting".
  • Describe event bubbling.
  • What's the difference between an "attribute" and a "property"?
  • Why is extending built-in JavaScript objects not a good idea?
  • Difference between document load event and document ready event?
  • What is the difference between == and ===?
  • Explain the same-origin policy with regards to JavaScript.
  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Why is it called a Ternary expression, what does the word "Ternary" indicate?
  • What is "use strict";? what are the advantages and disadvantages to using it?
  • Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3"buzz" at multiples of 5 and"fizzbuzz" at multiples of 3 and 5
  • Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
  • Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
  • Explain what a single page app is and how to make one SEO-friendly.
  • What is the extent of your experience with Promises and/or their polyfills?
  • What are the pros and cons of using Promises instead of callbacks?
  • What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
  • What tools and techniques do you use debugging JavaScript code?
  • What language constructions do you use for iterating over object properties and array items?
  • Explain the difference between mutable and immutable objects.
    • What is an example of an immutable object in JavaScript?
    • What are the pros and cons of immutability?
    • How can you achieve immutability in your own code?
  • Explain the difference between synchronous and asynchronous functions.
  • What is event loop?
    • What is the difference between call stack and task queue?

Testing Questions:

  • What are some advantages/disadvantages to testing your code?
  • What tools would you use to test your code's functionality?
  • What is the difference between a unit test and a functional/integration test?
  • What is the purpose of a code style linting tool?

Performance Questions:

  • What tools would you use to find a performance bug in your code?
  • What are some ways you may improve your website's scrolling performance?
  • Explain the difference between layout, painting and compositing.

Network Questions:

  • Traditionally, why has it been better to serve site assets from multiple domains?
  • Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.
  • What are the differences between Long-Polling, Websockets and Server-Sent Events?
  • Explain the following request and response headers:
    • Diff. between Expires, Date, Age and If-Modified-...
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • What are HTTP actions? List all HTTP actions that you know, and explain them.
  • What techniques do you use to increase availiability of your website?
Learn more »

Describe cyclomatic complexity with example.

Cyclomatic complexity is a software metric that measure the logical strength of the program. It was developed by Thomas J. McCabe. Cyclomatic complexity is calculated by using the control flow graph of the program. In the flow graph, nodes are represented by circle. Areas bounded by edges and nodes are called regions. When counting regions, we also include the area outside the graph as a region.

Complexity is computed in one of three ways:

The total number of regions of the flow graph.

By using the formula defined as:

V(G) = E - N + 2

Cyclomatic complexity, V(G), for a flow graph, G, is also defined as

V(G) = P + 1 ,where P is the number of predicate nodes contained in the flow graph G.

Note: Nodes that contain a condition is called a predicate node and is characterized by two or more edges originating from it.
Learn more »

What do you mean by usability testing?

Usability testing is a testing methodology where the end customer is asked to use the software to see if the product is easy to use, to see the customer's perception and task time. The best way to finalize the customer point of view for usability is by using prototype or mock-up software during the initial stages. By giving the customer the prototype before the development start-up we confirm that we are not missing anything from the user point of view.
Learn more »

What is the difference between white box, black box, and gray box testing?

Black box testing is a testing strategy based solely on requirements and specifications. Black box testing requires no knowledge of internal paths, structures, or implementation of the software being tested.

White box testing is a testing strategy based on internal paths, code structures, and implementation of the software being tested. White box testing generally requires detailed programming skills.

There is one more type of testing called gray box testing. In this we look into the "box" being tested just long enough to understand how it has been implemented. Then we close up the box and use our knowledge to choose more effective black box tests.
Learn more »

What is Exploratory Testing and when should it be performed?

The definition of Exploratory Testing is “simultaneous test design and execution” against an application. This means that the tester uses her domain knowledge and testing experience to predict where and under what conditions the system might behave unexpectedly. As the tester starts exploring the system, new test design ideas are thought of on the fly and executed against the software under test.
On an exploratory testing session, the tester executes a chain of actions against the system, each action depends on the result of the previous action, hence the outcome of the result of the actions could influence what the tester does next, therefore the test sessions are not identical.
This is in contrast to Scripted Testing where tests are designed beforehand using the requirements or design documents, usually before the system is ready and execute those exact same steps against the system in another time.
Exploratory Testing is usually performed as the product is evolving (agile) or as a final check before the software is released. It is a complimentary activity to automated regression testing.
Learn more »

What Test Techniques are there and what is their purpose?

Test Techniques are primarily used for two purposes: a) To help identify defects, b) To reduce the number of test cases.
  • Equivalence partitioning is mainly used to reduce number of test cases by identifying different sets of data that are not the same and only executing one test from each set of data
  • Boundary Value Analysis is used to check the behaviour of the system at the boundaries of allowed data.
  • State Transition Testing is used to validate allowed and disallowed states and transitions from one state to another by various input data
  • Pair-wise or All Pairs Testing is a very powerful test technique and is mainly used to reduce the number of test cases while increasing the coverage of feature combinations.
Learn more »

How do you test the login feature of a web application?

This is a very common software testing interview question and the aim is to see how broad you can think about the feature. Most interviewees start with the obvious answer of checking input fields with positive and negative values, invalid email, valid email but incorrect password, sql injection, etc. But most of these tests can be done and should be done by the developers as part of integration testing.

Here the focus is on testing at system level, tests which cannot be done without a full integrated system.
Answer: Possible answers to this testing interview question can be:
  • Sign in with valid login, Close browser and reopen and see whether you are still logged in or not.
  • Session management is important – how do we keep track of logged in users, is it via cookies or web sessions?
  • Sign in, then logout and then go back to the login page to see if you are truly logged out.
  • Login, then go back to the same page, do you see the login screen again?
  • Sign in from one browser, then open another browser to see if you need to sign in again?
  • Login, change password, and then logout, then see if you can login again with the old password.
Learn more »

How do You Verify the Results of Your Search on Search Results Page?

The answer to this question is rather simple. At first instance, we need to know where the data is coming from. Are they coming from a database? Or some XML files from 3rd party websites?
Once we have this information, we can start comparing the results we see on the result page with the results from the source, e.g. database.
Another option is to use mocks to generate the data that we need so we can fully control the data that we see on the search results page.
What is Acceptance Testing?
Testing conducted to enable a user/customer to determine whether to accept a software product.Normally performed to validate the software meets a set of agreed acceptance criteria.
What is Accessibility Testing?
Verifying a product is accessible to the people having disabilities (deaf, blind, mentally disabled etc.).
What is Adhoc Testing?
A testing phase where the tester tries to ‘break’ the system by randomly trying the system’s functionality. Can include negative testing as well. See also Monkey Testing.
What is Agile Testing?
Testing practice for projects using agile methodologies, treating development as the customer of testing and emphasizing a test-first design paradigm. See also Test Driven Development.
What is Application Programming Interface (API)?
A formalized set of software calls and routines that can be referenced by an application program in order to access supporting system or network services.
What is Automated Testing?
Testing employing software tools which execute tests without manual intervention. Can be applied in GUI, performance, API, etc. testing. The use of software to control the execution of tests, the comparison of actual outcomes to predicted outcomes, the setting up of test preconditions, and other test control and test reporting functions.
What is Beta Testing?
Testing of a release of a software product conducted by customers.
What is Black Box Testing?
Testing based on an analysis of the specification of a piece of software without reference to its internal workings. The goal is to test how well the component conforms to the published requirements for the component.
What is Bottom Up Testing?
An approach to integration testing where the lowest level components are tested first, then used to facilitate the testing of higher level components. The process is repeated until the component at the top of the hierarchy is tested.
Learn more »

Write a program to read a line of text then count number of vowels, number of digits and number of spaces.

int main(){
    char line[150];
    int i,v,c,ch,d,s,o;
    printf("Enter a line of string:\n");
        if(line[i]=='a' || line[i]=='e' || line[i]=='i' || line[i]=='o' || line[i]=='u' || line[i]=='A' || line[i]=='E' || line[i]=='I' || line[i]=='O' || line[i]=='U')
        else if((line[i]>='a'&& line[i]<='z') || (line[i]>='A'&& line[i]<='Z'))
        else if(line[i]>='0'&&c<='9')
        else if (line[i]==' ')
    printf("Vowels: %d",v);
    printf("\nConsonants: %d",c);
    printf("\nDigits: %d",d);
    printf("\nWhite spaces: %d",s);
    return 0;
Learn more »