Front End Engineer Interview Questions

Front End Engineer Interview Questions

A front end engineer is focused on the user experience of software or an app. During an interview, you will need to demonstrate that you understand UX/UI design principles, a commitment to clean code optimized for the product offering, and a willingness to work with backend engineers to solve problems. Expect to be asked about your technical experience, as well as your people management and design skills.

Top Front End Engineer Interview Questions & How to Answer

Question 1

Question #1: What is your preferred workflow/management style?

How to answer
How to answer: Outline what tools and methodologies you use to manage the development of a product. Talk about the strategies you use to work with a diverse range of stakeholders, including clients, sales and marketing, and back end engineers. Use specific examples to show how your workflow has been successful, and also express a willingness to adapt and change when necessary.
Question 2

Question #2: How do you manage testing, reviews and version control?

How to answer
How to answer: A lot of a front end engineer's role involves the nitty gritty details that make sure a user's experience is seamless. Highlight that you understand the importance of good clean code, testing protocols, and version management. Use examples of methodologies you have used and what problems they addressed or solved.
Question 3

Question #3: What excites you most about the UX/UI space?

How to answer
How to answer: A question like this is your opportunity to show that you are passionate about front end engineering. Explain how you integrate user-centered design in your projects and the philosophies that you follow. Outline any books or articles you have read and what you agree with. If possible, talk about what changes you foresee and how you think design and technology will adapt to those changes.

21,103 front end engineer interview questions shared by candidates

1. In JavaScript, write a function that takes an array as input that can contain both ints and more arrays (which can also contain an array or int) and return the flattened array. ex. [1, [2, [ [3, 4], 5], 6]] => [1, 2, 3, 4, 5, 6] 2. Using HTML and CSS, show how you would create an image that would display another image (aligned to the bottom, right) when the user hovers over the image. ex. The Facebook "edit profile picture" icon
avatar

Front End Engineer

Interviewed at Meta

3.6
Feb 21, 2014

1. In JavaScript, write a function that takes an array as input that can contain both ints and more arrays (which can also contain an array or int) and return the flattened array. ex. [1, [2, [ [3, 4], 5], 6]] => [1, 2, 3, 4, 5, 6] 2. Using HTML and CSS, show how you would create an image that would display another image (aligned to the bottom, right) when the user hovers over the image. ex. The Facebook "edit profile picture" icon

Given a grid of characters output a decoded message. The message for the following would be IROCKA. (diagonally down right and diagonally up right if you can't go further .. you continue doing this) I B C A L K A D R F C A E A G H O E L A D
avatar

Front End Engineer

Interviewed at Meta

3.6
May 28, 2015

Given a grid of characters output a decoded message. The message for the following would be IROCKA. (diagonally down right and diagonally up right if you can't go further .. you continue doing this) I B C A L K A D R F C A E A G H O E L A D

If you were building a search tool and wanted search results to pop up as you typed but the server call was taxing, write a function that gets called on every key down but calls the server when the user stops typing for 400ms.
avatar

Front End Engineering Intern

Interviewed at Meta

3.6
Jan 13, 2015

If you were building a search tool and wanted search results to pop up as you typed but the server call was taxing, write a function that gets called on every key down but calls the server when the user stops typing for 400ms.

// Given var endorsements = [ { skill: 'css', user: 'Bill' }, { skill: 'javascript', user: 'Chad' }, { skill: 'javascript', user: 'Bill' }, { skill: 'css', user: 'Sue' }, { skill: 'javascript', user: 'Sue' }, { skill: 'html', user: 'Sue' } ]; getSkills = (endorsements) => { // Result // [ // { skill: 'javascript', user: ['Chad', 'Bill', 'Sue'], count: 3 }, // { skill: 'css', user: ['Sue', 'Bill'], count: 2 }, // { skill: 'html', user: ['Sue'], count: 1 } // ]; } see this image: http://i.imgur.com/UIeB3n4.png
avatar

Front End Developer

Interviewed at LinkedIn

3.8
Jan 8, 2019

// Given var endorsements = [ { skill: 'css', user: 'Bill' }, { skill: 'javascript', user: 'Chad' }, { skill: 'javascript', user: 'Bill' }, { skill: 'css', user: 'Sue' }, { skill: 'javascript', user: 'Sue' }, { skill: 'html', user: 'Sue' } ]; getSkills = (endorsements) => { // Result // [ // { skill: 'javascript', user: ['Chad', 'Bill', 'Sue'], count: 3 }, // { skill: 'css', user: ['Sue', 'Bill'], count: 2 }, // { skill: 'html', user: ['Sue'], count: 1 } // ]; } see this image: http://i.imgur.com/UIeB3n4.png

Write an emitter class: /* emitter = new Emitter(); // 1. Support subscribing to events. sub = emitter.subscribe('event_name', callback); sub2 = emitter.subscribe('event_name', callback2); // 2. Support emitting events. // This particular example should lead to the `callback` above being invoked with `foo` and `bar` as parameters. emitter.emit('event_name', foo, bar); // 3. Support unsubscribing existing subscriptions by releasing them. sub.release(); // `sub` is the reference returned by `subscribe` above */
avatar

Front End Engineer

Interviewed at Meta

3.6
Nov 17, 2016

Write an emitter class: /* emitter = new Emitter(); // 1. Support subscribing to events. sub = emitter.subscribe('event_name', callback); sub2 = emitter.subscribe('event_name', callback2); // 2. Support emitting events. // This particular example should lead to the `callback` above being invoked with `foo` and `bar` as parameters. emitter.emit('event_name', foo, bar); // 3. Support unsubscribing existing subscriptions by releasing them. sub.release(); // `sub` is the reference returned by `subscribe` above */

Viewing 11 - 20 interview questions

Glassdoor has 21,103 interview questions and reports from Front end engineer interviews. Prepare for your interview. Get hired. Love your job.