Netflix Full Stack Engineer Interview Questions (2026)

1. 1Hiring manager screen45 minMedium

   Manager probes seniority, autonomy, and whether your judgment fits a high-freedom, high-responsibility team.

2. 2Technical screen60 minHard

   Practical coding or problem solving in your domain — often closer to real work (data modeling, service code) than LeetCode drills.

3. 3System design round60 minHard

   Design streaming-scale infrastructure with honest tradeoff defense — resilience, regional failover, and cost at Netflix scale.

4. 4Domain deep-dive with team60 minHard

   Future teammates drill into your past systems, expecting staff-level depth and candid discussion of failures.

5. 5Culture interview45 minMedium

   Explicit culture-memo round on candor, Freedom & Responsibility, and keeper-test-worthy impact, run by a manager or partner team.

6. 6Leadership close30 minMedium

   Director-level conversation confirming seniority, compensation philosophy fit (top-of-market cash), and mutual expectations.

1. Q1

   Explain how error recovery changes your component API, QA process, and release checklist for the download manager UI

   MediumOnsite/Full Loop - UX QualityAccessibilityNetflix-specific

   Context: download manager UI

   How to answer: Error recovery fundamentally shifts the component API to include error states, retry mechanisms, and user-facing messages, requiring props or state for `isError`, `errorMessage`, and `onRetry`. The QA process expands to dedicated error state testing (e.g., network loss, disk full, corrupted file), including accessibility for screen readers and keyboard navigation within error UIs. The release checklist must incorporate validation of error handling across various failure modes, A/B testing of different recovery UIs, and logging/monitoring for error frequency and user recovery rates.

2. Q2

   How would you handle accessible errors, validation hints, and recovery paths in a high-stakes search filter?

   MediumOnsite/Full Loop - ArchitectureAccessibilityNetflix-specific

   Context: recommendation grid

   How to answer: A strong candidate would emphasize immediate, context-aware feedback using ARIA live regions for screen reader users, ensuring error messages are programmatically linked to the invalid input fields. They would describe providing clear, actionable validation hints before submission and offering explicit recovery paths, such as 'clear filter' or 'reset to default' options, with confirmation for destructive actions. The answer should also touch on visual cues, such as red borders and error icons, and ensuring keyboard accessibility for all error interactions and recovery options.

3. Q3

   The design for the Top 10 row uses subtle icons and gestures. How would you negotiate an accessible implementation with design?

   HardOnsite/Full Loop - AccessibilityAccessibilityNetflix-specific

   Context: Top 10 row

   How to answer: A strong candidate would first identify the accessibility challenges posed by 'subtle icons and gestures,' specifically for users with visual impairments, motor skill limitations, or cognitive disabilities. They would propose a collaborative approach with design, advocating for alternatives like clear text labels, high-contrast visual cues, and keyboard-navigable controls. The negotiation would involve demonstrating how these changes enhance usability for a broader audience without compromising the core design aesthetic, perhaps by offering progressive enhancement or user-configurable options. Finally, they would emphasize the importance of WAI-ARIA attributes and thorough testing with assistive technologies to ensure compliance.

4. Q4

   Audit the Netflix home row for touch target size. What checks would you run manually and which would you automate?

   MediumOnsite/Full Loop - ArchitectureAccessibilityNetflix-specific

   Context: Netflix home row

   How to answer: A strong answer would identify the primary touch targets on the Netflix home row as movie/show posters and navigation arrows. Manual checks would involve using a finger or accessibility inspector to measure the visual size and verify the interactive area meets WCAG 2.1 AA (44x44 CSS pixels) for both portrait and landscape orientations, across various device types (phone, tablet). Automation would focus on programmatically checking the computed `width` and `height` of interactive elements within the row, specifically `<a>` tags or elements with `role='button'`, and flagging those below the minimum threshold, especially for posters which are dynamically loaded. Edge cases like focus states and dynamic resizing should also be considered.

5. Q5

   Explain how WCAG conformance changes your component API, QA process, and release checklist for the plan signup flow

   MediumOnsite/Full Loop - AccessibilityAccessibilityNetflix-specific

   Context: plan signup flow

   How to answer: WCAG conformance significantly impacts a component's API by requiring properties for accessibility attributes (e.g., `aria-label`, `role`, `tabIndex`) and event handlers for keyboard navigation. The QA process must integrate automated accessibility checks (linters, axe-core) and manual testing with screen readers, keyboard-only navigation, and zoom. The release checklist will then include mandatory accessibility audits, sign-offs from accessibility specialists, and verification of accessible documentation for new features in the signup flow.

6. Q6

   How would you ensure a modal, popover, or drawer in the episode detail page works for keyboard and assistive technology users?

   StaffOnsite/Full Loop - AccessibilityAccessibilityNetflix-specific

   Context: episode detail page

   How to answer: A strong answer would focus on proper focus management, ARIA attributes, and keyboard navigation. Candidates should explain how to trap focus within the modal, restore it upon closing, and ensure the modal is announced to assistive technologies using `role="dialog"` or `aria-modal="true"`. They should also detail handling `Escape` to close, `Tab` for internal navigation, and `Shift+Tab` for reverse internal navigation, while preventing background scrolling and interaction.

7. Q7

   Design an accessible map/list toggle for the recommendation grid. Explain focus order, labels, announcements, and keyboard interaction

   MediumOnsite/Full Loop - ArchitectureAccessibilityNetflix-specific

   Context: recommendation grid

   How to answer: A strong answer would propose a toggle using a `role="tablist"` with two `role="tab"` elements (e.g., 'Map View', 'List View') and associated `role="tabpanel"` regions. Focus order should move from the toggle button to the active view's content. Labels must be clear and descriptive, using `aria-label` or visible text. Screen reader announcements should indicate the selected view and the availability of the other, leveraging `aria-selected` and `aria-controls`. Keyboard interaction requires `Tab` to navigate to the toggle, `Space`/`Enter` to activate, and `Left`/`Right` arrow keys to switch between tabs within the `tablist` without losing focus.

8. Q8

   A screen reader user cannot complete the Top 10 row. How would you triage, reproduce, and fix the issue?

   HardOnsite/Full Loop - AccessibilityAccessibilityNetflix-specific

   Context: Top 10 row

   How to answer: Triage would involve confirming the screen reader (e.g., NVDA, VoiceOver) and browser (e.g., Chrome, Safari) combination, and asking the user for specific steps to reproduce the failure. Reproduction involves using the identified screen reader and browser, navigating to the Top 10 row, and attempting to interact with its elements (e.g., swiping, selecting a title). The fix likely involves inspecting the HTML for missing ARIA attributes (e.g., `aria-label`, `aria-describedby`, `role='row'`, `role='gridcell'`), incorrect tab order, or non-semantic HTML elements used for interactive components. Implementing proper keyboard navigation and focus management, especially for custom carousel or grid components, would also be crucial.

9. Q9

   When would you use ARIA in the account settings page, and when would you remove it in favor of native semantics?

   StaffOnsite/Full Loop - UX QualityAccessibilityNetflix-specific

   Context: account settings page

   How to answer: ARIA should be used when native HTML elements or attributes do not adequately convey the semantic meaning or interactive behavior of a custom UI component, such as a custom multi-select dropdown, a tabbed interface, or a dynamic alert region. It's crucial for making these non-native components accessible to assistive technologies. Conversely, ARIA should be removed or avoided when a native HTML element already provides the necessary semantic meaning and accessibility features, like using a `<button>` for a button, `<input type="checkbox">` for a checkbox, or `<nav>` for navigation. Overusing ARIA on native elements can create redundancy or even conflicts, hindering accessibility.

10. Q10

    Explain how you would implement a dense, resizable panel in the account settings page. Compare Grid, Flexbox, and absolute positioning trade-offs

    HardOnsite/Full Loop - Frontend FundamentalsCSSNetflix-specific

    Context: account settings page

    How to answer: Implementing a dense, resizable panel requires careful consideration of layout methods. I would primarily use CSS Grid for the panel's internal layout due to its explicit row/column control and `grid-template-areas` for semantic structure, making it ideal for dense, non-linear content. Resizing would be handled by a combination of `resize: horizontal` on the panel itself or a custom drag handle that dynamically updates a CSS custom property (e.g., `--panel-width`) applied to the Grid container. Flexbox could be used for distributing items within individual grid cells, while absolute positioning would be reserved for specific overlay elements like resize handles or context menus, not for the main layout.

