Front End Interview Guidebook/Preparation by Question Type/Coding Questions

Front End Interview Coding Questions — How to Prepare

Guide to preparing for coding questions in front end / web developer interviews — What to expect, coding tips, and 100+ important practice questions.

Coding interviews is the primary way in which Front End Engineers are being evaluated and can span across multiple rounds and stages of the interviews, hence it is super important to practice for coding interviews. To recap, here are the three types of coding questions you can be asked:

  • Algorithmic Coding: Solve tricky algorithmic questions that evaluates your understanding of data structures, algorithms and time complexity.
  • JavaScript Coding: Implement functions or data structures in JavaScript that are related to front end domain and commonly used during front end development.
  • User Interface Coding: Build user interfaces (components, widgets, apps) using HTML, CSS, and JavaScript, sometimes even using JavaScript frameworks.

Coding Environment

You could be asked to complete a question by coding using one or more of the following environments:

Online Basic Code Editor

You will be given a URL to access which contains an in-browser code editor. Your interviewer can see the updated code in real-time or you will be asked to share your screen. These basic code editors usually only have one pane because the question doesn't need using more than one language to complete, e.g. algorithmic/JavaScript coding questions. You may or may not be allowed to execute your code. Examples of online basic code editors include CoderPad.

Integrated Development Environments (IDE)

IDEs can either be in-browser ones which resemble the modern IDEs you use for development, or using your own IDEs on your laptop. You will usually be asked to use IDEs when you have to build user interfaces and have to use multiple files or type in more than just a single language. This is the best environment available as it closely resembles how most engineers develop. Subject to interviewer approval, you should be able to:

  • Preview the in-progress UI and iterate on it.
  • View the browser console for debugging.
  • Use IDE features like syntax highlighting, keyboard shortcuts, autocomplete, intellisense, extensions to boost your productivity.
  • Add any necessary 3rd party dependencies.

Always choose to use an IDE if you are given a choice.

Examples of online IDEs include JSFiddle, CodePen, CodeSandbox, and StackBlitz.


At certain companies, you could be asked to write all required code on the whiteboard. Imagine writing HTML and CSS on the board without being able to preview it! This is certainly a candidate's nightmare and only Google and Facebook are known to do this during onsite interviews. Most other companies either get you to bring your own laptop and you code on your local IDE or an online code editor/IDE.

Here's a summary of the various coding environments and what you can do:

EnvironmentPreviewExecute CodeAdd 3rd Party Dependencies
Online code editorNoSituationalUsually no

General Coding Tips

  • Be familiar with editor keyboard shortcuts. Time is of essence during interviews and every keystroke counts.
  • Find out beforehand if you will be coding on your own laptop, a laptop given to you, or the whiteboard.
    • If you will be coding on your own laptop and can use your own IDE, ensure that the IDE is functioning properly, Node.js and npm are installed correctly, and that you can run local web servers on localhost and access them within your browser.
  • Do not be too reliant on preview and execution of code. This suggests to your interviewer that you aren't sure what of what you typed and develop via trial-and-error, which is certainly not a positive signal.

Type-specific Tips

Read on for tips for each coding interview type:

Practice Questions

GreatFrontEnd has a long list of coding questions you can practice and you should definitely take the time to check them out.

Note that we are intentionally vague in some of the questions and don't present the full requirements in the question. This is to train you to think ahead and consider what possible things you have to take note of when working on the solution.

However, we'll cover as much ground as possible in the solution. It may be frustrating while reading the solutions to realize that you've missed out some stuff, but it's a learning experience to help you improve. Better for that to happen during practice than during actual interviews.

Resume Preparation