User Interface Coding Interviews
User interface coding interviews will involve candidates writing HTML, CSS and JavaScript to complete. In our opinion this is essential for evaluating the skills of Front End Engineers and more companies are moving towards asking candidates to code user interfaces during interviews.
The user interfaces that candidates are asked to code can range from really small UI components to more complex client-facing products like small apps and games.
Examples
User Interface Components/Widgets/Layouts
- Components: Accordion, Tabs, Star Rating Widget, Tweet, Image Carousel.
- Widgets: Digital Clock, Analog Clock.
- Page Sections: Signup Form, Holy Grail
Apps/Games
The time allowed for apps/games questions is usually longer than components/widgets. Depending on how complex the question is, you may spend up to half an hour or even an hour to complete the question, especially if you are asked to build games.
- Apps: Todo List, Stopwatch, Temperature Converter.
- Games: Tic-tac-toe, Whack-a-mole, Snake, Tetris, Minesweeper, Connect 4.
Observe that most games will be 2D grid-based games. Make sure you know how to create grid layouts in HTML and CSS!
What to do during User Interface Coding Interviews
User interface coding interviews share a fair bit of similarity with non-front end coding interviews. In general, you should:
- Find out what platform you are coding on and familiarize yourself with the coding environment:
- Whether you will be using a local IDE or an online one. If local IDE, will you be using your own laptop?
- The supported editor shortcuts.
- Whether you can use JavaScript libraries/framework or have to use vanilla JavaScript.
- Whether you can execute code and preview the UI.
- What are the latest supported JavaScript syntax and language features?
- Whether you can install dependencies beforehand.
- Make your self introduction under a minute. Unless requested, do not take longer than this otherwise you might not have enough time to code.
- Ask clarifying questions upon receiving the question. Clarify the following:
- Can you use the newest JavaScript syntax?
- Browser support, as this will affect the browser APIs you can use.
- Break down the problem into stages/milestones that build on top of each other. Communicate this breakdown to your interviewer. Unlike coding interviews, the focus of User Interface coding interviews is usually around the component states and APIs as opposed to complex data structures and algorithms.
- Code out your solution and explain your code to your interviewer while you are coding.
- Where possible, test your code in the browser after every milestone/feature added, instead of only at the end.
- Refer to the User Interface Questions Cheatsheet for a list of things to take note of during User Interface coding interviews.
- After coding, read through your code once and try to spot basic errors like typos, using variables before initializing them, using APIs incorrectly, etc.
- Outline some basic test cases and some edge cases. Test your code with these cases and determine if your code passes them. If it fails, debug the issue(s) and fix them.
- Explain any tradeoffs you made, cases you explicitly didn't handle, and how you would improve the code if you had more time.
- The interview might not end here, the interviewer might have follow-up questions for you on this question or give you another question. Be prepared for them.
How to Prepare for User Interface Coding Interviews
- Be familiar with the topics under the "Important Concepts" below. The Quiz section can also be a good start since you might be asked on these concepts in the form of quiz questions during coding.
- It's best to learn how to build UIs in both Vanilla JavaScript and a UI framework of choice. Most companies will allow using JavaScript UI frameworks but some companies (e.g. Google) mandate that you can only use Vanilla JavaScript.
- Vanilla JavaScript: Learn the DOM manipulation APIs. At the very least you should know how to create new DOM elements, add classes/attributes to them, and add child elements. If you come from a jQuery background, check out You might not need jQuery, a website showing you how to accomplish the common jQuery operations in Vanilla JavaScript. You will be pleasantly surprised to find out that with modern browser APIs there isn't really much need for jQuery anymore.
- JavaScript UI framework: Be familiar with a UI framework of choice. Stick with the framework that you are most familiar with. There's no need and also probably not enough time to learn a new framework. If you are new to JavaScript UI frameworks, React will be our recommendation as it is the most popular library/framework to build UI right now and what most companies look for when hiring front end engineers.
- Be familiar with writing CSS under interview conditions (small questions which won't require writing that much CSS):
- Write Vanilla CSS: Learn to write CSS without reliance on preprocessors like Sass/Less. Not all coding environments will allow using processors and interview questions are likely small and do not really benefit from the features CSS preprocessors bring. The most useful feature of CSS processors is the use of variables, which is available natively via CSS custom properties (CSS variables).
- Adopt a CSS naming convention: Consider adopting a CSS naming methodology like Block Element Modifier when writing your classes.
- Read our User Interface coding deep dive guides:
- Pick a study plan and practice the User Interface coding questions recommended for the selected study plan.
- Spend roughly equal amount of time practicing building both UI components and building apps/games. Both are equally important.
Important Concepts
| Category | Important Topics |
|---|---|
| Data Structures | Arrays, Maps, Stacks, Trees, Sets |
| Software Engineering | SOLID Principles, Design Patterns, Model-View-Controller |
| HTML | Semantic HTML, Form validation, Form submission |
| CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, CSS custom properties (variables) |
| JavaScript | Closures, Callbacks, Promise, async/await, Handling variadic arguments |
| DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation |
| Runtime APIs | Timer (setTimeout(), setInterval()), Network (Ajax, fetch()) |
| Accessibility | ARIA roles, states & properties, Keyboard interactions |
User Interface Coding Interview Rubrics
User interface coding interviews have similar rubrics as to JavaScript coding interviews as both involve coding in the front end domain. However, user interface coding questions will have even more emphasis on domain expertise and the various front end topics.
- Problem Solving: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs.
- Software Engineering Foundation: Familiarity with data structures, algorithms, runtime complexity analysis, use of design patterns, design solution with clean abstractions.
- Domain Expertise: Understanding of the front end domain and the relevant languages: Browser (DOM and DOM APIs), HTML, CSS, JavaScript, User Experience, Accessibility, i18n, Networks, Performance.
- Communication: Ask questions to clarify details and clearly explaining one's approach and considerations.
- Verification: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise.
Best Practice Questions
From experience, the best UI interview questions to practice, as determined by frequency and important concepts covered are:
- Todo List
- Signup Form
- Temperature Converter
- Progress Bar
- Analog Clock
- Job Board
- Whack-a-mole
- Tic-tac-toe
- Tabs
- Image Carousel
- Autocomplete
- Dropdown Menu
- Modal
GreatFrontEnd has a comprehensive list of User Interface coding questions that you can practice in your framework of choice (currently supports Vanilla JavaScript and React). We also provide manual tests cases you can test your code against to verify the correctness and solutions written in the various JavaScript UI frameworks by ex-FAANG Senior Engineers. Automated test cases are not provided for UI questions because they tend to be coupled to implementation and hard for automated tests to test accurately. Moreover, during interviews you likely have to test your UI yourself.
Many of GreatFrontEnd's coding questions are also broken down into stages, which get progressively harder. In interviews, your interviewer might only explicitly request for the basic functionality. However, after you complete the basic functionality, you can take the initiative to add on more features to improve on the basic version and handle more edge cases. An example of a question broken down into stages:
- Accordion: Build a basic accordion that focuses on rendering and show/hide functionality.
- Accordion II: Build an accordion with improved accessibility that has the right ARIA roles, states, and properties.
- Accordion III: Built a fully-accessible accordion that has keyboard support according to ARIA specifications.
Building the basic accordion component might let you pass the interview, but nailing the accessibility aspects will help you score more points and possibly put you at senior level.
Note that we are intentionally vague in some of the questions and don't present the full requirements upfront in the question description. However, we'll cover as much ground as possible in the solution. It may be frustrating while reading the solutions to see that you've missed out some things, but this trains you to think ahead and consider what are the possible areas you have to take note of when working on the solution. Better to find out during practice than during actual interviews.