This blog post will help you understand front end interviews and provide a sampling of common questions, as well as correct answers.
Table of Contents
- Understanding the Front End Developer Interview
- CSS Interview Questions
- HTML Interview Questions
- Algorithm Questions
- Ecosystem Questions
- Back End Interview Questions
- Security Questions
- Front End Interview Tools
Understanding the Front End Developer Interview
Front end interview processes can vary a lot by company. But, generally, they follow one of these two flows:
The Take-Home Interview
- Initial phone screen with a recruiter or hiring manager.
- A take-home challenge you complete on your own time.
- An onsite consisting of two or three in-person interviews. Likely covering or expanding on your take home.
The Standard Interview
- Initial phone screen with a recruiter or hiring manager.
- Phone screen with an engineer on the team.
- An onsite consisting of four or five in-person interviews.
The take-home challenges can range from building a complete front end application to a HackerRank style algorithm challenge. Sometimes a take home will be time-boxed to a set amount of time. One downside to take-home challenges is the additional time commitment. Also, if it's not time-boxed, you're essentially competing to be the person who spends the most time perfecting their answer. An upside is that most places that do take home interviews construct their follow-up interviews around the project you already completed.
This means, when preparing for front end developer interviews, you'll want to practice both the soft skills you'll need to do well on the recruiter or hiring manager screen, as well as the coding skills you'll need for the take-home and onsite.
What the Interviewer Is Looking For
When preparing for an interview, it's important to put yourself in the interviewer's shoes! If you've ever been on the other side of the table, draw on those experiences. They are likely in the middle of a workday with "Interview" on their calendar. Hopefully, they've looked at your resume and have been given some instructions from the hiring manager.
Some companies allow each interviewer to ask anything they want. Others maintain lists of "acceptable" or "banned" questions. Some even structure the entire interview process, assigning each person a specific subject to cover.
Either way, they have 45 minutes (typically) to meet you, introduce themselves, get to know you, and work through any coding challenges they may have brought. A good interviewer will outline the process in the beginning, but often they are broken down like this:
- The interviewer talks about themselves (2 minutes)
- The interview asks you to go through your recent work history (5 minutes)
- High-level technical questions (7 minutes)
- Coding challenge (25 minutes)
- The interviewee has a chance to ask questions (5 minutes)
Keep in mind some companies do things very differently. It's often a great idea to ask your recruiter for any information they can give regarding the interview process. Sometimes they will tell you the general structure, and other times they'll even give you a list of topics to study!
How To Approach Front End Developer Interview Questions
Interviews can be scary. The interviewee gets to pull a random question out of the air, and you have to get to work solving it! Keep in mind that there are many things you can do to improve your experience regardless of the question asked. Here are a few tips I always try to keep in mind:
- Don't start coding too quickly! Let them explain the question. Take a moment to make sure you really understand it. Ask clarifying questions. Maybe write a few "test cases," even if they are just pseudo code. For example, "So if I passed in the number 19837, it would return 13789"?
- Don't be afraid to ask questions. There may be some questions the interviewer won't answer, but asking questions will count in your favor most of the time!
- Break the problem down into smaller pieces. Coding challenges will often come wrapped in a big story. But at their core, they are usually relatively straightforward.
- Use magic functions! It's also quite common that you'll run into a discrete part you don't know how to solve while solving a coding challenge. Maybe you're writing code to access an API, and you've forgotten the syntax for `window.fetch`. Don't worry too much about it! Make a "magical" function like `getDataFromAPI` and just keep moving forward. It's always better to get something working than nothing at all. A well-named magic function can get you a long way. Things like `turnStringIntoArray`, `iterateThroughObject`, or `fetchChildDOMNode` can allow you to get back to the part of the problem you understand.
What is the difference between let, const, and var?
- Variables defined with const cannot be reassigned.
- Const and let variables are block-scoped.
- Var variables are function scoped.
- Variables defined with var are hoisted.
What is the difference between == and ===?
Doubles equals checks for value only. Before checking, it does any necessary type coercion. For example, the string "1" will be == to the integer 1, but it will not be ===. Many projects these days prefer to always use ===. Although, some folks advocate writing code that works well with the == type coercion.
What options do we have to store data?
You can grab a DOM node with either `getElementById` or `querySelector`. You can then get all of its children by calling `.childNodes` (note: childNodes returns a NodeList, not an Array). You can then traverse the DOM by iterating through the childNodes and calling `.childNodes` on each one of them. You can walk your way back up by checking any node's `parentNode`.
For more information, check out all of the properties stored on DOM nodes.
CSS Interview Questions
What is the box model?
The CSS box model refers to the way CSS handles layout. Each element is composed of its content, padding, border, and margin.
Know your CSS selectors!
Many interview questions will require you to know class selectors like `.foo` and id selectors like `#bar`. It's also good to know that you can select siblings `div + p`, Descendents `div p`, and children `div > p`.
If your CSS has two conflicting selectors, who wins? For example, if you write
Will the word "hello" be red or blue? To solve this, CSS has a priority order for which types of selectors win over other ones. `!important` tags are the strongest, and the universal `*` selector is the weakest. For a fun illustration to help you learn CSS specificity, check out specifishity.com.
What are pseudo-elements?
Pseudo-elements are keywords that let you specify specific parts of an element instead of the entire thing. For example, you can select an element's `::first-line` or select `::before` an element.
What is Flexbox?
Flexbox is a W3 specified layout system for CSS. It allows you to easily position elements inside a container even if the size of that container is dynamic. You should familiarize yourself with some basic Flexbox layouts. Some free resources include:
What is CSS grid?
Grid is a W3 system for making entire page layouts. CSS Grid is great for literal grids and full pages, whereas Flexbox is great for groups of items on a page. Some free resources include:
HTML Interview Questions
What does semantic HTML mean?
Semantic HTML means using the most appropriate tag for the task at hand. It means using meaningful elements such as `<form>`, `<article>`, and `<table>` instead of only using `<div>` and `<span>`.
What is Web Accessibility?
Web Accessibility means making sure the web is usable by people with a wide range of disabilities. It includes making sure keyboard-only users can navigate your site while also making certain people who have difficulties hearing or seeing can use it as well.
What is the difference between a tag and an attribute?
HTML tags are elements. Think `<a>`, `<button>`, and `<div>`. HTML attributes describe characteristics of elements. Think `src`, `class`, and `id`.
What is the difference between inline and block elements?
Inline elements cannot have a height or width. Examples of inline elements include span, a, and img. Block elements get their own line and take up the full width available. Examples of block elements are div, p, and h1.
Display none vs. visibility hidden
Both display none and visibility hidden will hide the element from the page. The difference is that with display none, no space will be allocated for the element, whereas with visibility hidden, a blank space will appear on the page.
Front end interviews usually aren't as heavy on the data structures and algorithms as general software engineering interviews. Even so, it's still important to know how to accomplish a few everyday tasks.
You should know how to push, pop, shift and unshift. You should also know how to map, reduce, and filter.
Lesser used data structures
Sometimes, other data structures will come up during an interview. You might get questions about Linked Lists, Stacks, Queues, and Trees. For a quick study guide on these, check out itsy bitsy data structures.
Time and space complexity comes up from time to time in front end interviews. At the very least, it's good to understand that any algorithm you write could be used on a very small or very large data set. This means things like adding a nested for loop could have profound effects at scale. If you want to go a little deeper, it's worth reading about Big-O notation and understanding some common notations like constant time and logarithmic time. This article on Digital Ocean is a great place to start.
What are some popular front end frameworks?
What are some alternatives to writing pure CSS?
Lots of teams use a CSS preprocessor like Less or SASS. Some teams use css-in-js libraries like styled-components. Others still use utility frameworks such as Tailwind. Again, no need to learn how to use all of these, but they are nice to be aware of at a high level!
What is the difference between unit tests and end-to-end tests?
There is a ton of overlap but at a high-level unit tests mean testing your actual code. Making sure that functions return expected results when given specific inputs. End-to-end tests are intended to test the website itself, not the code. They simulate clicks and scrolls and make sure the site behaves accordingly.
What are TypeScript and Flow?
What is a bundler?
We like to author code by separating components into individual files. This makes it nice for us as developers but would be very slow if you try to force the user to load all 100+ files. Therefore we use a tool like webpack to grab all the files and concatenate them together. That way, we can serve 1 or 2 "bundles" of code instead of 100 individual files.
What is a CDN?
A Content Delivery Network like Cloudflare gives us geographically distributed servers so people can load our app from a location near them. Instead of people all over the world having to wait for files to come from your hometown.
What tools can you use to debug web applications?
All of the major browsers have a built-in set of developer tools. These can be used to look at network traffic, find errors in the console, spot memory leaks or CPU bottlenecks.
Back End Developer Interview Questions
What is an API?
API stands for Application Programming Interface. In front end development, we often use API to mean a REST service we can access with HTTP requests to get back data. For example, api.github.com/user will return information about the currently logged-in user.
What is the difference between SQL and NoSQL databases?
SQL databases (MySQL, PostgreSQL, etc.) are relational databases and come with a structured query language. NoSQL databases (MongoDB, DynamoDB) are non-relational and have dynamic schemas.
What is HTTPS?
Hypertext Transfer Protocol Secure is a version of HTTP (Hypertext Transfer Protocol) that is encrypted. This means that sensitive data like passwords are not able to be read while in transit. Any sensitive information should be sent over HTTPS. Companies like Google are even starting to push that all websites should be served over HTTPS as its become readily available and fast.
What is XSS?
What is a SQL injection?
Another type of attack. If you have a search form, for example, and when a user types in a name like "Kelly" you take that string and do an SQL lookup for it. Let's say your SQL looks like this:
`SELECT * FROM Users WHERE UserId = yourVariable`
An attacker could put something malicious in the search bar like `Kelly OR 1=1`, and now it will return a list of all users instead of just the requested one.
Front End Developer Interview Tools
There are a ton of great resources to help you prepare for a front end interview. They all cover the same things, so if you have one you prefer, definitely use it! That being said, some of my favorite tools are:
- Leetcode - The de facto interview prep site with the largest number of sample questions.
- Cracking the Coding Interview - The de facto interview prep book.
- HackerRank - A Leetcode competitor but also the site most often used for take-homes. It's nice to get some hands-on experience with their UI before you begin.
- AlgoExpert - A new site with fewer sample questions than Leetcode but premium videos for each one.
Front end interviews can be stressful! There are infinite things to learn. I always recommend people study but be sure to study at a healthy pace. Set realistic goals and a time limit when you'll start applying for jobs.
If possible, always practice with real tools like a whiteboard or the hackerrank editor. Practice not only solving problems but learning to talk while you code. Remember, don't rush into coding! Ask questions until you fully understand the problem. Also, keep in mind you can fail a question and still get an offer! Just do your best, communicate what you can, and stay open to any feedback from the interviewer. Good luck!