What you must know as a frontend developer
Frontend Interview Topics
To develop the skills needed to ace a frontend interview, you need to familiarize yourself with the sort of topics that a question might involve. Below are a list of topics that are commonly explored during Frontend interviews:
General Web Knowledge
You should have a solid understanding of the technologies and paradigms of the web such as:
- HTTP requests: GET and POST and their headers like Cache-Control, ETag, and Transfer-Encoding
- REST vs RPC
- Security: When to use CORS, JSONP, and iFrame policies
You should expect your interviewers to examine your code or design and its performance implications. The web is rapidly changing and you’ll be expected to understand the complexities of web performance, including:
- Critical rendering path
- Service workers
- Image optimization
- Lazy loading images and video
- Preload, preconnect, and prefetch
- Minimize browser reflows
- Rendering performance
Many candidates struggle to traverse and manipulate the DOM, particularly if they’ve been using jQuery or writing React and Angular apps. You should know how to do the following without using a library:
- Select or find nodes using document.querySelector
- Traverse the DOM
- Manipulation: Add, remove, copy, and create nodes in the DOM tree
- Performance: Document fragments and node caching
- Binding: Call, Apply, and Bind & Lexical This
- Execution Context: Scoping & Closures
- Prototypal inheritance
- Event Delegation and Bubbling
- Type Coercion, and using typeof, instanceof, and Object.prototype.toString
- The Event Loop
- Handling asynchronous calls with callbacks, promises, await, and async
- Variable and function hoisting
- Object prototypes, constructors and mixins
- Composition and high order functions
- When to use function declarations and expressions
You’ll be expected to know which HTML tags best represent the content you’re displaying and its associated attributes. You should know:
- Semantic markup
- Tag attributes
- How to declare your doctype and what meta tags are available to use
- Accessibility concerns
You should understand how to lay out elements on a page and target elements using child or direct descendant selectors, in addition to understanding when to use classes vs IDs.
- Layout: Placing elements next to each other and in two vs three columns
- Responsive Design: Altering an element’s dimensions based on the browser width size
- Adaptive Design: Altering an element’s dimensions based on specific breakpoints
- Specificity: Calculating a selector’s specificity and how the cascade affects attributes
Data Structures & Algorithms (DS&A)
While knowledge of data structures and algorithms isn’t critical for frontend development, many frontend engineers are still tested using DS&A interviews.
- Linked Lists
- Hash tables
- Stacks and queues
- Trees (binary trees and heaps)
- Graphs (know how to implement depth-first and breadth-first search traversals)
While most frontend engineers don’t need in-depth knowledge into designing backend systems, you may be asked to design the frontend architecture of common applications. These questions are typically vague and open-ended, such as “Design Twitter” or “How would you build a shopping checkout service?” Below are some topics to consider:
- Rendering: client-side, server-side, and universal rendering
- Layout: when designing a system used by multiple development teams, you think about building components and whether you require teams to follow a markup to use those components.
- State Management such as unidirectional data flow or two-way data binding
- Async flow: the components you build may need to communicate with the server in real-time and the design you propose should consider XHR vs bidirectional calls. If you’re asked to support modern browsers, you could use websockets or server-sent events; if asked to support older browsers, you’ll need to choose between IFrames, JSONP, etc for your design.
- Separation of concerns
- Multi-device support: Will your design use separate implementations or the same implementation across web, mobile, and hybrid applications?
- Asset delivery: Your design should consider how assets are built with dependencies, tested, and deployed.
Practice is Key
While you can definitely hone down the theory by yourself, the last piece of the puzzle is practice. Make sure to apply these steps time and time again, answering frontend questions with real peers.
It’s the combination of knowledge, technique, and practice, that’ll enable you to land your dream job.