Front End Developer Interview Questions and Answers

1.What is meant by Front-End Developer?

Front-end web development is the practice of producing HTML, CSS and usually JavaScript (while Web Assembly is a recent alternative to it) for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front-end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing

2.What makes up a good Front-End Developer? What are his responsibilities?

Before speaking about who a Front-End Developer is, it is important to know what front-end is all about. Front-End, for a website, concerns all the components that the user accesses as part of his interactions with the website. So, it is all about the inclusion of buttons, color schemes, images, forms, animations and typography.

So, the job of a front-end developer basically involves the creation of user-friendly components of a website. He is a software programmer who writes codes for all the features of a website that will improve its functionality, in a number of creative ways. Making the best use of his innovative and creative web development skills, it is the prime responsibility of a front-end developer to ensure that the look and feel of a particular website is uniform across different web browsers.

3.How you can 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.

4.Can you describe your workflow when you create a web page?

The workflow of a modern front-end developer has changed vastly in the past four or five years. A huge array of tools are available to build organized, scalable web applications by abstracting out many of the complexities and automating repetitive tasks. Each developer will share a different workflow which will give some insight into their organizational capacity and general technical preferences.

5.Can you list all the technical and additional skills that are required by a front-end developer?

A good front-end developer should have working knowledge about:

• CSS
• HTML
• JavaScript
• JQuery

Apart from the above mentioned technical skills, a front-end developer will become an asset to an organization provided he possess the below mentioned “good-to-have” skills.

• Basic knowledge about SEO and tools like Dreamweaver and Flash which are used to present web-based information to end users
• Information about cross browser testing
• Knowledge of any of the Content Management Systems (CMS) like Drupal, WordPress and Joomla
• Knowledge about Object Oriented Programming languages like OOPS and PHP

6.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).

7.What Are The New Features Introduced In HTML5?

HTML5 introduces a number of new elements and attributes that help in building an attractive webSite, that we see nowadays.

It supports following new features.

• New Semantic Elements – These are like <header>, <footer>, and <section>.
• Forms 2.0 – It contains improvements to HTML web forms. It has introduced new attributes for the <input> tag.
• Persistent Local Storage – With HTML5, it is possible to achieve this, without resorting to third-party plugins.
• WebSocket – It facilitates setting up a bidirectional communication for web applications.
• Server-Sent Events(SSE) – These events got introduced in HTML5. The direction of the flow of the execution of these events is from the server to the Web Browser.
• Canvas – It supports a two-dimensional drawing surface that is programmable using JavaScript.
• Audio & Video – It allows embedding audio or video on the web pages without resorting to third-party plugins.
• Geolocation – It facilitates the visitors to share their physical location with the web application.
• Microdata – It allows building our personal vocabulary beyond HTML5 and extends our web pages with those custom semantics.
• Drag and drop –It supports to Drag and drop the items from one location to another location on the same Web page.

8.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.

9.If you arrive to a new company that has 3 competing stylesheets, how would you best integrate them into the site?

A stylesheet is template file consisting of font and layout settings to give a standardized look to a website or web application. To keep a consistent look and feel to a project, there should only be one stylesheet. I like to ask this question to judge problem-solving, communication and team skills.

10.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.
11.What Would Happen If The HTML Document Does Not Contain <!DOCTYPE>?
It instructs the Web Browser about the version of HTML used for creating the Web page.
If the developer misses declaring the DOCTYPE information in the code, then new features and tags provided by HTML5, like <article>, <footer>, and <header> will not be supported. Additionally, the Browser may automatically go into Quirks or Strict Mode.

12.Can you explain what Three.js is and quote its key features?

Three.js is an open-source JavaScript 3D library that allows you to create and display animated 3D computer graphics in a web browser. This is an API which uses WebGL to create impressive web demonstrations. And the best part of Three.js is that you can display all these graphics without depending on exclusive plug-ins.

Important features of Three.js along with their various functions are:

• Renderers: – canvas, svg, WebGL, CSS3D, DOM, Software; effects: stereo, cross-eyed.
• Shaders: – You can completely access GLSL capabilities which include: lens flare, depth pass and the all-in-one post-processing library.
• Scenes: – You can add or delete objects at run-time.
• Cameras: – Allows you to make the most of Orthographic and Perspective controllers like Trackball, FPS and Path.
• Lights: – This feature allows you to flip between various lighting options like spot and point lights, additionally permitting you to cast and receive shadows.
• Animations: – You can morph and perform Keyframe operations.
• Materials: – Your website can sport a smooth-shading, with various options coming in the form of textures and sheen. Phong, depth, lambert and face are some of the capabilities that you can employ.
• Objects: – Through this feature, you can create meshes, lines, sprites, ribbons and particles
• Geometry: – Modifiers like tube, lathe and extrude are available along with facilities to draw geometrical figures like cubes, spheres and cylinders
• Export/Import: – With this feature, you can work with CTM, Blender, FBX and OBJ
• Debugging: – WebGL Inspector, Stats.js and Three.js inspector are the features under this head
• Loaders: – This feature facilitates JSON, binary, scene, XHR and Image
• Support: – You can check out the world of information that is available in the form of public forum, API documentation and Wiki

