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.
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:
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.
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.
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:
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:
CoffeeScript is a better option compared to JavaScript on account of the following inherent advantages.
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.
27.What are the fundamental rules to remember when using CoffeeScript?
The two basic rules for CoffeeScript are:
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.
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: