21 Front End Developer Interview Questions (with Answers)

1.

How has working with the 'this' keyword changed in JavaScript ES6?

As a front end developer, you are expected to keep up with changes in your profession and stay current with the technologies you use. Being able to describe and discuss these is a key element of any interview. You may also want to formulate opinions as to whether these changes are beneficial and be able to describe how they impact the work you do.

William's Answer

"Fundamentally, working with the 'this' keyword in JavaScript ES6 hasn't changed that much at all. What has changed are the rules for scoping and how specific the variables are. These changes were made to correct the vagueness around which 'this' references. By adding specificity and additional variables, 'this' is now easier to work with and requires less debugging."

2.

What methodologies do you use to ensure that your web application is user-friendly?

One of the key elements front end developers need to include in their web designs is ease of use. It doesn't matter what content the web site contains or how robustly it performs if users can't easily access and navigate it. Incorporating ease of use and user-friendliness in your design will encourage the users to explore the site and take advantage of its features.

William's Answer

"Once I decide on a web site's basic structure, I turn my attention to how the users will navigate it. I design elements that make it easy to find your way around my site and locate the information you are searching for. I also access the site using various web browsers to determine what the user experience will be."

3.

Walk me through your workflow when you are creating a web page.

An interviewer will ask you this question to better understand the process you use to create a web page. They want to ensure that you have a definitive process for doing this and that it aligns with the processes they use within their organization. This is an example of an operational question. During an interview for a front end developer's job, you can anticipate that most of the questions will be operational. The best way to prepare for these is to review the processes used in your work, the job description, and your resume. This will help you anticipate the questions that will be asked and be prepared to respond to them.

William's Answer

"While every project is different, the process I use to develop a web page is relatively consistent. I start by collaborating with the website designer in the information gathering, planning, and design phase. Once we've completed this, we begin writing and assembling the content. The next step is coding, in which the structure and functionality of the web site are developed. This was followed by testing, user reviews, and launch. The website then transitions to the maintenance phase in which content is updated, bugs are fixed, and security issues are patched."

4.

Can you compare progressive enhancement and graceful degradation?

This is an example of a technical question. Technical questions ask you about concepts, processes, or procedures used in your profession. This particular question asks you to compare two of these. When responding to a technical question, you should first define each concept and then discuss their differences or similarities. Keep your answers brief and to the point, and anticipate a follow-up question.

William's Answer

"Progressive enhancement and graceful degradation are two methodologies used to move a user from older technologies to newer ones. Progressive enhancement begins by providing basic functionality to users employing the old technology, increasing the functionality for users who adopt the new technologies. Graceful degradation works in reverse. This provides full functionality for users of the new technologies and gradually degrades users' functionality who are still on older platforms or technologies. The basis behind this is to encourage users to adopt new technologies such as advanced web browsers."

5.

When working on a web development project, what do you do to improve your code's maintainability?

When interviewing for a front end developer position, you can anticipate that the interviewer will ask this common question. This is because there is a high turnover rate for developer roles because they are recruited to other organizations or promoted within the same organization. Therefore, other developers must be able to read, patch, and improve the code if the original developer is not available. Hiring managers will seek to confirm that you incorporate maintainability into your development process and that the techniques you use are similar to the ones their organization employs.

William's Answer

"Since I've been working in this role for several years, I've encountered situations in which I've been asked to work with code which has been developed by someone else. This has taught me to incorporate maintainability into my development process. Techniques I use include iterative development, such as Agile or Waterfall, making my code readable, and documenting everything. Other techniques include single responsibility, the law of Demeter, and the open/closed principle. I have never been contacted by a developer who assumed responsibility for my code to ask me to help them understand it."

6.

Which technique do you prefer to use, resetting or normalizing CSS, and why?

This is an example of a hybrid technical and operational question. It asks you about a technical concept used in a front end developer's work and then asks you for your preference. This will require you to first define the concepts, state which one you prefer, and then give the rationale behind your choice. Following this format will walk the interviewer through your answer in a logical fashion. Hence, they will clearly understand your expertise in this area, and why you prefer the technique you described.

William's Answer

"Resetting and normalizing CSS both address how individual browsers render and style the code. Resetting CSS removes all built-in browser styling. This results in individual elements relative to each type of browser styling the content and the same way. Normalizing CSS seeks to standardize built-in browser styling across all the browsers. While the results are the same, I prefer normalizing CSS to ensure a consistent user experience."

7.

Please discuss the difference between null, undefined or undeclared variables?

Another technical question asking you to discuss the differences between several terms or concepts used in this profession. To prepare for an interview, you should research the company, the products it produces, and the type of programming you're likely to encounter. You can find information about this within the company's web site and in the job description. Once you understand this, you should be prepared to answer questions related to the work they do. Any answer you provide to a question should be within the context of this.

William's Answer

"Null, undefined, and undeclared are different types and states of variables used within the JavaScript programming language. Null is a value of a variable, which is a type of object. A variable is considered undefined when it has been declared, but no value has been assigned to it. An undeclared variable occurs when the code tries to access the variable, and it has not been initialized or declared earlier using a var or const keyword."

8.

Can you explain the techniques you use to ensure front-end security?