11. Q11

    The Netflix home row has a visual regression after a design-system update. How would you isolate whether responsive typography is the root cause?

    EasyPhone/Virtual Technical ScreenCSSNetflix-specific

    Context: Netflix home row

    How to answer: A strong candidate would first suggest using browser developer tools to inspect the affected elements and their computed styles, specifically looking at font-size, line-height, and media queries. They would then propose disabling or modifying relevant CSS properties directly in the browser to see if the regression resolves. To further isolate, they might suggest temporarily removing or commenting out the responsive typography logic from the design system's CSS or JavaScript, or comparing the rendered styles against a previous version using a visual regression testing tool if available. Finally, they would verify the issue across different viewport sizes and devices.

12. Q12

    How would you support dark mode, high contrast, localization, and reduced motion in the video player overlay's CSS architecture?

    MediumOnsite/Full Loop - CodingCSSNetflix-specific

    Context: video player overlay

    How to answer: A strong candidate would propose using CSS media queries for `prefers-color-scheme` (dark mode), `prefers-contrast` (high contrast), and `prefers-reduced-motion` (reduced motion). For localization, they would suggest leveraging CSS custom properties (variables) to manage values that change based on language/region, potentially combined with a build-time or runtime CSS-in-JS solution to inject locale-specific values or class names. They should emphasize a modular, component-based approach where these adaptations are applied at the component level, ensuring maintainability and scalability for the video player overlay.

13. Q13

    A responsive editable detail panel in the Kids profile UI fails at tablet widths. How would you debug CSS cascade, layout containment, and overflow?

    MediumOnsite/Full Loop - Frontend FundamentalsCSSNetflix-specific

    Context: Kids profile UI

    How to answer: I would start by using browser developer tools (e.g., Chrome DevTools) to inspect the failing element at tablet widths. First, I'd examine the 'Styles' pane to understand the CSS cascade, looking for overridden properties or unexpected specificity. Next, I'd use the 'Layout' or 'Elements' pane to visualize the box model, check for incorrect `display`, `position`, or `float` values, and identify any parent elements with `overflow: hidden` or `contain` properties that might be clipping content. Finally, I'd specifically check for `overflow-x` or `overflow-y` issues on the panel itself or its containers, adjusting dimensions or flex/grid properties as needed.

14. Q14

    How would you create a themeable component for the subtitle settings panel using aspect-ratio and object-fit without creating global style regressions?

    MediumPhone/Virtual Technical ScreenCSSNetflix-specific

    Context: subtitle settings panel

    How to answer: A strong answer would propose using CSS Variables (custom properties) to define theme-specific values for colors, fonts, and potentially image paths. These variables would be scoped to the component using a class or data attribute on the component's root element, preventing global regressions. For the subtitle preview, `aspect-ratio` would maintain the video player's dimensions, while `object-fit: cover` or `contain` would ensure the preview content (e.g., a static image or video frame) scales correctly within that aspect ratio without distortion. A JavaScript mechanism would be used to toggle the root class/attribute, updating the CSS variables and thus the theme.

15. Q15

    Explain how you would implement a dense, resizable panel in the episode detail page. Compare Grid, Flexbox, and absolute positioning trade-offs

    HardOnsite/Full Loop - CodingCSSNetflix-specific

    Context: episode detail page

    How to answer: Implementing a dense, resizable panel requires careful consideration of layout techniques. I would primarily use CSS Grid for the panel's internal layout due to its explicit row/column definition and `grid-template-areas` for semantic structure, which handles density well. Resizing would be achieved using `resize: horizontal` on the panel element itself, or a custom JavaScript solution manipulating Grid's `grid-template-columns` property for more controlled resizing. Flexbox could be used for distributing content within individual grid cells, while absolute positioning would be reserved for overlays or specific elements that need to break out of the normal document flow, like a resize handle if `resize` property isn't sufficient.

Practice these with instant AI feedback in a live mock interview → Start a Netflix Full Stack Engineer mock

Demonstrate senior-level judgment and ownership; study Netflix's culture memo; be ready for candid discussions

Other roles at Netflix

Full Stack Engineer interviews at other companies