Interviews can be frustrating and disappointing.
For employers, interviewing developers is a time-consuming process that requires diplomacy as well as technical skills.
Of course, hiring the wrong person can be just as bad for your company’s bottom line. The candidate might lie about their experience, not work well on a team or simply have poor communication skills.
A host of factors goes into the making of a good interview, including—but certainly not limited to—company size, job type, and candidate experience level.
Front-end engineers should possess a fundamental understanding of design, as well as skills needed to create basic elements such as navigation menus and drop down lists.
They also need to be able to work with back-end coding languages like HTML or PHP in order for the site's interface to function properly.
This guide will show you how to create strong interview questions, structure your interviews properly, assess a candidate’s skills effectively, and get constructive input from the person being interviewed.
“Take the guesswork out of assessing candidates at all experience levels. Access to a live coding environment, built-in video calls, and a comprehensive question bank tailored to your needs. Start your free trial now ”
The most important step in hiring a front-end engineer—or any other employee for that matter—is preparing for the interview.
A well-prepared interviewer demonstrates to candidates that your company considers their experiences as seriously as you do and is an environment where they might want to work.
The preparation that counts most is matching your interview questions to the candidate's level of experience and background.
In a moment, we’ll talk about how to create good junior, intermediate and senior developer interview questions.
However here are some points you should keep in mind when choosing or creating interview questions at any level:
What technologies is the candidate familiar with?
If you're open to training new hires on the tech stack you use, then create a Plain Text question and let them answer in their preferred language.
If you ask a question about a specific framework or language, then your answer should be written in that same framework or language.
What kinds of experience with one technology can a candidate transfer to work on another?
For example, if you ask a question that involves Angular and the person being interviewed has used it before but never Vue (or vice versa), is he or she able—with enough time and patience—to come up with an answer using some common concepts from their previous experiences?
Is the question relevant to what you’d expect this person to be doing in a real-world scenario?
Don't ask computer science trivia or algorithm questions—make sure your interviewees know they're being asked about their actual job.
By evaluating skills that are actually relevant to the role, you can mitigate bias that favors people with traditional backgrounds.
Junior developers
For junior developers, focus on basic coding principles and concepts. This usually means understanding JavaScript, HTML and CSS.
A take-home assessment that is given to junior candidates can serve as a quick benchmark by which you can judge their aptitude for your team.
Once you assess candidates' coding skills, conduct live interviews to determine whether they have the skills necessary for the job.
Junior developers generally have a harder time impressing interviewers. A question that lends itself to pair programming (where you both work on the same problem together) is one way to help them shine and show their skills.
Questions to consider when writing questions for a junior developer—can they use math functions correctly for displaying HTML elements? Can they resize images like pictures and bars in a bar chart?
Generally, you’re looking for an indication of the junior engineer's ability to work independently and execute certain UI development tasks.
Intermediate developers
For intermediate developers, you should focus on their ability to execute business logic and styling. A great exercise for these devs is building a ubiquitous feature they use all the time.
Navigation bars and drop-down menus are ubiquitous in applications, so they're a good place for intermediate engineers to show off their understanding of UX concepts.
Asking candidates to create a drop-down menu as part of their application process, and we evaluate the time they spend on it versus what components are sacrificed.
While it's important to make HTML elements look good, if you spend more time on their design than the functionality of your site or app, this can be a warning sign for potential employers.
If a candidate is unable to programmatically retrieve data from an API call and populate the drop-down with that information, they may not be able to complete this task on your team.
You can also see how they cope with the design challenges that come up:
- How are drop-down menus populated?
- How does the app optimize its layout so that elements don’t cover one another?
- What is the drop-down’s effect on other elements in your layout?
An effective intermediate question should touch on multiple facets of a candidate's understanding: their ability to write CSS as well as business logic. The way they choose to address the problem can offer insight into both what they are good at and where they need more practice.
Ask them how they’d interact with different technologies and how those other systems work together to produce what users see.
They should be able to use those technologies if they need them, but the focus of their training should lie in understanding how all these components fit together into an overall application.
For example, how would they consume a message from an Apache Kafka topic? What are the fundamental differences between GraphQL and traditional RESTful API requests such as JSON or XML?
Senior developers
We recommend focusing primarily on the complex business logic they’d be working on for senior engineers. These questions should be more open-ended, as these are the types of challenges that senior engineers will usually face on the job.
For example, at Intervue, we built a customized question bank that allowed people to create and choose questions for interviews. We often asked senior-level engineers to mimic creating something like this:
- What kind of validation do they use to ensure that the different fields contain valid data?
- What is their process for making sure required fields are filled in?
- How do they ensure that if field A is left blank, its dependent field B fills in with the correct default value?
- What data structures are best suited for defining the form's appearance and behavior?
- How can they design the form so that it will be able to accommodate new categories of information?
Senior developers should have a broad technical knowledge base, including an understanding of how different technologies fit together and interact.
For this role, we ask candidates to use a GraphQL API in order to gather data from the website and display it in our user interface.
Need to assess candidates at different experience levels? Finding it hard to create relevant questions and offer insightful feedback. Book a demo with us
We recommend focusing primarily on the complex business logic they’d be working on for senior engineers. These questions should be more open-ended, as these are the types of challenges that senior engineers will usually face on the job.
For example, at Intervue, we built a customized question bank that allowed people to create and choose questions for interviews. We often asked senior-level engineers to mimic creating something like this:
- What kind of validation do they use to ensure that the different fields contain valid data?
- What is their process for making sure required fields are filled in?
- How do they ensure that if field A is left blank, its dependent field B fills in with the correct default value?
- What data structures are best suited for defining the form's appearance and behavior?
- How can they design the form so that it will be able to accommodate new categories of information?
Senior developers should have a broad technical knowledge base, including an understanding of how different technologies fit together and interact.
For this role, we ask candidates to use a GraphQL API in order to gather data from the website and display it in our user interface.
Asking a React developer to explain how vanilla JavaScript works is an effective way of assessing their knowledge. Once they've demonstrated that ability on the job, you can transition them into using framework-specific tools.
Have questions sanity checked.
Ask your teammates or other interviewers to help you revise your questions so they are clear and complete.
Ask questions that allow you to turn the interview into a dialogue.
Discussions with a candidate provide you with more insight into his or her ability to work on your team than do silent code evaluations.
Try creating questions that allow you dive deeper into the way a programmer thinks by getting at underlying logic behind their solutions.
Keep in mind that there is a deadline!
When hiring a developer, don’t ask that person to build out the whole website (which might contain thousands of lines of code) in 60 minutes.
Focus on understanding which aspects of your product or service will require implementation from a new hire and how challenging it may be for them.
Leave room for creativity.
There is rarely a single way to solve a front-end problem. Allow the candidate to start implementing their solution, then ask them questions and have them pair program with you as they continue working on it.
Create a rubric with benchmarks for various implementation stages.
Tech leads often wonder how best to assess a candidate’s ability to perform their job, whether it be for an entry-level developer looking for their first role or a seasoned engineer ready for more responsibility.
It’s always a good idea to jot down how you would approach an “okay,” “good,” and "better" implementation of the role when preparing for interviews.
By guiding the candidate in this manner, you will not only be able to determine if they are aware of their own shortcomings but also whether or not their work is consistent.
For example, we recommend using the following rubric when evaluating how well an interviewee answers questions like “do you know what a bar chart is?”:
Very simple implementation: Candidate just looks at the number of pixels to determine width.
Simple implementation: Candidate counts the number of words in each cell and divides by the total words to find out what percentage they take up.
Better implementation: Candidate rounds the percentages of all other fields to match the highest count.
Other things to look for when evaluating a table:
- How are columns sorted?
- Are high-frequency keywords at the top and low-frequency ones near the bottom, or is there no particular pattern?
- Does it seem that way only because they’re all wide enough that you can see what comes before them (even though sorting isn't really happening)?
Bonus points:
- Add graduation marks to the y-axis of your chart
- Change colors in Chart legend
- Make bars a different color for higher values
After your candidates have demonstrated their front-end skills during the interview, it’s time to see how well they can handle back-end programs.
Walk through the problem and leave room for questions
After your candidates have demonstrated their front-end skills during the interview, it’s time to see how well they can handle back-end programs.
Explain the problem first, then elaborate on how you plan to solve it.
Don't assume that your digital candidates understand what you’re looking for just because the words match.
Rather than asking candidates to look up and read the question word for word, give them a quick overview of what you’re looking for in their response. After that, let them take as much time as they need to formulate an answer before clarifying any points you feel are unclear.
Observe how they interact with your design. Do they ask questions about the choices you made or just rehash what’s already on a mockup?
The more senior a candidate is, the better you can expect them to be at thinking critically about decisions and challenges.
Do they know how to translate design requirements into a UI that is accessible to all users? Do they understand the impact of using different tools for presenting information, and when each should be used? Do they validate user input to avoid malicious or illogical data? If so, how do they ensure a scalable solution that can deal with unknown future inputs?
When you begin the interview, give candidates a moment to collect their thoughts—without watching them struggle or feeling pressure from other people in the room.
Try pair programming
Candidates put a lot of time and effort into interviewing with multiple companies.
During the interview, pair programming is a way to make your company stand out by conversing with candidates and helping them become comfortable with unfamiliar technologies.
If you have a junior dev who has never written unit tests, show them how. If you have an intermediate engineer who hasn’t used React Suspense yet, give them a quick demo and then let them try it out on their own.
You’re not only teaching them something, but you can also get insight into:
1)How they respond to criticism
2) They are eager to expand their horizons.
3) They have an ability to quickly apply new skills.
Even experienced developers can find themselves under stress in an interview setting. Pair programming reduces this natural anxiety by giving each coder half the work to do and therefore halving the amount of pressure on any one individual.
Always be curious
Just watching a candidate code is not enough. To truly understand the way he or she codes, you need to ask why they made each decision.
Why did they spend more time discussing the style sheet than the JavaScript?
How will they address future needs that may not be obvious at present?
Why would they choose to store data in many different places instead of moving it up the application stack?
If you notice something unusual and want to know more about it, ask.
If you see something that makes you uncomfortable, talk about it with them.
If the candidate gets stuck or thinks of a better way to solve a problem during that time, encourage them to let you know.
CTA: With 35+ supported languages and trusted by leading professionals, our platform is designed to make your tech hiring seamless and efficient. Sign up for a free trial
It’s important to give candidates constructive feedback and let them know that you value their input
Interviewer feedback
It is best not to frame feedback as a list of what the candidate did wrong.
Even if the person could not display even a basic understanding, it's important that you communicate both positives and areas for improvement together in one statement: “this is good and here’s how you can improve on this next time around.
When you tell someone about a mistake or error, be sure to let them know how they could correct the problem. Praise the good things you noticed in their work—but don’t lie!
While many recruiters and hiring managers are inconsiderate in their dealings with candidates, take the time to treat all applicants courteously.
Likewise, giving feedback during the interview process can tell you a lot about how someone will react when receiving constructive criticism.
In this article, we explored several aspects of conducting great front-end interviews. However, here are the highlights:
- When conducting technical interviews, you should ask different questions depending on the candidate’s role and experience level.
- When you're conducting an interview, treat it as a conversation between yourself and the candidate.
- Always thank your interviewer and ask for feedback at the end of the interview.
When the interview is over, don’t forget to:
- After the interview, stop taking notes so that you can remember as much of what is said as possible.
- Ascertain that the candidate has had a chance to review playback, and then have appropriate parties provide feedback.
- Show respect for the candidate’s time and mental health by letting them know promptly whether or not they will move on to another round (or get the job offer). There's no better way to trash your reputation than ditching applicants without notice.