The purpose of front end security on a website is twofold. The first is to keep the client and their data secure. The second is to prevent the client from accessing parts of the website that they shouldn't reach. Companies will be interested in how you go about performing this task since it protects both their users and the company from data loss, hacking, and liability issues. Since this is an operational question, be sure to keep your answer direct and to the point.

William's Answer

"As a front end developer, security is one of my key concerns, second only to the performance of the website. By incorporating security practices in the code's original development, I eliminate the need to be constantly fixing leaks or combating hacks. My first step in this process is to use a framework that handles security automatically. Examples of this include View, Angular, and React. I've also begun incorporating Trusted Types into my development. This is a new browser API from Google which addresses XSS issues. Finally, I compartmentalize the individual applications rather than deploying them as a single piece of code. This makes them harder to hack and minimizes the damage when there are penetrated."

9.

How would you integrate several different stylesheets into a website?

As you're probably aware, a style sheet defines how the pages will appear within a website. Since style sheets have a great deal of overhead and require individual HTTP requests, developers often seek to minimize the number that they use. While one is ideal, many developers prefer two; one for the front end and one for the site's administrative side. Even so, you should be able to describe how you integrate several style sheets, assuming that this is the current practice the organization you are interviewing with uses.

William's Answer

"When I develop a web page, I try to minimize the number of stylesheets I use. This is because they are transparent to the users, and they impact performance. However, if I use multiple style sheets, I integrate them by concatenating them into a single sheet. The best way I've found to do this is by using Gulp and initiating npm to track the dependencies between the individual style sheets."

10.

What version control systems have you worked with?

One of the key principles of developing code for any application is version control. This ensures that any changes made to the code are documented and that the developers can revert to older versions if the newly developed code does not function properly. Being familiar with and utilizing version control systems is a fundamental requirement for any front end developer. You can anticipate that you will be asked this question in virtually every interview.

William's Answer

"During my career as a front end developer, I have worked with many version control systems. These all fall into one of the three main categories, which include local, centralized, and distributed systems. The only difference between these three is how and where they are managed. The software I use for version control includes both open source, such as RCS, OpenCVS, and SCCS, and some proprietary systems. These include AccuRev, various IBM products, PTC, Razor, and Vault, to name a few."

11.

Can you explain how prototypal inheritance works?

While this technical question doesn't specifically ask you to define the term prototypal inheritance, you should start your answer by doing this. This ensures that you are responding to the right question and providing the information the interviewer is requesting. Once you define the term, you can then move on to describing how it works. Sometimes, during an interview, you may want to clarify or confirm a question before providing an answer. This is especially helpful during very technical interviews in which the terminology could have several different meanings.

William's Answer

"Prototypal inheritance is one of the forms of inheritance used within JavaScript. It differs from classical inheritance by supporting the cloning of any object and using object linking. JavaScript uses prototypal inheritance to read a property from an object if the property is missing. It also allows any function to be added to an object in the form of a property."

12.

How do you increase the performance of a new web site you develop?

This is an example of an operational question. Operational questions help the interviewer understand the techniques and processes you use to accomplish your work. When responding to an operational question, keep your answer brief and to the point. Anticipate that the interviewer will ask a follow-up question to explore the topic in more detail.

William's Answer

"There are several techniques you can employ to optimize the performance of a website. These include enabling compression, reducing redirects, leveraging browser caching, optimizing images, and eliminating render-blocking JavaScript. Of these, caching is probably the most effective."

13.

What are floats, and how they work?

This technical question asks you to define a concept used by front end developers and describe its function within a website design. As an experienced front end developer, you should easily be able to answer this question. Throughout the interview, the interviewer will ask you questions of this nature. They may switch from very easy questions like this to more complex ones. Anticipate this inconsistent questioning methodology. Continue to answer technical questions briefly and directly, and be prepared for a follow-up question, which indicates the interviewer has a specific interest in the topic they are asking about.

William's Answer

"Floats are a property that positions an element within its container and then allows text and other elements to wrap around it. Floats remove the element from the normal flow of the page. Elements with absolute positioning remain fixed and will not wrap around a float. An alternative to floats that will create the same effect is display: inline-block."

14.

Describe what CSS selector specificity is and how it works?

This technical question asks you about a specific topic within the purview of a front end developer's job. Many of the questions you will be asked during an interview will be technical. To prepare for these, you should review the terminology, processes, and concepts used in this profession to be familiar with them. You can also practice questions like this so you'll know how to format your answers. As with any question, you should be prepared for a follow-up if the interviewer wants to explore the topic in more detail.

William's Answer

"A CSS selector is used to find the HTML elements you want to style. When using a CSS selector, specificity occurs if there are two or more CSS rules that point to the same element. The browser will select the rule that is more specific in defining the HTML element. This is based on a score created by the CSS selector."

15.

Talk to me about z-index and how stacking context is formed.

An interesting question that may be difficult for inexperienced front end developers to answer. It appears to be two separate questions and can be answered as such. However, the two topics addressed in this question are related. You can respond to this question by addressing this relationship. How you respond to a question like this is not as important as demonstrating your knowledge of the topic and providing the information the interviewer is looking for.

William's Answer

"Z-index is a CSS property that determines the z-order of an element position within the container and its descendants. Elements with larger z-index cover or overlap those with smaller ones. This is also known as stacking context. Stacking context allows an element with a fixed position to overlap one with a large z-index, especially if the z-index value is auto."

16.