After answering the above questions, you may be asked a series of questions related to CoffeeScript.

13.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.

14.Have you ever used an MVC? Which one and what do you like and dislike about it?

MVC stands for model view controller. MVCs typically organize webapps into a well-structured pattern, making code easier to maintain. The term is well-known by developers and some famous examples of MVCs include backbone.js and angular.js. What makes this question interesting is not whether the frontend interviewee has used an MVC, but what his or her preferences and experience reveal. Candidates who are able to articulate why they use one MVC over another show that they are engaged in what they do, care about the technology and have considered different options. You want to be able to trust your frontend developer to keep up to date with which technologies are relevant and have a clear idea of when and what should be used.

15.How do you clear a floated element?
clear:both
16.What Is A Tag In HTML?
A tag instructs the Browser about how to format the HTML properly. When you write an HTML page, you enter tags for many reasons to change the appearance of text, to show a graphic, or to make a link to another page. HTML uses symbols like “<” and “>” to enclose the tags. And symbol “\” for closing the tag.

17.What is CoffeeScript? What are the Ways in which CoffeeScript is Superior to JavaScript?

CoffeeScript is a small programming language that helps you fine tune JavaScript code. This language which compiles into JavaScript is a perfect alternative to the irregular syntax of JavaScript. Consistency in syntax is what makes CoffeeScript superior to JavaScript. Here are the basic rules for CoffeeScript:

• Absence of curly braces
• Functions that take arguments do not need parentheses

CoffeeScript is a better option compared to JavaScript on account of the following inherent advantages.

• CoffeeScript simplifies your daily programming chores in contrast to JavaScript.
• CoffeeScript cuts down on coding requirements and permits you to express your program with small codes, when compared to JavaScript.
• Through CoffeeScript, you can make the most of the lightweight add-ons like Python style list comprehension and Ruby string interpolation.

18.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.

19.What are your favourite features of HTML5 and CSS3 and what would you change?

But rather than keeping up with new technologies, it reveals whether the front-end developer being interviewed is also up to date with new features within the core technologies.

20.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.
21.What Is The Difference Between HTML Elements And Tags?
HTML elements communicate to the Browser how to represent the text. They become HTML tags when enclosed within angular brackets <>.

22.How are the variables of CoffeeScript different from those of JavaScript?

In JavaScript, variables need to end with a semi-colon for them to be executed. However, with CoffeeScript, there is no necessity to add a semi-colon at the end of every statement. Hence, CoffeeScript simplifies the process of adding a semi-colon to variables.

23.What is 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.

24.In your view, what’s the difference between Frontend Developers and UI/UX designers and where do these positions overlap?

There is no definitive answer to the question, but it will give a frontend developer the chance to evaluate their own experience and also reveal their expectations. To a certain extent the difference between UI/UX and front-end development is the difference between design and implementation. UX/UI tends to look more at the human-side of the design process, including undertaking research by asking the questions about how users interact with a website, which would then form the basis for design concepts. A UX/UI would also do testing and evaluation post-implementation. Understanding the front-end needs of your own company before asking this question gives an insight into the candidate’s potential fit.

25.What is a java script 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.

26.What Are The Various Elements Provided By HTML5 For Media Content?

HTML provides the support of following elements for representing the media content.

• <audio> – It defines the sound content.
• <video> – It represents the video content that needs to be attached to a Web page.
• <source> – This tag defines the source of video and audio.
• <embed > –It provides a container for an external application.
• <track> – It defines text tracks for video and audio.

27.What are the fundamental rules to remember when using CoffeeScript?

The two basic rules for CoffeeScript are:

1. Importance is given to whitespaces, which is why it doesn’t require curly braces.
2. The absence of parentheses is another rule of CoffeeScript. Through this, you can write functions to take arguments without the need of parentheses.
3. What Are The New Form Elements Made Available In HTML5?

When we want to collect some data from the person visiting our site, we use HTML Forms. An example is, the user has to enter his name, email id when he registers for the first time.

A form takes input from the site visitor and then posts it to a back-end application such as CGI, ASP Script or PHP script. The back-end application will then perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available in earlier version of HTML like, text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.

HTML5 provides the support of some new Form elements that are as follows.

• <datalist> – It represents a list of pre-defined options for input controls.
• <keygen> – It defines a key-pair generator field (for forms).
• <output> – It represents the result of the calculation.

29.Lets look at the design of our website. Talk me through the features that draw your attention. What do you like, what do you dislike? What would you change?

This question is also different from a personal evaluation of one’s own work as it requires a certain amount of analysis about styling and techniques used. The ability to clearly articulate your creative preferences is an important characteristic of a frontend developer. This question puts people on the spot: generally developers would need 20-30 minutes to look at the page and underlying implementation, so before the interview we tend to tell the person we will be asking this. It can also work very well as a case study for a frontend developer.

30.What are the applications of clone-function in CoffeeScript?

If you wish to create a completely new object in CoffeeScript, you can rely on the Clone function. You can do this in the following ways:

• You need to copy all the attributes from the source object to the new object
• You then need to repeat all the steps of copying attributes from the source object for all the sub-objects. To perform this function, you need to call the Clone function
• The last step allows you to create a new object similar to the source object