Front end Interview Questions and Answers

By Admin
Last update: 22 Mar 2020, 23 Questions
Front end Developer Interview Questions

A Front end developer is expected to have the functional knowledge and the ability to work on all aspects involved in building an application. A Front end developer should be able to write frontend code in CSS, HTML, and JavaScript; know about web security; understand, create and write a query with databases. Our massive collection of front end developer interview questions will definitely help you find a great job.

Skillset Expected from a Front end Developer

  • HTML and HTML5
  • JavaScript
  • JQuery
  • Ajax
  • CSS2 and CSS3 etc

Most Frequently Asked Front end Interview Questions

Here in this article, we will be listing frequently asked Front end Interview Questions and Answers with the belief that they will be helpful for you to gain higher marks. Also, to let you know that this article has been written under the guidance of industry professionals and covered all the current competencies.

1. How to check if a variable is a number in javascript?

To check if a variable is a number, we can use isNaN() function in JavaScript. It determines whether a value is not a number.



isNaN(123) //false
isNaN(0) //false
isNaN(-1.23) //false
isNaN(5-2) //false
isNaN('') //false
isNaN(true) //false
isNaN(undefined) //true
isNaN('123') //false
isNaN('Hello') //true
isNaN('2005/12/12') //true
isNaN(NaN) //true
isNaN('NaN') //true
isNaN(0 / 0) //true

2. What are the skills required for a front end developer?

Skillset required from a Front end Developer listed below:

  • HTML and HTML5
  • JavaScript
  • JQuery
  • Responsive Design
  • Version Control Systems
  • CSS2 and CSS3 etc

Apart from the above mentioned technical skills also should have knowledge of cross browser testing, OOPS, CMS or any Framework and basic knowledge about SEO and tools.

3. How to improve UI performance?
  • Minimize External HTTP Requests
  • Minify JS, CSS and HTML
  • Optimize JS and CSS Performance
  • Use CDN and Caching to increase Speed
  • Compress Images and Files
  • Prefetch should be Enable

Get ready to be answerable to this question. This is a favorite UI developer interview questions of many interviewers. Don’t let this question waste the opportunity. Read it twice.

4. What do you mean by Coffee Script and why it is used?

It is a small language that compiles into JavaScript. In this programs is written with less code and in more human readable forms.

The golden rule of CoffeeScript “It is just JavaScript”

  • It was developed by Jeremy Ashkenas in year 2009.
  • It is used because of CoffeeScript code is shorter and converts seamlessly to JS. It helps developer in writing an simple and easily readable code.
  • It is something which makes JS easier and effectively reducing our code to one third. It compiles into JS on execution which is Inspired by Python and Ruby.
5. What is the difference between null and undefined?

It can be assigned to a variable and has no value in case of null but on the other hand undefined means a variable has been declared but has not yet been assigned a value.

7. What do you mean by callback function?

A callback function is a function which is accessible by another function and invoked after the first function if that first function completed.

8. What do you mean by Anonymous Function?

It is a function that was declared without any function named identifier to refer to it. It is usually not accessible after its initial creation. These functions are created at run time.



It is a type of normal funtion used in Javascript
function helloFunction() {
   alert("Hello this is bestinterviewquestion.com");

It is a type of anonymous function used in Javascript.
var helloFunction = function()
   alert("Hello this is bestinterviewquestion.com");

9. What do you mean by Ajax?

Ajax stands for Asynchronous JavaScript And XML and it is not a programming language. It uses XML to transport data, but it is equally common to transport data as JSON text or plain text.

It allows webpage to be updated asynchronously by exchanging data with a webserver behind the scenes. It means that it is can update parts of a webpage without reloading the whole page in website.

10. What is the difference between responsive and adaptive web design?

Responsive Web Design : It built on a fluid grid that will change with the browser automatically, no matter what the screen resolution is holding content can break apart and realign if need be.

Adaptive Web Design : It not necessarily set on a fluid grid; targets specific device resolutions like (320, 768, 1024 etc); can have set relative widths with (%) and controlled by media query.

12. What is front end optimization?

Front end optimization is also known as content optimization. Basically it is the process of working fine your website to make it quick to load and more browser friendly.

Front end optimization helps in minimizing the number of requests needed for a given page to load and reducing file sizes. CDN plays an important role in the process of front end optimization.

13. What is the purpose of the HTML DOCTYPE?

DOCTYPE is a syntax of HTML5 which is used to specify to ensure that the browser renders the page in standards mode. The DOCTYPE declaration is case insensitive.

DOCTYPE is an instruction to the browser about what version of the HTML markup language the page is written in.

14. Explain the difference between internal and external Javascript?
S.no Inline scripts External scripts
1. It loaded in the same page so not necessary to trigger another request. It gives better separation of concerns and maintainability.
2. These scripts executed immediately External script is downloaded by the browser & stores it in the cache.
3. async and defer attributes did not use async and defer attributes can be use
4. It is helpful when we are using a server side dynamic rendering It can be used to load browser side code on demand & reduce overall download time and size.
15. What is class and how to use class in Javascript?

A class is a type of function in Javascript. It can be declared with the class keyword. We can use these function expression syntax to initialize a function and class expression syntax to initialize a class in Javascript.



function PrintString(name1, name2, name3) {
    alert(name1 + name2 + name3);

const result = new PrintString(1, 2, 3);

16. What is the purpose of JSON.stringify()?

This method is used to converts JavaScript objects into strings. When sending data to a web server the data should be like string.



// Stringify a JavaScript object
var nObj = { "fname":"best", "mname":"interview", "lname":"question"};
var myJSONData = JSON.stringify(nObj);
document.getElementById("MyID").innerHTML = myJSONData ;

17. Explain the features of Three.js?

Three.js having various features that are given below:

  • Effects and Animations
  • Scenes and Cameras
  • Data loaders and Shaders
  • Geometry and Objects
  • Debugging and Virtual reality
  • Utilities and Materials
  • Support etc
18. What do you mean by Tag In HTML?

Tags are the hidden keywords within a webpage that define how your web browser display the content. All tags must have two parts just like an opening and a closing part.

For example

opening tag (<div>) and closing tag (</div>).

These symbols (<, >) are also called angle brackets.

19. What are the advantages of tableless layout?
  • tables were used for tabular data and not for layout.
  • tableless layout make a nicer appearance.
  • <div> require less actual code than tables.
  • We can get better performance with separated out css files because then the browser can cache the presentation details between pages of our website.
  • Tableless design is more beneficial for SEO because it is tree type layout.
23. What is the use of clear in CSS?

It is a CSS property which is used to clear of an floating elements are not allowed to float. Its default value is "none". We can also use "clear:left" or "clear:right"

Most hiring managers will ask questions to understand your level of expertise in Front end development. These front end developer interview questions will help you prepare for your interview.

Must master basic front end technologies such as HTML, CSS, JQuery, and JavaScript. Additional study of third-party libraries such as SASS, LESS, AngularJS, or REACT JS is also required.