Top Questions and Concepts for a Front-end Engineer

Here are a few lists of some of the top questions and concepts you should be able to answer, explain, and code as a front-end engineer. I utilize the majority of these concepts everyday at work, and have been asked to answer and code these questions and concepts in front-end coding interviews. Typically, software engineering interviews will have on average 3 – 5 rounds: first over the phone behavioral and trivia (no coding), second over the phone coding interview in some collaborative code editor, in person interview on the white board with 1 or more engineers.

The language that you will most likely be coding in is JavaScript, but you may also pick a secondary language such as Python or Java especially for the algorithm section. I typically use JavaScript whenever I am asked a web and UI related question like code a slideshow. I use sometimes use Python or Java for the algorithm part of the interview because those languages give me a lot more built-in helper functions than JavaScript to help me solve my problem. It is important that you are proficient in any languages that you choose during the interview process because you are timed, and constantly needing to lookup how to use the basic functionalities of your language will waste time.

HTML

Most front-end interviews don’t get too heavy with HTML questions; therefore, in almost every interview I’ve been asked the following. At most, if shown an image of some UI element like a fancy table or form, you should be able to code it with HTML and CSS.

1. Explain the DOM.
2. Explain the Box-Model.
3. What’s the difference between block and inline level elements?

CSS

The same is true with CSS as with HTML: the questions are not too heavy. If shown a picture of some UI element, you should be able to code it with HTML and CSS. Items 1-5 on this list are the most important as they cover the core fundamentals of CSS.

1. Explain what does cascading mean.
2. Explain the precedence order of external, header, and inline styles.
3. Explain the difference between the ID attribute and the Class attribute.
4. Know the precedence order of selectors and styles.
5. Know how to use the majority of CSS selectors.
6. What is responsive CSS?

JavaScript

As far as trivia questions go in a front-end interview, you will be asked more JavaScript questions than HTML and CSS questions. Knowledge of the following nuances in JavaScript very common in an interview. Front-end engineers should be well-versed in some vanilla JavaScript, and not have to rely heavily on frameworks or libraries. The industry for front-end engineers is fast paced in that technology is constantly being updated, and what was popular last year or two years ago, may not be popular next year.

For instance, JQuery is probably the most popular and game-changing JavaScript library ever made. It has been dominant for about 8 years, with the rising trend of frameworks like AngularJS and React, the need for heavy usage of JQuery is slowing down. One year BackboneJS was the most popular, then along came EmberJS, followed by AngularJS as being the most cutting edge, and now React is the new kid on the block. Understanding vanilla Javascript will allow you to understand pick up any up-and-coming framework relatively fast. Finally, the most important benefit of knowing vanilla JavaScript, is not being dependent on theses libraries and frameworks at all. Too many external plugins can add bloat to your codebase, which comes as a cost to memory.

1. Explain prototypal inheritance.
2. Explain JavaScript Scoping rules.
3. What is Event Delegation?
4. Explain the difference between event bubbling and event capturing.
5. Know that a NodeList is not an Array.
6. What is hoisting?
7. Be able to write a class with inheritance.
8. Be able to write a class with public and private variables.
9. Explain what is unique about the “this” keyword.
10. Explain difference between the bind, call, and apply methods.
11. Be able to control the reference of the “this” keyword when defining functions.
12. What is a callback method?
13. Be able to define a function with a callback method?
14. What are closures?
15. Know how to control scope with closures?
16. What is the global scope, and how do you maintain cleanliness?
17. What is name-spacing?
18. It is best practice to include JavaScript at the bottom of an HTML file because it is more performant for the JavaScript to
19. wait until the DOM loads before executing.
20. What is the anonymous function?
21. What is a self-invoking anonymous function?
22. Know that self-invoking anonymous functions can be used for waiting on page load and name-spacing.
23. What is data-binding?
24. Know the dangers of the eval method.
25. Explain DOM reflow and how to optimize.
26. Explain what DOM fragments are.
27. Learn at least one major JavaScript framework: Backbone, Angular, React, or Ember.

Server-side

Even though you are preparing for a front-end interview, front-end engineers also need to know some knowledge of the backend, how to interact with APIs passing data back and forth from the database to the client.

1. What is the client and the server?
2. Explain what happens during the process of returning a web page on the client and server when you submit a URL in the address box.
3. Explain GET, POST, DELETE, and PUT requests?
4. Explain a RESTful API?
5. Know basic SQL.
6. Know the difference between relational and NoSQL databases.

Projects

Projects are extremely important not only for applying for front-end roles, but any software engineering position. It shows that you are passionate about what you do, motivated to constantly learn new technology outside of home work assignments, creative thinker, and have experience. Quality is more important than quantity. The projects on your resume should not resemble a typical “How-to” tutorial like a simple to-do list app. If it is, you should extend it beyond what the tutorial or class assignment required.

When I was still in college applying for internships, my projects were the first thing the recruiters cared about since I did not have much work experience. Also, publishing your code on Github or some other online hosting medium as it not only allows recruiters to review your code quality, but shows that you are contributing to the developer community. Github was one the most helpful resources when I was new to programming and first learning JavaScript as I was able to pick up advanced code styles and patterns from more experienced engineers.

1. Know how to use Git and Github.
2. Create at least 2 or 3 side projects. Quality and creativity is better than quantity. Upload them to Github.

Algorithms

