1. Explain what is the lazy loading?

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed.

Lazy loading is loading code only once user needs it. For Example, there is a button on the page, which shows different layout once user pressed it. So there is no need to load code for that layout on initial page load.

2. Explain what is the Difference between null and undefined?

null is an object with no value. undefined is a type.
typeof null; // "object"
typeof undefined; // "undefined"

3. What is variable scope?

JavaScript variables have functional scope.

4. Explain what is an IIFE?

IIFE stands for immediately-invoked function expression; it executes immediately after created by adding a () after the function.

5. What is a callback function?

JavaScript is read line by line. Sometimes, this can result in what seems like a subsequent line of code being executed prior to an earlier line of code. A callback function is used to prevent this from happening, because it is not called until the previous line of code has fully executed.

6. Tell me why do we recommend external CSS or Javascript versus inline?

Inline CSS or Javascript has bad impact on site performance.

Your HTML code will weigh more as you use inline scripts, whereas external scripts reduces HTML file size which helps fast rendering of webpage.

HTML code will never be cached so inline scripts. Contrary to that, external dependencies, such as CSS and JavaScript files, will be cached by the visitor's web browser. So it reduces https requests each time user click through web pages.

It is hard to maintain Inline CSS and Javascript code. Where having code in just one centralized location is a lot more preferable than changing exactly the same kind of code snippets spread all over the files in the web site.

7. Explain what "this" is in JavaScript?

In JavaScript, 'this' normally refers to the object which 'owns' the method, but it depends on how a function is called.

8. Do you know what is CORS? How does it work?

Cross-origin resource sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. It's a mechanism supported in HTML5 that manages XMLHttpRequest access to a domain different.

CORS adds new HTTP headers that provide access to permitted origin domains. For HTTP methods other than GET (or POST with certain MIME types), the specification mandates that browsers first use an HTTP OPTIONS request header to solicit a list of supported (and available) methods from the server. The actual request can then be submitted. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.

9. What is the difference between JSON and JSONP?

JSONP is JSON with padding.

10. Tell me how would you call a function directly on a string?

See section on using prototypes to call functions on common data types in JavaScript Objects & Prototypes.

Download Interview PDF

11. Explain how to use a function a Class?

function functionName(name) {
this.name = name;
}
// Creating an object
var functionName = new functionName("WTEN");
console.log(functionName.name); //WTEN

12. Tell me how do you clear a floated element?

clear:both

13. Explain why table-less layout is very important?

There are several reasons why web designers should stop using tables for layouts, and adopt the use of CSS for controlling HTML layouts.

1) It adheres to current W3C web standards and it improves accessibility of the information to a wider variety of users, using a wide variety of user agents.

2) There are bandwidth savings as large numbers of semantically meaningless <table>, <tr> and <td> tags are removed from dozens of pages leaving fewer, but more meaningful headings, paragraphs and lists.

3) Layout instructions are transferred into site-wide CSS stylesheets, which can be downloaded once and cached for reuse while each visitor navigates the site.

4) If coded well, CSS makes it easy to apply global changes to the layout

5) Web pages often have less code, and are much thinner when XHTML and CSS are used

6) Sites may become more maintainable as the whole site can be restyled or re-branded in a single pass merely by altering the mark-up of the specific CSS, affecting every page which relies on that stylesheet.

7) New HTML content can be added in such a way that consistent layout rules are immediately applied to it by the existing CSS without any further effort.

14. Explain what is an anonymous function?

Anonymous functions are functions without a name. They are stored in a variable and are automatically invoked (called) using the variable name.


var x = function(a, b) {
console.log(a * b)
}

x(3, 5); // 15

15. Explain what is AJAX? Write an AJAX call?

AJAX stands for asynchronous JavaScript and XML and allows applications to send and retrieve data to/from a server asynchronously (in the background) without refreshing the page. For example, your new Gmail messages appear and are marked as new even if you have not refreshed the page.

16. Explain what event bubbling is?

Event bubbling causes all events in the child nodes to be automatically passed to its parent nodes. The benefit of this method is speed because the code only needs to traverse the DOM tree once.

17. Tell me what is stringify?

stringify is used to transform JSON into a string.

18. What are this and that keywords?

this and that are important to variable scope in JavaScript. Here are a few stackoverflow posts on this, that and self.

19. What is event delegation?

Event delegation allows you to avoid adding event listeners for specific nodes. Instead, you can add a single event listener to a parent element.

20. Tell me why do we need to use W3C standard code?

The goals of such standards are to ensure cross-platform compatibility and more compact file sizes. The focus of these standards has been to separate "content" from "formatting" by implementing CSS. It eases maintenance and development.

21. How to clear a floated element?

A floated element is taken out of the document flow. To clear it you would need to do a clear:both or try overflow:auto on the containing div.

22. What is a float?

Floats are used to push elements to the left or right, so other elements wrap around it.

23. Tell us the purpose of each of the HTTP request types when used with a RESTful web service?

The purpose of each of the HTTP request types when used with a RESTful web service is as follows:

☛ GET: Retrieves data from the server (should only retrieve data and should have no other effect).
☛ POST: Sends data to the server for a new entity. It is often used when uploading a file or submitting a completed web form.
☛ PUT: Similar to POST, but used to replace an existing entity.
☛ PATCH: Similar to PUT, but used to update only certain fields within an existing entity.
☛ DELETE: Removes data from the server.
☛ TRACE: Provides a means to test what a machine along the network path receives when a request is made. As such, it simply returns what was sent.
☛ OPTIONS: Allows a client to request information about the request methods supported by a service. The relevant response header is Allow and it simply lists the supported methods. (It can also be used to request information about the request methods supported for the server where the service resides by using a * wildcard in the URI.)
☛ HEAD: Same as the GET method for a resource, but returns only the response headers (i.e., with no entity-body).
☛ CONNECT: Primarily used to establish a network connection to a resource (usually via some proxy that can be requested to forward an HTTP request as TCP and maintain the connection). Once established, the response sends a 200 status code and a "Connection Established" message.

24. Tell me how to optimize the page using front end code or technology?

Below is the list of best practices for front-end technology, which helps to optimize page.

1. Improve server response by reducing resource usage per page
► Combine all external CSS files into one file
► Combine all external JS files into one file

2. Use responsive design instead of making device based redirects

3. Use asynchronous Javascript and remove block level Javascript

4. Use Minify version of stylesheet and javascript.

5. Optimize Image and use correct format of Image. Use the lazy loading design pattern for large size of images.

6. Use browser side cache with Cache control

7. Avoid plugins to drive functionality

8. Configure view port and use CSS best practices

9. Prioritize visible content

10. Load style-sheets in header and script in footer.

25. Have you ever used a CSS preprocessor/precompiler? What are the benefits?

CSS preprocessors, such as SASS, have numerous benefits, such as variables and nesting.

Download Interview PDF

26. Do you know what is the importance of the HTML DOCTYPE?

DOCTYPE is an instruction to the web browser about what version of the markup language the page is written. Its written before the HTML Tag. Doctype declaration refers to a Document Type Definition (DTD).

27. What is the difference between responsive and adaptive development?

In a nutshell, responsive is fluid and flexible, whereas adaptive adapts to the detected device/screen size.

28. Tell me where do you place your JavaScript on the page?

It may depend on what you are using it for. There is some debate on this but generally a good question to ask to get an understanding of the JS knowledge.

29. Explain the difference between inline, block, inline-block and box-sizing?

inline is the default. An example of an inline element is <span>.

block displays as a block element, such as <div> or <p>.

inline-block displays an element as an inline-level block container. Here's an article on the topic.

box-sizing tells the browser sizing properties.

30. Explain what is web a application?

A great question to feel out the depth of the applicants knowledge and experience.

A web application is an application utilizing web and [web] browser technologies to accomplish one or more tasks over a network, typically through a [web] browser.

31. HTML / HTML5 Based Front End Developer Interview Questions:

☛ What is Doctype & why its important?
☛ What are meta tags?
☛ What does meta viewport tag do?
☛ Difference between div and span?
☛ What is html5?
☛ Name a few new tags in html5 and their advantages?
☛ What are the new media-related elements in HTML5?
☛ How can I create a div work like an input?

32. CSS / CSS3 Based Front End Developer Interview Questions:

☛ Difference between position absolute and fixed?
☛ What is the difference between inline, inline-block, and block?
☛ Difference between ID and Class?
☛ What are sprites and why they are recommended?
☛ what are media queries?
☛ What is responsiveness?
☛ How to select last li of ul via CSS?
☛ Difference between; .class.class2 & .class .class & .class > class ?
☛ What are CSS pre-processors?
☛ What is style reset sheet?
☛ What is float?

33. JQuery / JavaScript Based Front End Developer Interview Questions:

☛ What is jQuery?
☛ What is difference between onload and ready?
☛ How to select class in jQuery?
☛ Which selector has better performance id or class and why?
☛ How to add a class to HTML element?
☛ What is jQuery toggle function?
☛ Explain difference .empty() between .remove()?
☛ How can I select 20th div with jQuery?
☛ What is difference between .setinterval() & .delay()?

34. WordPress Based Front End Developer Interview Questions:

☛ What are basic necessities for a theme? How will you create a Hello World! WordPress theme?
☛ Do you have developed plug-in?
☛ How will you create a template page in WordPress?
☛ How can you create an empty plugin which have basic options like activate, deactivate etc.?

35. Deployment Skills Based Front End Developer Interview Questions:

☛ What do you use xampp or wampp & why?
☛ What is cPanel?
☛ What will be your workaround deploying a local site to live url?
☛ Name some online resources that you reference when having CSS/HTML/JS issues.
☛ Favorite tools and IDEs?
☛ Why stack overflow so useful? and whats your rating?

36. Browser Compatibility Based Front End Developer Interview Questions:

☛ What tools do you use for cross-browser testing?
☛ Lets assume you have found a rendering issue in IE8 what will be your work around to solve that issue?
☛ How will you achieve same drop down menu UI in different browsers?
☛ How will you fix border-radius compatibility issue in IE8?

37. Network Based Front End Developer Interview 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.

☛ How would you make this work?
add(2, 5); // 7add(2)(5); // 7

38. Basic CSS Front End Developer Interview 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.
☛ 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?
☛ Any familiarity 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.
☛ 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?

39. Basic HTML Front End Developer Interview 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 cookie, sessionStorage 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?

40. General Front End Developer Interview 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.
☛ What tools do you use to test your code's performance?
☛ 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.

Download Interview PDF

41. Basic JavaScript Front End Developer Interview Questions:

☛ Explain event delegation
☛ Explain how this works in JavaScript
☛ Explain how prototypal inheritance works
☛ How do you go about testing your JavaScript?
☛ 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: null, undefined 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.
☛ 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?

42. Fresh Front End Developer Interview Questions:

☛ What are the limitations when serving XHTML pages?
☛ Are there any problems with serving pages as application/xhtml+xml?
☛ How do you serve a page with content in multiple languages?
☛ What are the different ways to visually hide content (and make it available only for screen readers)?
☛ Any familiarity with styling SVG?
☛ What are some of the "gotchas" for writing efficient CSS?
☛ What's the difference between inline and inline-block?
☛ Explain how this works in JavaScript (Yes, I admit this. I think I know it, but I don't think I have a 100% lock down on the answer here and I want a 100% lock down.)
☛ AMD vs. CommonJS?
☛ What's the difference between host objects and native objects?

43. Explain three ways to define a color in html?

1) Hex
2) RGB
3) Name (ie red)

.colorMe {
color:red;
color:#ff0000;
color:rgb(0,0,255);
}

44. Explain what is the importance of the HTML DOCTYPE?

The doctype declaration should be the very first thing in an HTML document, before the html tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

45. What are the difference between GET and POST?

A GET request is typically used for things like AJAX calls to an API (insignificant changes), whereas a POST request is typically used to store data in a database or submit data via a form (significant changes). GET requests are less secure and can be seen by the user in the URL, whereas POST requests are processed in two steps and are not seen by the user. Therefore, POST requests are more secure.

46. Explain what is the difference between a prototype and a class?

Prototype-based inheritance allows you to create new objects with a single operator; class-based inheritance allows you to create new objects through instantiation. Prototypes are more concrete than classes, as they are examples of objects rather than descriptions of format and instantiation.

Prototypes are important in JavaScript because JavaScript does not have classical inheritance based on classes; all inheritances happen through prototypes. If the JavaScript runtime can't find an object's property, it looks to the object's prototype, and continues up the prototype chain until the property is found.

47. Tell me what is the difference between call and apply?

apply lets you invoke the function with arguments as an array. call requires the parameters to be listed explicitly. Also, check out this stackoverflow answer.

48. Explain the difference between visibility:hidden; and display:none?

Visibility:Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes no space.

49. Tell me the difference between visibility:hidden; and display:none;?

Visibility:Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes up absolutely no space as if it was never there.

50. How to increase page performance?

(1) Sprites, compressed images, smaller images;
(2) include JavaScript at the bottom of the page;
(3) minify or concatenate your CSS and JavaScript; and
(4) caching.

51. Using jQuery how would you hide the image when the user clicks it for the following code snippet?

<div class="content">
<p>Some Content Here</p>
<p class="loader"><img src="ajax-loader.gif"></p>
</div>

$(document).ready(function(){
$('.loader img').click(function() {
$('.loader img').hide();
$('.loader img').hide();
});
});

52. Do you know what is a sprite? How is it applied using CSS? What is the benefit?

- A image sprite is a collection of images put into one single image.
- Using css positioning you can show and hide different parts of the sprite depending on what you need.
- Sprites reduces the number of http requsts thus reducing load time of page and bandwidth

Buy Buttons using Sprite as background:

Both buttons use the same background image. The only differece is in the positioning.
BUY BUY

Here is the actual background image:
And the CSS.

<style>
.orangeBuyBtn {
background: url('buyButtons-bg.gif') repeat-x 0 0;
border-color: #5B5752 #6B6B6B #808080;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}

.greenBuyBtn {
background: url('buyButtons-bg.gif') repeat-x 0 -24px;
border-color: #5B5752 #6B6B6B #808080;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
</style>
Learn more about sprites at Smashing Magazine. Also see the Site Point article or this W3School Article.

53. Explain the difference between static, fixed, absolute and relative positioning?

static is the default.

fixed is positioned relative to the browser.

absolute is positioned relative to its parent or ancestor element.

relative is positioned relative to normal positioning/the item itself. Used alone it accomplishes nothing.

54. Tell me what are some of the online tools and resources you use when you have a problem? Where do you go to ask questions?

This question really just looks for how resourceful the candidate is, it also reflects on their problem solving process and may lead you to ask more questions.

55. How do browsers read CSS?

From right to left.

Download Interview PDF

56. Explain some common IE6 bugs and how you dealt with them?

Ie6 is not dead, just ask China which represents a nice chunk of the worlds online population. Your pages should at least be functional on IE6, unless you dont care about half the worlds population.

57. What is a clear?

A clear is used when you don't want an element to wrap around another element, such as a float.

58. Tell us what is the difference between HTML and XHTML?

HTML is HyperText Markup Language used to develop the website.
XHTML is modern version of HTML 4. XHTML is an HTML that follows the XML rules which should be well-formed.

59. Explain what is a javascript object?

A collection of data containing both properties and methods. Each element in a document is an object. Using the DOM you can get at each of these elements/objects and do some cool sh*t.

60. Tell me what is the difference between form get and form post?

Get:
With GET the form data is encoded into a URL by the browser. The form data is visible in the URL allowing it to be bookmarked and stored in web history. The form data is restricted to ASCII codes. Because URL lengths are limited there can be limitations on how much form data can be sent.

Post:
With POST all the name value pairs are submitted in the message body of the HTTP request which has no restrictions on the length of the string. The name value pairs cannot be seen in the web browser bar.

POST and GET correspond to different HTTP requests and they differ in how they are submitted. Since the data is encoded in differently, different decoding may be needed.

61. Explain the difference between == and === ?

The 3 equal signs mean "equality without type coercion". Using the triple equals, the values must be equal in type as well.

== is equal to
=== is exactly equal to (value and type)
0==false // true
0===false // false, because they are of a different type
1=="1" // true, auto type coercion
1==="1" // false, because they are of a different type

62. Do you know what is a closure?

Closures are expressions, usually functions, which can work with variables set within a certain context. Or, to try and make it easier, inner functions referring to local variables of its outer function create closures.

63. Do you know what is the difference between == and === ?

== is equal to
=== is exactly equal to (value and type)

64. Tell me are you familiar with Jasmine or QUnit?

Jasmine and QUnit are JavaScript testing frameworks. I would familiarize yourself with the basics.

65. What is the difference between a host object and a native object?

Native - existing in JavaScript. Host - existing in the environment.