Ans: 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
Ans: 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.
Ans: Below is the list of best practices for front-end technology, which helps to optimize page.
Ans: 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.
Ans: 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.
Ans: 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).
Ans: 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:
Ans: 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.
Ans: 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.
Ans: Visibility:Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes no space.
Ans: 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.
Ans: 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.
After answering the above questions, you may be asked a series of questions related to CoffeeScript.
Ans: 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.
Ans: 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.
Ans: clear:both
Ans: 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.
Ans: 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.
Ans: There are several reasons why web designers should stop using tables for layouts, and adopt the use of CSS for controlling HTML layouts.
Ans: 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.
Ans: 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.
Ans: HTML elements communicate to the Browser how to represent the text. They become HTML tags when enclosed within angular brackets <>.
Ans: 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.
Ans: 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.
Ans: 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.
Ans: 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.
Ans: HTML provides the support of following elements for representing the media content.
Ans: The two basic rules for CoffeeScript are:
Ans: 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:
Ans: 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.
Ans: 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: