contents: update status of pages
This commit is contained in:
parent
a5dfd526ce
commit
0d59986564
20
README.md
20
README.md
|
|
@ -1,6 +1,6 @@
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<h1>Front End Interview Handbook</h1>
|
<h1>Front End Interview Handbook</h1>
|
||||||
<p>By <a href="https://www.greatfrontend.com/?fpr=yangshun">GreatFrontEnd</a></p>
|
<p>By <a href="https://www.greatfrontend.com/?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">GreatFrontEnd</a></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<a href="https://www.frontendinterviewhandbook.com">Read on the website</a>
|
<a href="https://www.frontendinterviewhandbook.com">Read on the website</a>
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
Join/follow us on <a href="https://discord.gg/NDFx8f6P6B" target="_blank">Discord</a> | <a href="https://twitter.com/greatfrontend" target="_blank">𝕏 (Twitter)</a> | <a href="https://facebook.com/greatfrontend" target="_blank">Facebook</a>
|
Join/follow us on <a href="https://linkedin.com/company/greatfrontend" target="_blank">LinkedIn</a> | <a href="https://discord.gg/NDFx8f6P6B" target="_blank">Discord</a> | <a href="https://x.com/greatfrontend" target="_blank">𝕏 (Twitter)</a> | <a href="https://facebook.com/greatfrontend" target="_blank">Facebook</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
<p dir="auto"></p>
|
<p dir="auto"></p>
|
||||||
|
|
||||||
<a href="https://www.greatfrontend.com/prepare/?fpr=yangshun" target="_blank">
|
<a href="https://www.greatfrontend.com/prepare/?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook" target="_blank">
|
||||||
<img src="assets/start-practicing-button.jpg" alt="Start Practicing Front End Questions on GreatFrontEnd" />
|
<img src="assets/start-practicing-button.jpg" alt="Start Practicing Front End Questions on GreatFrontEnd" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -41,22 +41,22 @@ Unlike typical software engineer job interviews, front end job interviews have l
|
||||||
## Where to get hands on practice?
|
## Where to get hands on practice?
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<a href="https://www.greatfrontend.com?fpr=yangshun">
|
<a href="https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">
|
||||||
<img src="assets/mark-brand-light.png" alt="GreatFrontEnd" width="400"/>
|
<img src="assets/mark-brand-light.png" alt="GreatFrontEnd" width="400"/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
After getting a good understanding about front end interview preparation, try out [GreatFrontEnd](https://www.greatfrontend.com?fpr=yangshun), a platform built by me! Not only that there are 200+ practice questions, each with multiple solutions from senior front end engineers, there are also automated test case suites to help you identify what's wrong with your code. Thus, check out the following resources:
|
After getting a good understanding about front end interview preparation, try out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook), a platform built by me! Not only are there 200+ practice questions, each with multiple solutions from Senior Front End Engineers, there are also automated test case suites to help you identify what's wrong with your code. Thus, check out the following resources:
|
||||||
|
|
||||||
- [Study plans](https://www.greatfrontend.com/study-plans?fpr=yangshun) help you prepare for your upcoming technical interviews, whether it is in a week or 3 months later.
|
- [Study plans](https://www.greatfrontend.com/study-plans?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) help you prepare for your upcoming technical interviews, whether it is in a week or 3 months later.
|
||||||
- [Focus areas](https://www.greatfrontend.com/focus-areas?fpr=yangshun) allow you to focus on your weak areas and also further improve your strengths depending on your preferences.
|
- [Focus areas](https://www.greatfrontend.com/focus-areas?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) allow you to focus on your weak areas and also further improve your strengths depending on your preferences.
|
||||||
- [Preparation by stage](https://www.greatfrontend.com/prepare?fpr=yangshun) prepares you for each phase of your interview process, from quiz to coding interviews.
|
- [Preparation by stage](https://www.greatfrontend.com/prepare?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) prepares you for each phase of your interview process, from quiz to coding interviews.
|
||||||
- [Individual framework questions](https://www.greatfrontend.com/questions?fpr=yangshun) offer training based on specific frameworks that may be tested during your technical interviews.
|
- [Individual framework questions](https://www.greatfrontend.com/questions?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) offer training based on specific frameworks that may be tested during your technical interviews.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<h3>Need to practice front end interview questions? <a href="https://www.greatfrontend.com?fpr=yangshun">GreatFrontEnd</a> is holding a limited time promotion for 20% off their lifetime plan of high quality practice questions and reference solutions written by ex-FAANG interviewers 🚀</h3>
|
<h3>Need to practice front end interview questions? <a href="https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">GreatFrontEnd</a> is holding a limited time promotion for 20% off their lifetime plan of high quality practice questions and reference solutions written by ex-FAANG interviewers 🚀</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: Coding algorithms in front end interviews
|
title: Algorithms Interview Questions (Machine Coding) in Front End Interviews
|
||||||
slug: coding/algorithms
|
slug: coding/algorithms
|
||||||
sidebar_label: Algorithms coding
|
sidebar_label: Algorithms coding
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -22,7 +22,7 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
|
||||||
|
|
||||||
### GreatFrontEnd
|
### GreatFrontEnd
|
||||||
|
|
||||||
[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) provides **free** questions for you to practice implementing [Data Structures and Algorithms](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) in JavaScript. You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), [Queues](https://www.greatfrontend.com/questions/javascript/queue?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)). [**Check it out →**](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) provides **free** questions for you to practice implementing [Data Structures and Algorithms](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) in JavaScript. You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Queues](https://www.greatfrontend.com/questions/javascript/queue?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)). [**Check it out →**](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
|
|
||||||
## Algorithm courses
|
## Algorithm courses
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Behavorial interview
|
title: Behavorial Interviews
|
||||||
|
sidebar_label: Behavorial interviews
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/behavioral-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/behavioral-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -22,7 +23,7 @@ Behavioral interview rounds focus on a candidate's soft skills - how they work w
|
||||||
|
|
||||||
_Source: [Preparing for your Onsite Interview at Facebook](https://www.facebook.com/careers/swe-prep-onsite)_
|
_Source: [Preparing for your Onsite Interview at Facebook](https://www.facebook.com/careers/swe-prep-onsite)_
|
||||||
|
|
||||||
Do check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) for its free [Behavioral Interview Guidebook](https://www.greatfrontend.com/behavioral-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) to learn how to approach behavioral interviews as a front end engineer. Find out about evaluation criteria at big tech, efficient strategies to prepare, and top behavioral interview questions.
|
Do check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) for its free [Behavioral Interview Guidebook](https://www.greatfrontend.com/behavioral-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) to learn how to approach behavioral interviews as a front end engineer. Find out about evaluation criteria at big tech, efficient strategies to prepare, and top behavioral interview questions.
|
||||||
|
|
||||||
## Courses
|
## Courses
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: Coding user interfaces in front end interviews
|
title: User Interface Interview Questions (Machine Coding) in Front End Interviews
|
||||||
slug: coding/build-front-end-user-interfaces
|
slug: coding/build-front-end-user-interfaces
|
||||||
sidebar_label: User interface coding
|
sidebar_label: User interface coding
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/user-interface?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/user-interface?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -14,35 +14,35 @@ Many Front End Engineers spend a lot of time building UI, and building a UI comp
|
||||||
|
|
||||||
Companies that ask such questions usually ask candidates to code in one of these three ways:
|
Companies that ask such questions usually ask candidates to code in one of these three ways:
|
||||||
|
|
||||||
- Online editor with preview: You get to write HTML, CSS, JavaScript within the browser and see an instant preview of the page. Common platforms used include [CodePen](https://codepen.io) and [CodeSandbox](https://codesandbox.io/dashboard).
|
- **Online editor with preview**: You get to write HTML, CSS, JavaScript within the browser and see an instant preview of the page. Common platforms used include [CodePen](https://codepen.io) and [CodeSandbox](https://codesandbox.io/dashboard).
|
||||||
- Online editor without preview: Similar to the above, but you don't get to see any visual output of the page. A common platform for this is [CoderPad](https://coderpad.io/). In the past, Google used Google Docs 😱.
|
- **Online editor without preview**: Similar to the above, but you don't get to see any visual output of the page. A common platform for this is [CoderPad](https://coderpad.io/). In the past, Google used Google Docs 😱.
|
||||||
- BYOE (Bring Your Own Environment): Candidates bring their own development environment/laptop and free to choose whether they want to do local development using their own editors or use online environments like CodePen or CodeSandbox. This is the most ideal scenario that benefits candidates, but is usually only done during on-sites. You can usually use a JavaScript framework/library and in that case you are recommended to use tools that help you scaffold a fresh app where you can start coding immediately (e.g. `create-react-app`, `vue-cli`). You don't want to be spending time during the interview doing unnecessary plumbing that doesn't give your interviewers additional useful signals.
|
- **BYOE (Bring Your Own Environment)**: Candidates bring their own development environment/laptop and free to choose whether they want to do local development using their own editors or use online environments like CodePen or CodeSandbox. This is the most ideal scenario that benefits candidates, but is usually only done during on-sites. You can usually use a JavaScript framework/library and in that case you are recommended to use tools that help you scaffold a fresh app where you can start coding immediately (e.g. `create-react-app`, `vue-cli`). You don't want to be spending time during the interview doing unnecessary plumbing that doesn't give your interviewers additional useful signals.
|
||||||
- Whiteboard: Candidates have to write all the required HTML, JS, CSS on the whiteboard. There's no preview, no autocomplete, no online documentation to help you; you're totally on your own. So far Facebook and Google are the only companies that are known to make candidates write on a whiteboard during front end interviews.
|
- **Whiteboard**: Candidates have to write all the required HTML, JS, CSS on the whiteboard. There's no preview, no autocomplete, no online documentation to help you; you're totally on your own. So far Facebook and Google are the only companies that are known to make candidates write code on a physical whiteboard during onsite front end interviews.
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
- Components
|
- Components
|
||||||
- Tabs — [Practice](https://www.greatfrontend.com/questions/user-interface/tabs?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Tabs — [Practice](https://www.greatfrontend.com/questions/user-interface/tabs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Accordion — [Practice](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Accordion — [Practice](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Photo Gallery
|
- Photo Gallery
|
||||||
- Other possible components - [Refer to Bootstrap's list](https://getbootstrap.com/docs/5.3/components/)
|
- Other possible components - [Refer to Bootstrap's list](https://getbootstrap.com/docs/5.3/components/)
|
||||||
- Apps
|
- Apps
|
||||||
- Todo list — [Practice](https://www.greatfrontend.com/questions/user-interface/todo-list?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- Todo list — [Practice](https://www.greatfrontend.com/questions/user-interface/todo-list?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Sortable Data Table (with extensions for filtering)
|
- Sortable Data Table (with extensions for filtering)
|
||||||
- Kanban Board
|
- Kanban Board
|
||||||
- Games
|
- Games
|
||||||
- Tic-tac-toe — [Practice](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Tic-tac-toe — [Practice](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Whack-a-mole — [Practice](https://www.greatfrontend.com/questions/user-interface/whack-a-mole?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Whack-a-mole — [Practice](https://www.greatfrontend.com/questions/user-interface/whack-a-mole?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Wordle — [Practice](https://www.greatfrontend.com/questions/user-interface/wordle?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Wordle — [Practice](https://www.greatfrontend.com/questions/user-interface/wordle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Tetris (advanced)
|
- Tetris (advanced)
|
||||||
- Snake (advanced)
|
- Snake (advanced)
|
||||||
|
|
||||||
## Where to practice
|
## Where to practice
|
||||||
|
|
||||||
- Each of these questions and over 200+ more can be found on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
- Each of these questions and over 200+ more can be found on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
- Each question comes with official solutions in popular frameworks such as React, Angular, Svelte and Vue.
|
- Each question comes with official solutions in popular frameworks such as React, Angular, Svelte and Vue.
|
||||||
- With live previews, you can practice online directly, simulating a real interview environment with no set-up required.
|
- With live previews, you can practice online directly, simulating a real interview environment with no set-up required.
|
||||||
- [Start practicing immediately](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
- [Start practicing immediately](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
|
|
||||||
## Considerations
|
## Considerations
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Airbnb front end interview questions
|
title: Airbnb Front End Interview Questions
|
||||||
sidebar_label: Airbnb interview questions
|
sidebar_label: Airbnb interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/airbnb/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -17,9 +17,9 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
||||||
- Given an input and an endpoint which returns a JSON list, as a result, extend it to autocomplete on change, handle key navigation through the results.
|
- Given an input and an endpoint which returns a JSON list, as a result, extend it to autocomplete on change, handle key navigation through the results.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Given a star widget embedded in a form write the code to select the stars and submit the correct value through a normal form action. Make reusable for multiple star widgets.
|
- Given a star widget embedded in a form write the code to select the stars and submit the correct value through a normal form action. Make reusable for multiple star widgets.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
|
|
||||||
_Source: [Glassdoor Airbnb Front End Engineer Interview Questions](https://www.glassdoor.sg/Interview/Airbnb-Front-End-Engineer-Interview-Questions-EI_IE391850.0,6_KO7,25.htm)_
|
_Source: [Glassdoor Airbnb Front End Engineer Interview Questions](https://www.glassdoor.sg/Interview/Airbnb-Front-End-Engineer-Interview-Questions-EI_IE391850.0,6_KO7,25.htm)_
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Amazon front end interview questions
|
title: Amazon Front End Interview Questions
|
||||||
sidebar_label: Amazon interview questions
|
sidebar_label: Amazon interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/amazon/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -19,35 +19,35 @@ Refer to Amazon's official interview preparation guides for:
|
||||||
## Trivia
|
## Trivia
|
||||||
|
|
||||||
- What is the CSS box model?
|
- What is the CSS box model?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- What is a JavaScript closure?
|
- What is a JavaScript closure?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- What happens when you type URL into a browser and hit enter?
|
- What happens when you type URL into a browser and hit enter?
|
||||||
|
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- Implement `Array.prototype` functions like `map`, `reduce`, `filter`, `sort`.
|
- Implement `Array.prototype` functions like `map`, `reduce`, `filter`, `sort`.
|
||||||
- [Practice questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
- [Practice questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
- Given an object and a filter function, write a function that recursively filters the object, returning only values which return `true` when called with the filter function (like `Array.prototype.filter` but for objects).
|
- Given an object and a filter function, write a function that recursively filters the object, returning only values which return `true` when called with the filter function (like `Array.prototype.filter` but for objects).
|
||||||
- Implement a function `getElementsByStyle(property, value)` that returns all elements in the DOM that match that style.
|
- Implement a function `getElementsByStyle(property, value)` that returns all elements in the DOM that match that style.
|
||||||
- E.g. `getElementsByStyle("color", "#fff")` will return all elements in the DOM with white text.
|
- E.g. `getElementsByStyle("color", "#fff")` will return all elements in the DOM with white text.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Promisify a function.
|
- Promisify a function.
|
||||||
|
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
||||||
- Implement a data table from an array of objects using HTML/CSS and JavaScript with searching and sorting.
|
- Implement a data table from an array of objects using HTML/CSS and JavaScript with searching and sorting.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/data-selection?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/data-selection?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Implement Material UI Chips with auto-suggest. When sending an e-mail, auto-suggest people and convert them into a chip with their avatar on the right
|
- Implement Material UI Chips with auto-suggest. When sending an e-mail, auto-suggest people and convert them into a chip with their avatar on the right
|
||||||
- Implement a Like button. [Source](https://leetcode.com/discuss/interview-question/1719943/Amazon-or-Phone-Screen-or-FEE-L5-or-Like-Button)
|
- Implement a Like button. [Source](https://leetcode.com/discuss/interview-question/1719943/Amazon-or-Phone-Screen-or-FEE-L5-or-Like-Button)
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/like-button?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/like-button?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
|
- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
|
||||||
- Implement a search bar using HTML, CSS and JavaScript.
|
- Implement a search bar using HTML, CSS and JavaScript.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Implement a star rating widget.
|
- Implement a star rating widget.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Implement tic-tac-toe.
|
- Implement tic-tac-toe.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Recreate an adaptive layout with flexbox. Ensure accessibility.
|
- Recreate an adaptive layout with flexbox. Ensure accessibility.
|
||||||
- Implement a chess board with movable pieces.
|
- Implement a chess board with movable pieces.
|
||||||
- How do you render text on a banner image?
|
- How do you render text on a banner image?
|
||||||
|
|
@ -57,7 +57,7 @@ Refer to Amazon's official interview preparation guides for:
|
||||||
|
|
||||||
- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
|
- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source](<https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer>)
|
||||||
- Design an accordion component.
|
- Design an accordion component.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
|
|
||||||
## Algorithm
|
## Algorithm
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Apple front end interview questions
|
title: Apple Front End Interview Questions
|
||||||
sidebar_label: Apple interview questions
|
sidebar_label: Apple interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/apple/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -14,7 +14,7 @@ Not much is known about Apple's front end interview process.
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- Implement `Array.prototype` methods (`flat`, `map`, `reduce`, `concat`) by yourself using JavaScript.
|
- Implement `Array.prototype` methods (`flat`, `map`, `reduce`, `concat`) by yourself using JavaScript.
|
||||||
- [Practice questions](https://www.greatfrontend.com/questions/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
- [Practice questions](https://www.greatfrontend.com/questions/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
- How can you execute an array of promise in sequence?
|
- How can you execute an array of promise in sequence?
|
||||||
|
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: ByteDance/TikTok front end interview questions
|
title: ByteDance/TikTok Front End Interview Questions
|
||||||
sidebar_label: ByteDance/TikTok interview questions
|
sidebar_label: ByteDance/TikTok interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/bytedance/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -14,19 +14,19 @@ ByteDance/TikTok's front end interview is quite balanced in terms of interview f
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- Implement `Promise.all`.
|
- Implement `Promise.all`.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Implement a function which extends `Array.prototype`.
|
- Implement a function which extends `Array.prototype`.
|
||||||
- [Practice questions](https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
- [Practice questions](https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
|
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
||||||
- Implement a dropdown component.
|
- Implement a dropdown component.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Read answer](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
|
|
||||||
## Trivia
|
## Trivia
|
||||||
|
|
||||||
- Difference between `localStorage` and cookies.
|
- Difference between `localStorage` and cookies.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
|
|
||||||
## Algorithm
|
## Algorithm
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Dropbox front end interview questions
|
title: Dropbox Front End Interview Questions
|
||||||
sidebar_label: Dropbox interview questions
|
sidebar_label: Dropbox interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/dropbox/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -18,13 +18,13 @@ Refer to the [full official Dropbox Web Developer Interview Preparation Guide](/
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/interview-question/427896/Dropbox-or-Phone-Screen-or-Implement-getByClassName-and-getByClassnameHierarchy)
|
- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/interview-question/427896/Dropbox-or-Phone-Screen-or-Implement-getByClassName-and-getByClassnameHierarchy)
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- OOP-based class management system.
|
- OOP-based class management system.
|
||||||
|
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
||||||
- Build an image gallery using JavaScript, HTML, CSS.
|
- Build an image gallery using JavaScript, HTML, CSS.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Forming words from mobile keypad.
|
- Forming words from mobile keypad.
|
||||||
- Build a UI that fetches data from a weather API that is matching a design spec.
|
- Build a UI that fetches data from a weather API that is matching a design spec.
|
||||||
- Build a UI that matches a design spec of one of the pages on the Dropbox homepage.
|
- Build a UI that matches a design spec of one of the pages on the Dropbox homepage.
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Google front end interview questions
|
title: Google Front End Interview Questions
|
||||||
sidebar_label: Google interview questions
|
sidebar_label: Google interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/google/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -22,26 +22,26 @@ Refer to Google's official interview preparation guides for:
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- How do you make a function that takes a callback function `fn` and returns a function that calls `fn` on a timeout?
|
- How do you make a function that takes a callback function `fn` and returns a function that calls `fn` on a timeout?
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Implement the outline view for a Google doc.
|
- Implement the outline view for a Google doc.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/table-of-contents?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/table-of-contents?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- DFS on HTML nodes.
|
- DFS on HTML nodes.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-tag-name?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-tag-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Implement `throttle`.
|
- Implement `throttle`.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- How do you make a function that only calls input function f every 50 milliseconds?
|
- How do you make a function that only calls input function f every 50 milliseconds?
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Given a timeline write the JavaScript to select all nodes within selection of timeline.
|
- Given a timeline write the JavaScript to select all nodes within selection of timeline.
|
||||||
|
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
||||||
- Design a slider component.
|
- Design a slider component.
|
||||||
- Design a Tic-Tac-Toe game/design an algorithm for Tic-Tac-Toe game.
|
- Design a Tic-Tac-Toe game/design an algorithm for Tic-Tac-Toe game.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Implement nested checkboxes (when the parent is checked, children are checked and vice versa. Use `<input type="checkbox">`). Similar to [Indeterminate checkboxes](https://css-tricks.com/indeterminate-checkboxes/).
|
- Implement nested checkboxes (when the parent is checked, children are checked and vice versa. Use `<input type="checkbox">`). Similar to [Indeterminate checkboxes](https://css-tricks.com/indeterminate-checkboxes/).
|
||||||
- Design a webpage which can auto load new posts when you reach the bottom of the page by using JavaScript. You may use AJAX and JavaScript event listeners.
|
- Design a webpage which can auto load new posts when you reach the bottom of the page by using JavaScript. You may use AJAX and JavaScript event listeners.
|
||||||
- Write a UI using HTML, CSS, JavaScript that allows uses to enter the number of rows and columns in text input fields within a form and renders a table.
|
- Write a UI using HTML, CSS, JavaScript that allows uses to enter the number of rows and columns in text input fields within a form and renders a table.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/generate-table?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/generate-table?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Example: Number of rows: 4, Number of columns: 5, "Submit" button. Clicking on the "Submit" button will show the following table (ignore the styling):
|
- Example: Number of rows: 4, Number of columns: 5, "Submit" button. Clicking on the "Submit" button will show the following table (ignore the styling):
|
||||||
|
|
||||||
| 1 | 8 | 9 | 16 | 17 |
|
| 1 | 8 | 9 | 16 | 17 |
|
||||||
|
|
@ -53,16 +53,16 @@ Refer to Google's official interview preparation guides for:
|
||||||
## Trivia
|
## Trivia
|
||||||
|
|
||||||
- Explain the CSS Box Model.
|
- Explain the CSS Box Model.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- What happens when you type a URL into the browser and hits enter?
|
- What happens when you type a URL into the browser and hits enter?
|
||||||
- Given some text on a web page, how many ways can you make the text disappear?
|
- Given some text on a web page, how many ways can you make the text disappear?
|
||||||
- How do you send data from a web page to a server without a page refresh?
|
- How do you send data from a web page to a server without a page refresh?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
|
|
||||||
## System design
|
## System design
|
||||||
|
|
||||||
- Design emoji autocomplete.
|
- Design emoji autocomplete.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Design JS Bin.
|
- Design JS Bin.
|
||||||
- How would you create a Google Analytics SDK used by webpages?
|
- How would you create a Google Analytics SDK used by webpages?
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
---
|
---
|
||||||
title: LinkedIn front end interview questions
|
title: LinkedIn Front End Interview Questions
|
||||||
sidebar_label: LinkedIn interview questions
|
sidebar_label: LinkedIn interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/linkedin/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- Write a `getElementsByClassName` function.
|
- Write a `getElementsByClassName` function.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
|
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
||||||
|
|
@ -22,14 +22,14 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
|
||||||
## Trivia
|
## Trivia
|
||||||
|
|
||||||
- Difference between CSS `padding` and `margin`.
|
- Difference between CSS `padding` and `margin`.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Difference between promise and callback?
|
- Difference between promise and callback?
|
||||||
- Difference between event bubbling and capturing?
|
- Difference between event bubbling and capturing?
|
||||||
- Difference between callback and closure in JavaScript?
|
- Difference between callback and closure in JavaScript?
|
||||||
- What are the advantages of using preprocessors? e.g. Sass, Stylus, Less.
|
- What are the advantages of using preprocessors? e.g. Sass, Stylus, Less.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- What is event delegation?
|
- What is event delegation?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-event-delegation?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-event-delegation?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
|
|
||||||
## Algorithm
|
## Algorithm
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
---
|
---
|
||||||
title: Lyft front end interview questions
|
title: Lyft Front End Interview Questions
|
||||||
sidebar_label: Lyft interview questions
|
sidebar_label: Lyft interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/lyft/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- Implement `Promise.all`.
|
- Implement `Promise.all`.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Write the logic for minesweeper using vanilla JS.
|
- Write the logic for minesweeper using vanilla JS.
|
||||||
|
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
||||||
- Implement an autocomplete.
|
- Implement an autocomplete.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
|
|
||||||
_Source: [Glassdoor Lyft Frontend Engineer Interview Questions](https://www.glassdoor.sg/Interview/Lyft-Frontend-Engineer-Interview-Questions-EI_IE700614.0,4_KO5,22.htm)_
|
_Source: [Glassdoor Lyft Frontend Engineer Interview Questions](https://www.glassdoor.sg/Interview/Lyft-Frontend-Engineer-Interview-Questions-EI_IE700614.0,4_KO5,22.htm)_
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
---
|
---
|
||||||
title: Microsoft front end interview questions
|
title: Microsoft Front End Interview Questions
|
||||||
sidebar_label: Microsoft interview questions
|
sidebar_label: Microsoft interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/microsoft/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
- Tic-tac-toe implementation using vanilla JavaScript, HTML and CSS.
|
- Tic-tac-toe implementation using vanilla JavaScript, HTML and CSS.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Create a chat interface like Microsoft teams.
|
- Create a chat interface like Microsoft teams.
|
||||||
- Use OOP to implement a Chess game.
|
- Use OOP to implement a Chess game.
|
||||||
|
|
||||||
|
|
@ -24,16 +24,16 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
|
||||||
## Trivia
|
## Trivia
|
||||||
|
|
||||||
- What is a prototype?
|
- What is a prototype?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- What is a closure?
|
- What is a closure?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- What is the difference between `let`, `const`, and `var`?
|
- What is the difference between `let`, `const`, and `var`?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- What is DOM?
|
- What is DOM?
|
||||||
|
|
||||||
## System Design
|
## System Design
|
||||||
|
|
||||||
- Design an email client like Microsoft Outlook.
|
- Design an email client like Microsoft Outlook.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Read answer](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
|
|
||||||
_Source: [Glassdoor Microsoft Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Microsoft-Front-End-Developer-Interview-Questions-EI_IE1651.0,9_KO10,29.htm)_
|
_Source: [Glassdoor Microsoft Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Microsoft-Front-End-Developer-Interview-Questions-EI_IE1651.0,9_KO10,29.htm)_
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Salesforce front end interview questions
|
title: Salesforce Front End Interview Questions
|
||||||
sidebar_label: Salesforce interview questions
|
sidebar_label: Salesforce interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Practice Front End Interview Questions on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -14,15 +14,15 @@ Not much is known about Salesforce's front end interview process.
|
||||||
## Coding
|
## Coding
|
||||||
|
|
||||||
- Flatten a nested array.
|
- Flatten a nested array.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/javascript/flatten?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Practice question](https://www.greatfrontend.com/questions/javascript/flatten?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
|
|
||||||
## Trivia
|
## Trivia
|
||||||
|
|
||||||
- What is the event loop?
|
- What is the event loop?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- What is a closure?
|
- What is a closure?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Positioning in CSS.
|
- Positioning in CSS.
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
|
|
||||||
_Source: [Glassdoor Salesforce UI Developer Interview Questions](https://www.glassdoor.sg/Interview/Salesforce-UI-Developer-Interview-Questions-EI_IE11159.0,10_KO11,23.htm)_
|
_Source: [Glassdoor Salesforce UI Developer Interview Questions](https://www.glassdoor.sg/Interview/Salesforce-UI-Developer-Interview-Questions-EI_IE11159.0,10_KO11,23.htm)_
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Twitter front end interview questions
|
title: Twitter Front End Interview Questions
|
||||||
sidebar_label: Twitter interview questions
|
sidebar_label: Twitter interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/twitter/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -13,11 +13,11 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
|
||||||
|
|
||||||
- Implement a typeahead. [Source](https://leetcode.com/discuss/interview-question/1220887/Twitter-Frontend-Phone-Screen)
|
- Implement a typeahead. [Source](https://leetcode.com/discuss/interview-question/1220887/Twitter-Frontend-Phone-Screen)
|
||||||
- Add features to a tic-tac-toe game.
|
- Add features to a tic-tac-toe game.
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
|
|
||||||
## Trivia
|
## Trivia
|
||||||
|
|
||||||
- What is the difference between `Array.prototype.map` and `Array.prototype.forEach`?
|
- What is the difference between `Array.prototype.map` and `Array.prototype.forEach`?
|
||||||
- [Read answer](https://www.greatfrontend.com/questions/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Read answer](https://www.greatfrontend.com/questions/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
|
|
||||||
_Source: [Glassdoor Twitter Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Twitter-Front-End-Developer-Interview-Questions-EI_IE100569.0,7_KO8,27.htm)_
|
_Source: [Glassdoor Twitter Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Twitter-Front-End-Developer-Interview-Questions-EI_IE100569.0,7_KO8,27.htm)_
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Uber front end interview questions
|
title: Uber Front End Interview Questions
|
||||||
sidebar_label: Uber interview questions
|
sidebar_label: Uber interview questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company/uber/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -18,5 +18,5 @@ Not much is known about Uber's front end interview process.
|
||||||
## User interface coding
|
## User interface coding
|
||||||
|
|
||||||
- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/interview-question/1064199/uber-front-end-phone-screen-reject)
|
- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/interview-question/1064199/uber-front-end-phone-screen-reject)
|
||||||
- [Practice question](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Practice question](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Overlapping circles app. [Source](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject)
|
- Overlapping circles app. [Source](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject)
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: CSS trivia questions in front end interviews
|
title: CSS Interview Questions (Quiz) for Front End Interviews
|
||||||
sidebar_label: CSS questions
|
sidebar_label: CSS questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info We are now part of GreatFrontEnd!
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
---
|
---
|
||||||
title: Front end system design interview - applications
|
title: Front End System Design Interview - Applications
|
||||||
slug: front-end-system-design/applications
|
slug: front-end-system-design/applications
|
||||||
sidebar_label: Applications
|
sidebar_label: Applications
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
- News feed (e.g. Facebook): [Read example solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- News feed (e.g. Facebook): [Read example solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- E-commerce marketplace (e.g. Amazon): [Read example solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- E-commerce marketplace (e.g. Amazon): [Read example solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Chat application (e.g. Messenger): [Read example solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Chat application (e.g. Messenger): [Read example solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Photo sharing application (e.g. Instagram): [Read example solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Photo sharing application (e.g. Instagram): [Read example solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Pinterest: [Read example solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Pinterest: [Read example solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Travel booking website (e.g. Airbnb): [Read example solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Travel booking website (e.g. Airbnb): [Read example solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Video watching website (e.g. Netflix): [Read example solution](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Video watching website (e.g. Netflix): [Read example solution](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Email client (e.g. Microsoft Outlook): [Read example solution](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Email client (e.g. Microsoft Outlook): [Read example solution](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
|
|
||||||
## Framework
|
## Framework
|
||||||
|
|
||||||
|
|
@ -84,4 +84,4 @@ Many companies blog about their technical challenges in the front end domain and
|
||||||
- [A React And Preact Progressive Web App Performance Case Study: Treebo](https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299)
|
- [A React And Preact Progressive Web App Performance Case Study: Treebo](https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299)
|
||||||
- [Rebuilding our tech stack for the new Facebook.com](https://engineering.fb.com/2020/05/08/web/facebook-redesign/)
|
- [Rebuilding our tech stack for the new Facebook.com](https://engineering.fb.com/2020/05/08/web/facebook-redesign/)
|
||||||
|
|
||||||
[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) and case studies. You can also do hands-on practice through their [huge question bank](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), each with solutions written by ex-FAANG senior engineers to learn more about system design.
|
[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies. You can also do hands-on practice through their [huge question bank](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), each with solutions written by ex-FAANG senior engineers to learn more about system design.
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
---
|
---
|
||||||
title: Front end system design interview - UI components
|
title: Front End System Design Interview - UI Components
|
||||||
slug: front-end-system-design/ui-components
|
slug: front-end-system-design/ui-components
|
||||||
sidebar_label: UI components
|
sidebar_label: UI components
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
- Autocomplete: [Read example solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- Autocomplete: [Read example solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Image carousel: [Read example solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Image carousel: [Read example solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Dropdown menu: [Read example solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Dropdown menu: [Read example solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Modal dialog: [Read example solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Modal dialog: [Read example solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Poll widget: [Read example solution](https://www.greatfrontend.com/questions/system-design/poll-widget?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Poll widget: [Read example solution](https://www.greatfrontend.com/questions/system-design/poll-widget?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Selector which loads options over the network
|
- Selector which loads options over the network
|
||||||
|
|
||||||
To find out more, check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), which shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) and case studies. There are also [blogs](https://www.greatfrontend.com/blog?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) that will cover some of the following topics in more detail.
|
To find out more, check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), which shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies. There are also [blogs](https://www.greatfrontend.com/blog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that will cover some of the following topics in more detail.
|
||||||
|
|
||||||
## Framework
|
## Framework
|
||||||
|
|
||||||
|
|
@ -53,9 +53,9 @@ For components, list down the various subcomponents that will exist within it an
|
||||||
|
|
||||||
Let's take an image carousel example. Subcomponents within an image carousel would be:
|
Let's take an image carousel example. Subcomponents within an image carousel would be:
|
||||||
|
|
||||||
- Main image - An image that displays the photo in focus
|
- **Main image**: An image that displays the photo in focus
|
||||||
- Thumbnail - Smaller images below the (Will there be thumbnails? You will only know if you clarified requirements earlier)
|
- **Thumbnail**: Smaller images below the (Will there be thumbnails? You will only know if you clarified requirements earlier)
|
||||||
- Image store - A client side cache of the list of photos to display
|
- **Image store**: A client side cache of the list of photos to display
|
||||||
|
|
||||||
If you have a whiteboard/online drawing tool, it would also be helpful to draw diagrams to illustrate the entities and their relationships. Which subcomponent communicates with which when a user interaction occurs.
|
If you have a whiteboard/online drawing tool, it would also be helpful to draw diagrams to illustrate the entities and their relationships. Which subcomponent communicates with which when a user interaction occurs.
|
||||||
|
|
||||||
|
|
@ -110,17 +110,17 @@ UX might not fall squarely under engineering but good front end engineers have g
|
||||||
|
|
||||||
In front end, performance typically refers to a few things - loading speed, how fast the UI responds to user interactions, memory space (heap) required by the component.
|
In front end, performance typically refers to a few things - loading speed, how fast the UI responds to user interactions, memory space (heap) required by the component.
|
||||||
|
|
||||||
- Loading speed - The less JavaScript the component contains, the less JavaScript the browser has to download to load the component and the lower the network request time. It's also important to modularize components and allow users to download only the necessary JavaScript modules needed for their use case.
|
- **Loading speed**: The less JavaScript the component contains, the less JavaScript the browser has to download to load the component and the lower the network request time. It's also important to modularize components and allow users to download only the necessary JavaScript modules needed for their use case.
|
||||||
- Responsiveness to user interactions
|
- **Responsiveness to user interactions**
|
||||||
- If a user interaction results in displaying of data that has to be loaded over the network, there will be a delay between the user interaction and updating of the UI. Minimizing that delay or removing it entirely is the key to improving responsiveness.
|
- If a user interaction results in displaying of data that has to be loaded over the network, there will be a delay between the user interaction and updating of the UI. Minimizing that delay or removing it entirely is the key to improving responsiveness.
|
||||||
- JavaScript in a browser is single-threaded. The browser can only do execute one line of code at any one time. The less work (JavaScript executed, DOM updates) the component has to do when a user does something on the page, the faster the component can update the UI to respond to the changes.
|
- JavaScript in a browser is single-threaded. The browser can only do execute one line of code at any one time. The less work (JavaScript executed, DOM updates) the component has to do when a user does something on the page, the faster the component can update the UI to respond to the changes.
|
||||||
- Memory space - The more memory your component takes up on the page, the slower the browser performs and the experience will feel sluggish/janky. If your component has to render hundreds/thousands of items (e.g. number of images in a carousel, number of items in a selector), memory space might become significant.
|
- **Memory space**: The more memory your component takes up on the page, the slower the browser performs and the experience will feel sluggish/janky. If your component has to render hundreds/thousands of items (e.g. number of images in a carousel, number of items in a selector), memory space might become significant.
|
||||||
|
|
||||||
**Optimization tips**
|
**Optimization tips**
|
||||||
|
|
||||||
- Render only what is displayed on the screen - For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/virtualize-long-lists-react-window/).
|
- **Render only what is displayed on the screen**: For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/virtualize-long-lists-react-window/).
|
||||||
- Lazy loading/load only necessary data - For example, in a photo gallery component, a user can have hundreds and thousands of photos, but it won't be feasible to load all of them eagerly. Most likely the user won't be browsing all of them in that session too. An optimization could be to load only the ones that the user is likely to view, or those that are within the viewport (which we call "above the fold"). The rest of the photos can be loaded on demand, which introduces responsiveness delay, but the next tip will help you to handle that.
|
- **Lazy loading/load only necessary data**: For example, in a photo gallery component, a user can have hundreds and thousands of photos, but it won't be feasible to load all of them eagerly. Most likely the user won't be browsing all of them in that session too. An optimization could be to load only the ones that the user is likely to view, or those that are within the viewport (which we call "above the fold"). The rest of the photos can be loaded on demand, which introduces responsiveness delay, but the next tip will help you to handle that.
|
||||||
- Preloading/prefetching data ahead of time - For example, in an image carousel where there are too many images to load beforehand, an optimization could be to load the next image ahead of time while the user is still on the current image, such that when the user clicks the "Next" button, there's no network delay needed because the next image has already been loaded. This technique can also be modified to load the next N images to handle the case where users click "Next" in rapid succession.
|
- **Preloading/prefetching data ahead of time**: For example, in an image carousel where there are too many images to load beforehand, an optimization could be to load the next image ahead of time while the user is still on the current image, such that when the user clicks the "Next" button, there's no network delay needed because the next image has already been loaded. This technique can also be modified to load the next N images to handle the case where users click "Next" in rapid succession.
|
||||||
|
|
||||||
#### Accessibility (a11y)
|
#### Accessibility (a11y)
|
||||||
|
|
||||||
|
|
@ -145,8 +145,8 @@ a11y is one of the most commonly neglected areas as most of the time they're inv
|
||||||
|
|
||||||
Internationalization (i18n) is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language. Typically components shouldn't have to worry about i18n unless under few specific circumstances:
|
Internationalization (i18n) is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language. Typically components shouldn't have to worry about i18n unless under few specific circumstances:
|
||||||
|
|
||||||
- Component uses strings - Strings used in the component shouldn't be hardcoded to a specific language (e.g. "Prev"/"Next" in the controls of a photo gallery component). The strings can be specified as a prop with the English version as default
|
- **Component uses strings**: Strings used in the component shouldn't be hardcoded to a specific language (e.g. "Prev"/"Next" in the controls of a photo gallery component). The strings can be specified as a prop with the English version as default
|
||||||
- Order of content matters - Does your component support RTL (right to left) languages like Arabic and Hebrew?
|
- **Order of content matters**: Does your component support RTL (right to left) languages like Arabic and Hebrew?
|
||||||
|
|
||||||
#### Multi-device support
|
#### Multi-device support
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: Front end system design interview overview
|
title: Front End System Design Interview Overview
|
||||||
sidebar_label: Overview
|
sidebar_label: Overview
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -22,32 +22,36 @@ The two main kinds of front end system design interviews are UI components and a
|
||||||
## Front end system design examples
|
## Front end system design examples
|
||||||
|
|
||||||
- User interface components
|
- User interface components
|
||||||
- Autocomplete: [Read example solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- Autocomplete: [Read example solution](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- Image carousel: [Read example solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Image carousel: [Read example solution](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Dropdown menu: [Read example solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Dropdown menu: [Read example solution](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Modal dialog: [Read example solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Modal dialog: [Read example solution](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Applications
|
- Applications
|
||||||
- News feed (e.g. Facebook): [Read example solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- News feed (e.g. Facebook): [Read example solution](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- E-commerce marketplace (e.g. Amazon): [Read example solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- E-commerce marketplace (e.g. Amazon): [Read example solution](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Chat application (e.g. Messenger): [Read example solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Chat application (e.g. Messenger): [Read example solution](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Photo sharing application (e.g. Instagram): [Read example solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Photo sharing application (e.g. Instagram): [Read example solution](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Pinterest: [Read example solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Pinterest: [Read example solution](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Travel booking website (e.g. Airbnb): [Read example solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- Travel booking website (e.g. Airbnb): [Read example solution](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
- Video watching website
|
- Video watching website
|
||||||
|
|
||||||
If you are interested to find out more, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) and case studies.
|
If you are interested to find out more, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [front end system design guide](https://www.greatfrontend.com/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies.
|
||||||
|
|
||||||
## RADIO Framework
|
## RADIO Framework
|
||||||
|
|
||||||
System design interview questions tend to be open ended and vague, leaving you with lots of room to explore. If the interviewer tells you which specific areas to focus on, that's great! Otherwise, here's a framework you can use to give an outline to the interviewer as to what you are going to cover, which is also helpful when working on new front end projects at work.
|
System design interview questions tend to be open ended and vague, leaving you with lots of room to explore. If the interviewer tells you which specific areas to focus on, that's great!
|
||||||
|
|
||||||
This framework is called **RADIO** and it is made up of the first character of each step. You can write this structure down on the whiteboard/online editor so that you don't forget.
|
We have invented a simple-to-remember framework – the **RADIO framework**, that you can use to give an outline to the interviewer as to what you are going to cover.
|
||||||
|
|
||||||
|
This framework is called **RADIO** because it is made up of the first character of each area. You can write this structure down on the whiteboard/online editor so that you don't forget.
|
||||||
|
|
||||||
1. **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
|
1. **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
|
||||||
1. **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other.
|
2. **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other.
|
||||||
1. **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
|
3. **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
|
||||||
1. **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
|
4. **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
|
||||||
1. **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
|
5. **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
|
||||||
|
|
||||||
|
The RADIO framework is also helpful when working on new front end projects at work, especially when writing design documentation. It's a good framework to learn.
|
||||||
|
|
||||||
How to approach system design questions for applications and UI components can differ significantly, and we'll go through them in more detail in subsequent sections.
|
How to approach system design questions for applications and UI components can differ significantly, and we'll go through them in more detail in subsequent sections.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: HTML trivia questions in front end interviews
|
title: HTML Interview Questions (Quiz) for Front End Interviews
|
||||||
sidebar_label: HTML questions
|
sidebar_label: HTML questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info We are now part of GreatFrontEnd!
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,9 @@
|
||||||
title: Introduction
|
title: Introduction
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -16,7 +16,7 @@ Many front end interviews are highly-focused on domain knowledge and applying th
|
||||||
|
|
||||||
While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a general software engineer interview. Among the existing resources, the most helpful question bank would probably be [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Unfortunately, there aren't many complete and satisfactory answers to these questions readily available online. This handbook answers these trivia-style questions along with information and guidance for other front end interview formats.
|
While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a general software engineer interview. Among the existing resources, the most helpful question bank would probably be [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Unfortunately, there aren't many complete and satisfactory answers to these questions readily available online. This handbook answers these trivia-style questions along with information and guidance for other front end interview formats.
|
||||||
|
|
||||||
To solve this problem, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), an interview preparation platform for Front End interviews, was created. It contains Front End interview questions and answers written by ex-FAANG Senior Engineers (such as myself!) and have both questions and answers for various formats: JavaScript, TypeScript, User Interface Component questions, quiz-style front end questions.
|
To solve this problem, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), an interview preparation platform for Front End interviews, was created. It contains Front End interview questions and answers written by ex-FAANG Senior Engineers (such as myself!) and have both questions and answers for various formats: JavaScript, TypeScript, User Interface Component questions, quiz-style front end questions.
|
||||||
|
|
||||||
## General tips for front end interviews
|
## General tips for front end interviews
|
||||||
|
|
||||||
|
|
@ -24,11 +24,11 @@ Regardless of which type of format you are given, one thing stays true - you nee
|
||||||
|
|
||||||
Be _extremely_ familiar with the following concepts:
|
Be _extremely_ familiar with the following concepts:
|
||||||
|
|
||||||
- CSS: Specificity, Box model, Layout, Positioning
|
- **CSS**: Specificity, Box model, Layout, Positioning
|
||||||
- JavaScript: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout()`, `setInterval()`)
|
- **JavaScript**: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout()`, `setInterval()`)
|
||||||
- JavaScript design patterns: Observer pattern, Module pattern
|
- **JavaScript design patterns**: Observer pattern, Module pattern
|
||||||
- HTML: Event delegation (it was useful in almost every interview), DOM traversal, DOM manipulation, Form validation and submission
|
- **HTML**: Event delegation (it was useful in almost every interview), DOM traversal, DOM manipulation, Form validation and submission
|
||||||
- Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of the fundamentals
|
- **DOM manipulation**: DOM manipulation in Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of the fundamentals
|
||||||
|
|
||||||
Look out for interview questions by companies on Glassdoor. Front end questions are not as abundant but some still can be found. Many companies use similar questions.
|
Look out for interview questions by companies on Glassdoor. Front end questions are not as abundant but some still can be found. Many companies use similar questions.
|
||||||
|
|
||||||
|
|
@ -50,7 +50,7 @@ Short questions which test your knowledge and have clear non-subjective answers.
|
||||||
|
|
||||||
[**Read more about front end trivia questions →**](./trivia.md)
|
[**Read more about front end trivia questions →**](./trivia.md)
|
||||||
|
|
||||||
[**Practice front end trivia questions**](https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
[**Practice front end trivia questions**](https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
|
|
||||||
### JavaScript coding
|
### JavaScript coding
|
||||||
|
|
||||||
|
|
@ -63,7 +63,7 @@ This is the front end version of LeetCode-style algorithm questions. Implement a
|
||||||
|
|
||||||
[**Read more about JavaScript coding questions →**](./javascript-questions.md)
|
[**Read more about JavaScript coding questions →**](./javascript-questions.md)
|
||||||
|
|
||||||
[**Practice JavaScript coding questions**](https://www.greatfrontend.com/questions/js?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
[**Practice JavaScript coding questions**](https://www.greatfrontend.com/questions/js?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
|
|
||||||
### User interface coding
|
### User interface coding
|
||||||
|
|
||||||
|
|
@ -81,7 +81,7 @@ Build user interfaces (can be a UI component, an app, or a game) using HTML, CSS
|
||||||
|
|
||||||
[**Read more about user interface coding questions →**](./build-front-end-user-interfaces.md)
|
[**Read more about user interface coding questions →**](./build-front-end-user-interfaces.md)
|
||||||
|
|
||||||
[**Practice user interface coding questions**](https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
[**Practice user interface coding questions**](https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
|
|
||||||
### Algorithmic coding
|
### Algorithmic coding
|
||||||
|
|
||||||
|
|
@ -89,7 +89,7 @@ LeetCode-style algorithmic coding questions which evaluate your core data struct
|
||||||
|
|
||||||
[**Read more about algorithm coding questions →**](./algorithms.md)
|
[**Read more about algorithm coding questions →**](./algorithms.md)
|
||||||
|
|
||||||
[**Practice algorithm questions**](https://www.greatfrontend.com/focus-areas/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
[**Practice algorithm questions**](https://www.greatfrontend.com/focus-areas/data-structures-algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
|
|
||||||
### System design
|
### System design
|
||||||
|
|
||||||
|
|
@ -100,9 +100,9 @@ Describe and discuss how you would build a UI component/app/game and its archite
|
||||||
|
|
||||||
[**Read more about front end system design →**](./front-end-system-design.md)
|
[**Read more about front end system design →**](./front-end-system-design.md)
|
||||||
|
|
||||||
[**Practice front end system design questions**](https://www.greatfrontend.com/prepare/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)
|
[**Practice front end system design questions**](https://www.greatfrontend.com/prepare/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
|
||||||
|
|
||||||
You can also try out the above mentioned question types at [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook). It has [over 200+ practice questions](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) and all of them are provided with comprehensive answers written by ex-FAANG senior engineers.
|
You can also try out the above mentioned question types at [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). It has [over 200+ practice questions](https://www.greatfrontend.com/prepare?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and all of them are provided with comprehensive answers written by ex-FAANG senior engineers.
|
||||||
|
|
||||||
## Company interview formats
|
## Company interview formats
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: JavaScript trivia questions in front end interviews
|
title: JavaScript Interview Questions (Quiz) for Front End Interviews
|
||||||
sidebar_label: JavaScript questions
|
sidebar_label: JavaScript questions
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info We are now part of GreatFrontEnd!
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: Coding JavaScript utility functions in front end interviews
|
title: JavaScript Interview Questions (Machine Coding) for Front End Interviews
|
||||||
slug: coding/javascript-utility-function
|
slug: coding/javascript-utility-function
|
||||||
sidebar_label: JavaScript coding
|
sidebar_label: JavaScript coding
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/javascript?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/javascript?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -46,13 +46,13 @@ Advanced questions are usually given to more senior candidates and expect around
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
- These questions and many others are available on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook). Apart from a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) that you can access by frameworks, each question also comes with a solution authored by ex-FAANG engineers and automated test cases.
|
- These questions and many others are available on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). Apart from a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that you can access by frameworks, each question also comes with a solution authored by ex-FAANG engineers and automated test cases.
|
||||||
- Here are some questions you can start with:
|
- Here are some questions you can start with:
|
||||||
- [Debounce](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Debounce](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- [Promise.all()](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Promise.all()](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- [Deep Clone](https://www.greatfrontend.com/questions/javascript/deep-clone?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Deep Clone](https://www.greatfrontend.com/questions/javascript/deep-clone?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- [Event Emitter](https://www.greatfrontend.com/questions/javascript/event-emitter?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Free)
|
- [Event Emitter](https://www.greatfrontend.com/questions/javascript/event-emitter?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
|
||||||
- [Array.prototype.filter()](https://www.greatfrontend.com/questions/javascript/array-filter?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook) (Paid)
|
- [Array.prototype.filter()](https://www.greatfrontend.com/questions/javascript/array-filter?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
|
||||||
|
|
||||||
## Tips
|
## Tips
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,9 @@
|
||||||
title: Resume preparation
|
title: Resume preparation
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/resume?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/resume?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@ title: Trivia questions in front end interviews
|
||||||
sidebar_label: Overview
|
sidebar_label: Overview
|
||||||
---
|
---
|
||||||
|
|
||||||
:::info We are now part of GreatFrontEnd!
|
:::info Page migrated to GreatFrontEnd
|
||||||
|
|
||||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook).
|
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)! Find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
@ -35,7 +35,7 @@ The best and correct way to prepare for such questions is to really understand t
|
||||||
|
|
||||||
## Where to practice
|
## Where to practice
|
||||||
|
|
||||||
If you're looking for free questions to practice, try [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook), which has a [huge bank of free questions](https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&fpr=frontendinterviewhandbook). Each question also comes with a solution authored by me.
|
If you're looking for free questions to practice, try [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), which has a [huge bank of free questions](https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). Each question also comes with a solution authored by me.
|
||||||
|
|
||||||
## Common questions
|
## Common questions
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ module.exports = {
|
||||||
themeConfig: {
|
themeConfig: {
|
||||||
announcementBar: {
|
announcementBar: {
|
||||||
id: 'gfe', // Increment on change
|
id: 'gfe', // Increment on change
|
||||||
content: `⭐️ We are now part of <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&fpr=frontendinterviewhandbook" target="_blank">GreatFrontEnd</a>, a front end interview preparation platform created by ex-FAANG Senior Engineers. <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&fpr=frontendinterviewhandbook" target="_blank">Get 20% off today</a>! ⭐️`,
|
content: `⭐️ We are now part of <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook" target="_blank">GreatFrontEnd</a>, a front end interview preparation platform created by ex-FAANG Senior Engineers. <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook" target="_blank">Get 20% off today</a>! ⭐️`,
|
||||||
isCloseable: false,
|
isCloseable: false,
|
||||||
},
|
},
|
||||||
prism: {
|
prism: {
|
||||||
|
|
@ -36,15 +36,15 @@ module.exports = {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Coding Questions',
|
label: 'Coding Questions',
|
||||||
href: 'https://www.greatfrontend.com/prepare/coding?fpr=yangshun',
|
href: 'https://www.greatfrontend.com/prepare/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'System Design',
|
label: 'System Design',
|
||||||
href: 'https://www.greatfrontend.com/prepare/system-design?fpr=yangshun',
|
href: 'https://www.greatfrontend.com/prepare/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Quiz Questions',
|
label: 'Quiz Questions',
|
||||||
href: 'https://www.greatfrontend.com/prepare/quiz?fpr=yangshun',
|
href: 'https://www.greatfrontend.com/prepare/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -154,7 +154,7 @@ module.exports = {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'GreatFrontEnd',
|
label: 'GreatFrontEnd',
|
||||||
href: 'https://www.greatfrontend.com?fpr=yangshun',
|
href: 'https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'GitHub',
|
label: 'GitHub',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue