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:
You could be asked to complete a question by coding using one or more of the following environments:
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.
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:
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 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:
| Environment | Preview | Execute Code | Add 3rd Party Dependencies |
|---|---|---|---|
| Online code editor | No | Situational | Usually no |
| IDEs | Yes | Yes | Yes |
| Whiteboard | No | No | No |
localhost and access them within your browser.Read on for tips for each coding interview type:
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.