Technical front-end interviews are difficult. That’s a fact. Not only do you need to have a solid grasp of computer science fundamentals, but also an understanding of things like web performance, build systems, and CSS layout engines.
While there are resources out there, I’ve found that there are only a few complete guides for helping you prepare for a front-end interview. So I decided to write a topic by topic outline that will hopefully help you ace your next interview.
Before the interview
So before your interview, ask your recruiter for the format of the interview. Some interviews might revolve around a whiteboard while others might use an online text editor like CoderPad. It’s important to know so you can practice in the environment that your interview is going to take place in.
Also, ask your recruiter for tips on what topics to focus on when preparing. The reason behind this is because in addition to front-end specific question, some companies will ask you traditional computer science questions about topics like searching and sorting algorithms.
HTML and CSS is like the bread and butter of front-end development. During interviews, you will most likely be asked questions about the nuances of HTML and CSS. Also, be prepared to be asked to code up a layout based on a mockup.
Just in case you need an HTML and CSS refresher, here are a few basic concepts to look over.
In addition to these concepts, know about CSS preprocessors like SASS or LESS and their benefits. Also be familiar with CSS naming conventions like BEM and OOCSS.
Another important point is that interviewers look for candidates who champion CSS best practices. As a good reference, this guide written by a front-end at Medium provides insight into how Medium iterated to their current CSS architecture.
I mentioned earlier that some interviewers will ask you to recreate layouts in HTML and CSS. Practice doing so in a playground like CodePen. Check out Dribbble since it has lots of simple yet nice designs that would be fun to recreate.
Finally, as front-ends, we are so used to making changes in our editor and then verifying the change in our browser. Often times during interviews, you won’t have this luxury. When you’re preparing for your interview, try code most of your layout without looking at the result till the end.
- Prototypal inheritance
- The event loop
- Event bubbling
- Apply, call, and bind
- Callbacks and promises
- Variable and function hoisting
Computer science concepts
Some companies hire software engineers before front-end developers. What this means is that these companies expect you to be well grounded in topics like good software design principles, scalable code architecture, and testing.
If your recruiter suggests you review your knowledge of data structures and algorithms, this section is for you. Otherwise, feel free to skip this section. If you don’t have a computer science background, that’s okay. Most of these concepts are pretty straightforward to learn.
- Linked lists
- Stacks and queues
- Trees (binary trees and heaps)
Note: For graphs, also know how to implement depth-first and breadth-first search traversals.
- Binary search
- Bubble sort
- Insertion sort
- Merge sort
- Quick sort
- Selection sort
Wrapping it up
I know it’s a lot of material to take in, especially if you’re new to front-end development. Start preparing for your interview ahead of time, so you can move at a comfortable pace.
Also, remember that interviews are not a measure of your worth as a programmer. Some people are good at interviews, other are not. Sometimes you click with your interviewer, other times you don’t.
If you have any questions, feel free to leave a note or Tweet out to me. I would also love to know how your interview experience went. Good luck!
P.S. If you liked this article, it would mean a lot if you hit the recommend button or share with friends.
If you want more, you can follow me on Twitter where I post non-sensical ramblings about design, front-end development, bots, and machine learning.