GreatFrontEnd is hiring! Check out our jobs page!
Front End Interview Guidebook

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 of an in-browser code editor. The editor either has real-time collaboration capabilities 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. An example of online basic code editors is CoderPad.

Integrated Development Environments (IDE)

The difference between basic code editor and IDEs is that IDEs allow toggling between multiple files. They can either be in-browser or native apps 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 see updates live.
  • Use 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.

Whiteboard

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 a candidate's nightmare and big tech companies like Google and Meta/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 within a web browser.


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

EnvironmentPreviewExecute CodeAdd 3rd Party Dependencies
Online code editorNoSituationalUsually no
IDEsYesYesYes
WhiteboardNoNoNo

General Coding Tips

  • Be familiar with the useful editor keyboard shortcuts because time is of essence during interviews and every keystroke counts. Know how to:
    • Jump to start/end of line.
    • Shift lines up/down.
    • Duplicate a line.
    • Rename a symbol easily.
  • 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 of what you typed and develop via trial-and-error, which is 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 with the ultimate goal of helping you improve. Better to learn during preparation than during actual interviews.