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 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.
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:
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:
| 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 to help you improve. Better for that to happen during practice than during actual interviews.