Pretty much every software engineering interview process will ask you an algorithm question at some point. The purpose is to test your ability to rationalize your way through a problem, and gives your interviewer a sense of how well you can solve a problem within a given time limit. Typically you are given 45 minutes to 1 hour to solve an algorithm problem. You are expected to narrate your solution as you progress to give your interviewer insight into how you think. You will be judged on speed, code quality, and algorithm efficiency.

Solving a problem and speaking out loud can be a tricky and uncomfortable task, so it is important to practice well ahead of time. In almost every interview process you will have to solve a problem on a white board or on paper, so it is important to practice without the need to rely on a computer to debug.

Knowing the use case of common data structures are important in helping you design your algorithm, and designing an efficient solution. Below are the most common data structures that I’ve utilized in interviews. Some of the algorithm questions below requires you to use some of these data structures, and they affect the runtime efficiency of your algorithm.

Common Data Structures

1. Arrays
2. Dictionaries: Hashmaps, JavaScript Objects, and Python dictionaries
3. Binary Trees
4. Stacks
5. Queues

Sample Algorithm Questions

1. Given an unsorted array, determine if it has any duplicate items.
2. Reverse a singly linked-list.
3. Determine if a string is a palindrome.
4. Write a function that calculates the Fibonacci sequence given an integer n as the input? Write the recursive and non-recursive version.
5. Write a function that calculates the Factorial sequence given an integer n as the input? Write the recursive and non-recursive version.
6. Given a binary-tree node, perform an in-order traversal and return an array of the nodes visited.
7. Breadth First Search
8. Depth First Search
9. Binary Search
10. Implement the Flood Fill algorithm.
11. Given a graph node, determine if the graph has a cycle.
12. What is the Big-O runtime? What is the Big-O space?
13. Can your algorithm be made more efficient? If so, how?

The algorithm portion of software engineering interview process is regarded by many as the most difficulty part. Nerves definitely play a factor as I have failed plenty interviews as well. It is important to remain calm, get a good nights rest prior to the interview, and ask questions. Here are a few of my tips for passing an algorithm interview:

1. Practice! Practice! Practice! When I was new to the job hunt game, I thought there was a silver bullet solution to passing algorithm interviews, but after a few years of interviewing for different internships and full-time roles, I realized that there is none.
2. Get a good nights rest the night before the interview. You’re going to need all the brain power you can gather to solve these problems.
3. Don’t assume anything. If you are not clear on anything or the interviewer has given you a seemingly simple problem, consider all possible cases and configurations of that problem, and ask the interviewer to elaborate. For instance, if an interview gives you a problem that given an array, return true if it contains duplicates. Do not assume that the array is sorted. There are several different approaches depending on if that array is sorted or not, and if it is an unsorted array, but you wrote a solution for a sorted array, your answer will be wrong.
4. If the problem is tricky, focus on getting the naive/brute force solution first. Try to get a working solution first, before trying to optimize it.
5. Draw pictures and diagrams on the white board to help you think about the problem. Do not try to only solve it in your head if the problem is difficult. On several occasions I gotten stuck on a problem trying to solve it in my hear, but seeing a few lines drawn on the white board helped spark new ideas for a solution.
6. If the problem you are still stuck, ask for a small hint. You are allowed to ask for help, but do not ask for too many hints as points will be deducted.
7. Practice! Practice! Practice! Again, this cannot be said enough. You will fail some interviews. It happens to every one. Prepare in advance. The earlier the better. There is not magic trick to passing interviews, but experience via practice.

Algorithm Prep Resources

1. Cracking the Coding Interview by Gayle Laakmann McDowell
2. GeeksForGeeks.org
3. Glassdoor.com
4. Codewars.com
5. Hackerrank.com

System Design Question

System design questions are more open-ended questions that ask how would you build a system such as a large-scale web app. These typically do not involve coding, and are meant to test your in-depth knowledge of the role for which you are applying. Pretend you are an architect, and are supposed to give a high level overview for how the rest of the team should implement your design. You will be judged by how practical your solution is, how efficient it is, your ability to see the pros and cons of your system, the ability to consider an alternative solution, and the ability to reason a more efficient system if the interviewer notices an inefficiency. Feel free to draw diagrams on the white board to help illustrate and explain your system design to the interviewer.

These are my favorite types of questions as I like to think about architecture as well as read a lot of blog posts on how the most popular apps are built and maintained. Whenever I am ask these types of questions, I like to cover all bases of an application: UI design, user experience, code modularity, pros and cons of certain frameworks both on the front-end and backend, community support of those frameworks, traffic load scalability, code base scalability, API design, choice of database, choice of programming languages, single points of failure, etc.

1. How would you design Twitter?
2. How would you design an instant messaging system?
3. What are the pros and cons of using BackboneJS, AngularJS, and ReactJS if you needed to design a Pinterest?

Design Patterns

Design patterns have a strong presence in JavaScript development mainly do to the lack of inherent structural components that exist in most strongly typed languages like Classes. It is very easy to start writing spaghetti JavaScript code, which developed a need to more structure for the front-end of web applications. There are many types of design patterns that have risen to popularity mainly due to frameworks such as Backbone and Ember in JavaScript, and in other languages that have crossed over. To name a few: MVC, MVVM, Module, Prototype, etc. As far as front-end interviews go, I haven’t been asked too many design pattern related questions, but out of the following, items 1 and 2 below would be the most important.

1. Explain what MVC means.
2. Be familiar with the module design pattern.
3. Be familiar with the prototypal design pattern.
4. What is a non-MVC JavaScript framework?