mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

website: content revamp

This commit is contained in:
Yangshun Tay 2022-07-03 14:16:01 +08:00
parent 4ab935a4d1
commit aa9b4f1673
23 changed files with 457 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
README.md
View File

@ -25,13 +25,13 @@ While there are some existing resources to help front end developers in preparin
### 🔍 Front End Interviews Demystified
Front End interview preparation resources are scarce but no fret, we tell you what to expect and everything else you need to know!
Front end interview preparation resources are scarce but no fret, we tell you what to expect and everything else you need to know!
[**Learn more**](https://www.frontendinterviewhandbook.com/introduction/)
### 👩‍🎨 System Design
What even is Front End system design?! Learn more about them and how to ace these interviews.
What even is Front end system design?! Learn more about them and how to ace these interviews.
[**Learn more**](https://www.frontendinterviewhandbook.com/front-end-system-design/)
@ -39,7 +39,7 @@ What even is Front End system design?! Learn more about them and how to ace thes
Coding questions are an entirely different ball game for Front End interviews. We tell you how to prepare for them (hint: not just LeetCode).
[**Learn more**](https://www.frontendinterviewhandbook.com/build-user-interfaces/)
[**Learn more**](https://www.frontendinterviewhandbook.com/build-front-end-user-interfaces/)
### 💯 Go From Zero to Hero
@ -84,22 +84,22 @@ You might be interested in the [Tech Interview Handbook](https://www.techintervi
## Table of Contents
1. [Pop Quiz Questions](https://www.frontendinterviewhandbook.com/pop-quiz/)
1. [JavaScript Utility Function Questions](https://www.frontendinterviewhandbook.com/utility-function/)
1. [Front End Coding Questions](https://www.frontendinterviewhandbook.com/build-user-interfaces/)
1. [JavaScript Algorithm Questions](https://www.frontendinterviewhandbook.com/algorithms/)
1. [Front End System Design Questions](https://www.frontendinterviewhandbook.com/front-end-system-design/)
1. [Trivia questions](https://www.frontendinterviewhandbook.com/trivia/)
1. [JavaScript utility function questions](https://www.frontendinterviewhandbook.com/javascript-utility-function/)
1. [Front end user interface coding questions](https://www.frontendinterviewhandbook.com/build-front-end-user-interfaces/)
1. [Front end algorithm coding questions](https://www.frontendinterviewhandbook.com/algorithms/)
1. [Front end system design questions](https://www.frontendinterviewhandbook.com/front-end-system-design/)
## Translations
- [English](https://www.frontendinterviewhandbook.com)
- [Chinese (Simplified) (简体中文)](https://www.frontendinterviewhandbook.com/zh/html-questions/)
- [Japanese (日本語)](https://www.frontendinterviewhandbook.com/jp/html-questions/)
- [Korean (한국어)](https://www.frontendinterviewhandbook.com/kr/html-questions/)
- [Polish (Polski)](https://www.frontendinterviewhandbook.com/pl/html-questions/)
- [Portuguese (Português)](https://www.frontendinterviewhandbook.com/pr/html-questions/)
- [Russian (Русский)](https://www.frontendinterviewhandbook.com/ru/html-questions/)
- [Tagalog](https://www.frontendinterviewhandbook.com/tl/html-questions/)
- [Chinese (Simplified) (简体中文)](https://www.frontendinterviewhandbook.com/zh/javascript-questions/)
- [Japanese (日本語)](https://www.frontendinterviewhandbook.com/jp/javascript-questions/)
- [Korean (한국어)](https://www.frontendinterviewhandbook.com/kr/javascript-questions/)
- [Polish (Polski)](https://www.frontendinterviewhandbook.com/pl/javascript-questions/)
- [Portuguese (Português)](https://www.frontendinterviewhandbook.com/pr/javascript-questions/)
- [Russian (Русский)](https://www.frontendinterviewhandbook.com/ru/javascript-questions/)
- [Tagalog](https://www.frontendinterviewhandbook.com/tl/javascript-questions/)
## Related

12
contents/algorithms.md
View File

@ -1,7 +1,7 @@
---
title: Front end algorithms
title: Coding algorithms in front end interviews
slug: coding/algorithms
sidebar_label: Algorithms
sidebar_label: Algorithms coding
---
Front End Engineers are also Software Engineers after all, and it's an expectation that Front End Engineers have basic competency in algorithms and data structures. It is possible and reasonable that you will be asked to solve algorithmic questions during your front end interviews and most likely you will be expected to use JavaScript.
@ -18,13 +18,9 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
AlgoMonster aims to help you ace the technical interview **in the shortest time possible**. By Google engineers, AlgoMonster uses a data-driven approach to teach you the most useful key question patterns and has contents to help you quickly revise basic data structures and algorithms. Best of all, AlgoMonster is not subscription-based - pay a one-time fee and get **lifetime access**. [**Check it out →**](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
### [Grokking the Coding Interview: Patterns for Coding Questions](https://www.educative.io/courses/grokking-the-coding-interview?aff=x23W)
### [Grokking the Coding Interview: Patterns for Coding Questions](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
This course by Educative expands upon the questions on the recommended practice questions but approaches the practicing from a questions pattern perspective, which is an approach I also agree with for learning and have personally used to get better at coding interviews. The course allows you to practice selected questions in Java, Python, C++, JavaScript and also provides sample solutions in those languages. **Learn and understand patterns, not memorize answers!** [**Check it out →**](https://www.educative.io/courses/grokking-the-coding-interview?aff=x23W)
### [Master the Coding Interview: Data Structures + Algorithms](https://fxo.co/DQpY)
This Udemy bestseller is one of the highest-rated interview preparation course (4.6 stars, 21.5k ratings, 135k students) and packs **19 hours** worth of contents into it. Like Tech Interview Handbook, it goes beyond coding interviews and covers resume, non-technical interviews, negotiations. It's an all-in-one package! Note that JavaScript is being used for the coding demos. [**Check it out →**](https://fxo.co/DQpY)
This course by Design Gurus expands upon the questions on the recommended practice questions but approaches the practicing from a questions pattern perspective, which is an approach I also agree with for learning and have personally used to get better at coding interviews. The course allows you to practice selected questions in Java, Python, C++, JavaScript and also provides sample solutions in those languages. **Learn and understand patterns, not memorize answers!** [**Check it out →**](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
## JavaScript courses

2
contents/behavioral.md
View File

@ -1,5 +1,5 @@
---
title: Behavorial round
title: Behavorial interview
---
Behavioral interview rounds focus on a candidate's soft skills - how they work with others, how they handled situations in the past. For comprehensive behavioral interview content, [Tech Interview Handbook](https://www.techinterviewhandbook.org/behavioral-interview/) covers that along with common behavioral interview questions from the top companies.

26
contents/build-user-interfaces.md → contents/build-front-end-user-interfaces.md
View File

@ -1,16 +1,17 @@
---
title: Build front end user interfaces
slug: coding/build-user-interfaces
sidebar_label: Build user interfaces
title: Coding user interfaces in front end interviews
slug: coding/build-front-end-user-interfaces
sidebar_label: User interface coding
---
Many Front End Engineers spend a lot of time building UI, and building a UI component is a good way to assess someone's familiarity in the three biggest aspects of front end - HTML, JS, CSS.
Many Front End Engineers spend a lot of time building UI, and building a UI component is a good way to assess someone's familiarity in the three biggest aspects of front end - HTML, JavaScript, CSS.
Companies that ask such questions usually ask candidates to code in one of these three ways:
- [Codepen](https://codepen.io) (or some other online editor with preview) - You get to visualize the output and iterate on the solution
- 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.io or codesandbox.io. 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 do whiteboard-style for front end interviews
- 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 😱.
- 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 in front end interviews.
## Examples
@ -36,13 +37,16 @@ After you complete (or even before you start on) the question, think about these
### Front end best practices
- Avoid writing global variables. Wrap your code within an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and leave the global scope clean.
- What if you need to have multiple instances of this components on the page? Does your code enable me to do this? Did you use any global variables that will make it hard for you to do so? Will having multiple components on the same page affect each other? They should be independent!
- Do you have a convenient API to instantiate independent components with configurable options? Old school jQuery UI components are good examples of doing this in a pre-React world.
- Avoid writing global variables. Wrap your code within an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and don't pollute the global scope.
- What if you need to have multiple instances of this components on the page?
- Does your code enable you to do this?
- Did you use any global variables that will make it hard for you to do so?
- Will having multiple components on the same page affect each other? They should be independent!
- Do you have a convenient API to instantiate independent components with configurable options? Old school jQuery UI components are good examples of doing this in a pre-React era.
### Performance and scalability
Can your component scale (latency, performance, UI, UX, etc)?
Does your component scale (latency, performance, UI, UX, etc)?
- What if the network takes too long to return something? How do you test slow network speed? Hint: Chrome Devtools Network tab.
- What if a string is too long? Hint: CSS `word-break` property.

2
contents/companies/apple-front-end-interview-questions.md
View File

@ -3,7 +3,7 @@ title: Apple front end interview questions
sidebar_label: Apple
---
Little is known about Apple's front end interview process.
Not much is known about Apple's front end interview process.
## JavaScript

2
contents/companies/salesforce-front-end-interview-questions.md
View File

@ -3,7 +3,7 @@ title: Salesforce front end interview questions
sidebar_label: Salesforce
---
Note much is known about Salesforce's front end interview process.
Not much is known about Salesforce's front end interview process.
## Trivia

172
contents/company-interview-questions.md
View File

@ -1,172 +0,0 @@
---
title: Company interview questions
sidebar_label: Company interview questions 🔥
---
Here are sample front end interview questions from the famous tech companies, sourced from the Internet.
## Airbnb front end interview questions
**There will be technical rounds which ask algorithm questions.**
- Write a simple promise.
- 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 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.
- Implement a `StoreData` class that add key/value pairs and listen to value changes for keys. [Source](https://leetcode.com/discuss/interview-question/348436/Airbnb-or-Phone-Screen-or-Implement-StoreData-class)
_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)_
## Amazon front end interview questions
**There will be technical rounds which ask algorithm questions.**
- Design Accordion component.
- Implement a data table from an array of objects using HTML/CSS and JavaScript with searching and sorting.
- Implement `Array.prototype` functions like `map`, `reduce`, `filter`, `sort`.
- 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
- 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.
- E.g. `getElementsByStyle("color", "#FFF")` will return all elements in the DOM with white text.
- Implement a Like button. [Source](https://leetcode.com/discuss/interview-question/1719943/Amazon-or-Phone-Screen-or-FEE-L5-or-Like-Button)
- 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>)
- 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>)
- Create a search bar using HTML, CSS and JavaScript.
- Create a star rating widget.
- Render a directory tree given a nested JSON object.
- Implement tic-tac-toe.
- What is CSS Box?
- What is a JavaScript closure?
- What happens when you type URL?
- Recreate an adaptive layout with flexbox. Ensure accessibility.
- Implement a chess board with movable pieces.
- Promisify a function.
- How do you render text on a banner image?
_Source: [Amazon Front End Engineer Interview Questions](https://www.glassdoor.sg/Interview/Amazon-Front-End-Engineer-Interview-Questions-EI_IE6036.0,6_KO7,25.htm)_
## Apple front end interview questions
**There will be technical rounds which ask algorithm questions.**
- Implement `Array.prototype` methods (`flat`, `map`, `reduce`, `concat`) by yourself using JavaScript.
- What is a promise and how you can execute an array of promise in sequence.
- Implement a simple photo ordering tool with vanilla JS and no libraries.
_Source: [Apple Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Apple-Front-End-Developer-Interview-Questions-EI_IE1138.0,5_KO6,25.htm)_
## ByteDance/TikTok front end interview questions
**There will be technical rounds which ask algorithm questions.**
- Merge two sorted integer arrays, remove duplicates.
- You have an image on a page, write css and js so that when mouse is over the image, it rotates 180 deg with 1 sec animation.
- Given a list of points, find out if any four of them form a square. Return 'true' if possible, else 'false'.
- Examples: `[[0, 0], [2, 0], [1, 1], [0, -1], [-1, -1], [0, 2], [0, 1], [1,0]]` -> `true`
- Check for balanced brackets in a string.
- Implement a dropdown component.
- Given two nodes, return the section of the tree between these two nodes.
- Find the islands in a grid of land and sea.
- Difference between `localStorage` and cookies.
- Implement `Promise.all`.
_Source: [ByteDance Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/ByteDance-Front-End-Developer-Interview-Questions-EI_IE1624196.0,9_KO10,29.htm)_
## Dropbox front end interview questions
- Build an image gallery using JavaScript, HTML, CSS.
- System design for Google calendar.
- Forming words from mobile keypad.
- OOP-based class management system.
- Build a UI that fetches data from a weather API that is matching a spec.
- You want to log the number of hits to a site. Implement two functions, `log_hit()` which gets called when a hit is registered, and `get_hits_in_last_five_minutes()` which returns the total number of hits in the last five minutes.
- Implement [`getByClassName()` and `getByClassnameHierarcy()`](https://leetcode.com/discuss/interview-question/427896/Dropbox-or-Phone-Screen-or-Implement-getByClassName-and-getByClassnameHierarchy)
_Source: [Dropbox Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Dropbox-Front-End-Developer-Interview-Questions-EI_IE415350.0,7_KO8,27.htm), [Dropbox Web Developer Interview Questions](https://www.glassdoor.sg/Interview/Dropbox-Web-Developer-Interview-Questions-EI_IE415350.0,7_KO8,21.htm?filter.jobTitleFTS=Web+Developer)_
## Google front end interview questions
**There will be technical rounds which ask algorithm questions.**
- Design a slider component.
- Design a Tic-Tac-Toe game/design an algorithm for Tic-Tac-Toe game.
- You are given four numbers (type int), and have four basic math operators at your disposal (+, -, x, /). Given arbitrary ways to group the numbers and using any of the operators, determine if you can make the number 24 from the four numbers. The numbers must be processed in the order they appear.
- How do you make a function that only calls input function f every 50 milliseconds?
- How do you make a function that takes f and returns a function that calls f on a timeout?
- DFS on HTML nodes.
- Minesweeper problem. Write a function reveal() that outputs the number of tiles shown when a user clicks on a tile. Each tile shows the number of bombs as its neighbor. If the user click on a tile that is a bomb, the game is over. If that tile is 0, reveal all its neighbors.
- Find k-nearest points.
- 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 JSBin.
- 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 the outline view for a Google doc.
- Implement throttle.
_Source: [Google Front End Software Engineer Interview Questions](https://www.glassdoor.sg/Interview/Google-Front-End-Software-Engineer-Interview-Questions-EI_IE9079.0,6_KO7,34.htm)_
## Flipkart front end interview questions
- Invert keys/values of an object. Given an object make the keys as values and values as keys.
## LinkedIn front end interview questions
- Difference between CSS `padding` and `margin`.
- Difference between promise and callback?
- Difference between event bubbling and capturing?
- Difference between callback and closure in JavaScript?
- What are the advantages of using preprocessors? e.g. Sass, Stylus, Less.
- What is event delegation?
- Create a tooltip component.
- Create a cross browser Linkedin top navigation bar.
- Write a `getElementsByClassName` function.
- Reverse a doubly-linked list.
_Source: [Linked Front End Software Engineer Interview Questions](https://www.glassdoor.sg/Interview/LinkedIn-Front-End-Software-Engineer-Interview-Questions-EI_IE34865.0,8_KO9,36.htm)_
## Lyft front end interview questions
- Implement a typeahead.
- Implement `Promise.all`.
_Source: [Lyft Frontend Engineer Interview Questions](https://www.glassdoor.sg/Interview/Lyft-Frontend-Engineer-Interview-Questions-EI_IE700614.0,4_KO5,22.htm)_
## Microsoft front end interview questions
**There will be technical rounds which ask algorithm questions.**
- What is a prototype?
- What is a closure?
- What is the difference between `let`, `const`, and `var`?
- What is DOM?
- Tic-tac-toe implementation using vanilla JavaScript, HTML and CSS.
- Create a chat interface like Microsoft teams.
- Use OOP to implement a Chess game.
- Image slider implementation.
- Design an email client like Microsoft Outlook.
- Create a notification interface like Microsoft teams
_Source: [Microsoft Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Microsoft-Front-End-Developer-Interview-Questions-EI_IE1651.0,9_KO10,29.htm)_
## Salesforce front end interview questions
- What is the event loop?
- What is a closure?
- Flatten a nested array.
- Positioning in CSS.
_Source: [Salesforce UI Developer Interview Questions](https://www.glassdoor.sg/Interview/Salesforce-UI-Developer-Interview-Questions-EI_IE11159.0,10_KO11,23.htm)_
## Twitter front end interview questions
- Implement a typeahead. [Source](https://leetcode.com/discuss/interview-question/1220887/Twitter-Frontend-Phone-Screen)
- Add features to a tic-tac-toe game.
- What is the difference between `Array.prototype.map` and `Array.prototype.forEach`?
_Source: [Twitter Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Twitter-Front-End-Developer-Interview-Questions-EI_IE100569.0,7_KO8,27.htm)_
## Uber front end interview questions
**There will be technical rounds which ask algorithm questions.**
- 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)
- Overlapping circles app. [Source](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject)
- Implement a rate limiter attribute/decoration/annotation on top of an API endpoint. Caps to N requests per minute with a rolling window. [Source](https://leetcode.com/discuss/interview-question/124880/Rate-Limiter)

86
contents/css-questions.md
View File

@ -1,42 +1,64 @@
---
title: CSS questions
title: CSS trivia questions in front end interviews
sidebar_label: CSS questions
---
Answers to [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md). Pull requests for suggestions and corrections are welcome!
## Table of contents
- [What is CSS selector specificity and how does it work?](#what-is-css-selector-specificity-and-how-does-it-work)
- [What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?](#whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why)
- [Describe `float`s and how they work.](#describe-floats-and-how-they-work)
- [Describe z-index and how stacking context is formed.](#describe-z-index-and-how-stacking-context-is-formed)
- [Describe BFC (Block Formatting Context) and how it works.](#describe-block-formatting-context-bfc-and-how-it-works)
- [What are the various clearing techniques and which is appropriate for what context?](#what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context)
- [Explain CSS sprites, and how you would implement them on a page or site.](#explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site)
- [How would you approach fixing browser-specific styling issues?](#how-would-you-approach-fixing-browser-specific-styling-issues)
- [How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?](#how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniquesprocesses-do-you-use)
- [What are the different ways to visually hide content (and make it available only for screen readers)?](#what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers)
- [Have you ever used a grid system, and if so, what do you prefer?](#have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer)
- [Have you used or implemented media queries or mobile specific layouts/CSS?](#have-you-used-or-implemented-media-queries-or-mobile-specific-layoutscss)
- [Are you familiar with styling SVG?](#are-you-familiar-with-styling-svg)
- [Can you give an example of an @media property other than screen?](#can-you-give-an-example-of-an-media-property-other-than-screen)
- [What are some of the "gotchas" for writing efficient CSS?](#what-are-some-of-the-gotchas-for-writing-efficient-css)
- [What are the advantages/disadvantages of using CSS preprocessors?](#what-are-the-advantagesdisadvantages-of-using-css-preprocessors)
- [Describe what you like and dislike about the CSS preprocessors you have used.](#describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used)
- [How would you implement a web design comp that uses non-standard fonts?](#how-would-you-implement-a-web-design-comp-that-uses-non-standard-fonts)
- [Explain how a browser determines what elements match a CSS selector.](#explain-how-a-browser-determines-what-elements-match-a-css-selector)
- [Describe pseudo-elements and discuss what they are used for.](#describe-pseudo-elements-and-discuss-what-they-are-used-for)
- [Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.](#explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
- [What does `* { box-sizing: border-box; }` do? What are its advantages?](#what-does---box-sizing-border-box--do-what-are-its-advantages)
- [What is the CSS `display` property and can you give a few examples of its use?](#what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use)
- [What's the difference between `inline` and `inline-block`?](#whats-the-difference-between-inline-and-inline-block)
- [What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?](#whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element)
- [What existing CSS frameworks have you used locally, or in production? How would you change/improve them?](#what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them)
- [Have you played around with the new CSS Flexbox or Grid specs?](#have-you-played-around-with-the-new-css-flexbox-or-grid-specs)
- [Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?](#can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy)
- [How is responsive design different from adaptive design?](#how-is-responsive-design-different-from-adaptive-design)
- [Have you ever worked with retina graphics? If so, when and what techniques did you use?](#have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use)
- [Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?](#is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why)
- [Table of contents](#table-of-contents)
- [What is CSS selector specificity and how does it work?](#what-is-css-selector-specificity-and-how-does-it-work)
- [References](#references)
- [What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?](#whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why)
- [References](#references-1)
- [Describe `float`s and how they work.](#describe-floats-and-how-they-work)
- [References](#references-2)
- [Describe `z-index` and how stacking context is formed.](#describe-z-index-and-how-stacking-context-is-formed)
- [References](#references-3)
- [Describe Block Formatting Context (BFC) and how it works.](#describe-block-formatting-context-bfc-and-how-it-works)
- [References](#references-4)
- [What are the various clearing techniques and which is appropriate for what context?](#what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context)
- [Explain CSS sprites, and how you would implement them on a page or site.](#explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site)
- [References](#references-5)
- [How would you approach fixing browser-specific styling issues?](#how-would-you-approach-fixing-browser-specific-styling-issues)
- [How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?](#how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniquesprocesses-do-you-use)
- [What are the different ways to visually hide content (and make it available only for screen readers)?](#what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers)
- [References](#references-6)
- [Have you ever used a grid system, and if so, what do you prefer?](#have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer)
- [Have you used or implemented media queries or mobile-specific layouts/CSS?](#have-you-used-or-implemented-media-queries-or-mobile-specific-layoutscss)
- [Are you familiar with styling SVG?](#are-you-familiar-with-styling-svg)
- [References](#references-7)
- [Can you give an example of an @media property other than screen?](#can-you-give-an-example-of-an-media-property-other-than-screen)
- [References](#references-8)
- [What are some of the "gotchas" for writing efficient CSS?](#what-are-some-of-the-gotchas-for-writing-efficient-css)
- [References](#references-9)
- [What are the advantages/disadvantages of using CSS preprocessors?](#what-are-the-advantagesdisadvantages-of-using-css-preprocessors)
- [Describe what you like and dislike about the CSS preprocessors you have used.](#describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used)
- [How would you implement a web design comp that uses non-standard fonts?](#how-would-you-implement-a-web-design-comp-that-uses-non-standard-fonts)
- [Explain how a browser determines what elements match a CSS selector.](#explain-how-a-browser-determines-what-elements-match-a-css-selector)
- [References](#references-10)
- [Describe pseudo-elements and discuss what they are used for.](#describe-pseudo-elements-and-discuss-what-they-are-used-for)
- [References](#references-11)
- [Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.](#explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
- [References](#references-12)
- [What does `* { box-sizing: border-box; }` do? What are its advantages?](#what-does---box-sizing-border-box--do-what-are-its-advantages)
- [References](#references-13)
- [What is the CSS `display` property and can you give a few examples of its use?](#what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use)
- [What's the difference between `inline` and `inline-block`?](#whats-the-difference-between-inline-and-inline-block)
- [What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?](#whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element)
- [References](#references-14)
- [What existing CSS frameworks have you used locally, or in production? How would you change/improve them?](#what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them)
- [Have you played around with the new CSS Flexbox or Grid specs?](#have-you-played-around-with-the-new-css-flexbox-or-grid-specs)
- [References](#references-15)
- [Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?](#can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy)
- [How is responsive design different from adaptive design?](#how-is-responsive-design-different-from-adaptive-design)
- [References](#references-16)
- [Have you ever worked with retina graphics? If so, when and what techniques did you use?](#have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use)
- [References](#references-17)
- [Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?](#is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why)
- [References](#references-18)
- [Other Answers](#other-answers)
### What is CSS selector specificity and how does it work?

2
contents/front-end-system-design-applications.md
View File

@ -1,5 +1,5 @@
---
title: Front end system design - applications
title: Front end system design interview - applications
slug: front-end-system-design/applications
sidebar_label: Applications
---

2
contents/front-end-system-design-ui-components.md
View File

@ -1,5 +1,5 @@
---
title: Front end system design - UI components
title: Front end system design interview - UI components
slug: front-end-system-design/ui-components
sidebar_label: UI components
---

12
contents/front-end-system-design.md
View File

@ -1,22 +1,22 @@
---
title: Front end system design overview
title: Front end system design interview overview
sidebar_label: Overview
---
There are shockingly few front end system design resources out there, probably because there's a lower demand and supply for front end engineer candidates.
"System" here typically refers to front end systems, which are quite different from the typical distributed system design questions for Software Engineering interviews. The questions asked can be quite similar to the possible questions in ["Build user interfaces" format](./build-user-interfaces.md) but with more focus on architecture and design. There's a significant amount of overlap between them - you will likely need to do some design (data model, API) when you build UI, and also do some coding here to illustrate your ideas/app state format.
"System" here typically refers to front end systems, which are quite different from the typical distributed system design questions for Software Engineering interviews. The questions asked can be quite similar to the possible questions in ["Build user interfaces" format](./build-front-end-user-interfaces.md) but with more focus on architecture and design. There's a significant amount of overlap between them - you will likely need to do some design (data model, API) when you build UI, and also do some coding here to illustrate your ideas/app state format.
The difference between this section and the ["Build user interfaces" format](./build-user-interfaces.md) is that the questions here are usually larger. If the session is only half an hour, candidates are expected to talk about the design tradeoffs, possible implementations, instead of coding it out. Because system design questions usually involve multiple components and knowledge across the web stack, candidates usually do not have to go very deep into the lower-level details of each component and can keep the discussion at a higher level, about API design between the client and server, and API between the components.
The difference between this section and the ["Build user interfaces" format](./build-front-end-user-interfaces.md) is that the questions here are usually larger. If the session is only half an hour, candidates are expected to talk about the design tradeoffs, possible implementations, instead of coding it out. Because system design questions usually involve multiple components and knowledge across the web stack, candidates usually do not have to go very deep into the lower-level details of each component and can keep the discussion at a higher level, about API design between the client and server, and API between the components.
Many of the topics mentioned in the ["Build user interfaces" format](./build-user-interfaces.md) are also relevant for front end system design - API design, scalability, performance, user experience, i18n, accessibility, security, etc. Candidates should take the initiative and bring these topics up and lead the discussion with the interviewer. The more advanced topics such as performance, accessibility and i18n are what differentiates senior candidates from junior candidates.
Many of the topics mentioned in the ["Build user interfaces" format](./build-front-end-user-interfaces.md) are also relevant for front end system design - API design, scalability, performance, user experience, i18n, accessibility, security, etc. Candidates should take the initiative and bring these topics up and lead the discussion with the interviewer. The more advanced topics such as performance, accessibility and i18n are what differentiates senior candidates from junior candidates.
The two main kinds of front end system design interviews are UI components and applications.
## Examples
- UI Components
- Photo gallery
- User interface components
- Image carousel
- Selector
- Applications
- News feed

37
contents/html-questions.md
View File

@ -1,22 +1,35 @@
---
title: HTML questions
title: HTML trivia questions in front end interviews
sidebar_label: HTML questions
---
Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Pull requests for suggestions and corrections are welcome!
## Table of contents
- [What does a doctype do?](#what-does-a-doctype-do)
- [How do you serve a page with content in multiple languages?](#how-do-you-serve-a-page-with-content-in-multiple-languages)
- [What kind of things must you be wary of when designing or developing for multilingual sites?](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites)
- [What are `data-` attributes good for?](#what-are-data--attributes-good-for)
- [Consider HTML5 as an open web platform. What are the building blocks of HTML5?](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5)
- [Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
- [Describe the difference between `<script>`, `<script async>` and `<script defer>`.](#describe-the-difference-between-script-script-async-and-script-defer)
- [Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?](#why-is-it-generally-a-good-idea-to-position-css-links-between-headhead-and-js-scripts-just-before-body-do-you-know-any-exceptions)
- [What is progressive rendering?](#what-is-progressive-rendering)
- [Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
- [Have you used different HTML templating languages before?](#have-you-used-different-html-templating-languages-before)
- [Table of contents](#table-of-contents)
- [What does a DOCTYPE do?](#what-does-a-doctype-do)
- [References](#references)
- [How do you serve a page with content in multiple languages?](#how-do-you-serve-a-page-with-content-in-multiple-languages)
- [References](#references-1)
- [What kind of things must you be wary of when designing or developing for multilingual sites?](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites)
- [References](#references-2)
- [What are `data-` attributes good for?](#what-are-data--attributes-good-for)
- [References](#references-3)
- [Consider HTML5 as an open web platform. What are the building blocks of HTML5?](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5)
- [References](#references-4)
- [Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
- [References](#references-5)
- [Describe the difference between `<script>`, `<script async>` and `<script defer>`.](#describe-the-difference-between-script-script-async-and-script-defer)
- [References](#references-6)
- [Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?](#why-is-it-generally-a-good-idea-to-position-css-links-between-headhead-and-js-scripts-just-before-body-do-you-know-any-exceptions)
- [References](#references-7)
- [What is progressive rendering?](#what-is-progressive-rendering)
- [References](#references-8)
- [Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
- [References](#references-9)
- [Have you used different HTML templating languages before?](#have-you-used-different-html-templating-languages-before)
- [Other Answers](#other-answers)
### What does a DOCTYPE do?

79
contents/introduction.md
View File

@ -8,7 +8,7 @@ Unlike typical software engineer job interviews, front end interviews have less
Many front end interviews are highly-focused on domain knowledge and applying them to real-world scenarios. You might find that grinding LeetCode is not all you need when it comes to interviewing for a front end position, but that's a good thing! Front end interviews tend to test concepts that are more practical and relevant to real world front end development. But that doesn't mean that you don't have to be familiar with basic data structure and algorithmic concepts - there's just less emphasis on them and probably you get easier algorithmic questions.
While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would 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 pop quiz-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 software engineer interview. Among the existing resources, probably the most helpful question bank would 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.
## General tips for front end interviews
@ -26,24 +26,79 @@ Look out for interview questions by companies on Glassdoor. Front end questions
## Front end interview formats
Unlike Software Engineering interviews, the formats for front end interviews are less known and not standardized across the industry. However, there are a few common formats:
Unlike Software Engineering interviews, the formats for front end interviews are less known and not standardized across the industry. We have made the efforts to search the Internet for front end interview questions asked by the popular companies and there are some questions which appear very often. In general, you should be familiar with the following questions and formats:
### Pop quiz
### Trivia questions
Short questions which test your knowledge and have clear non-subjective answers. These are usually asked by recruiters because the answers can be verified by non-technical people E.g. Explain the `this` keyword in JavaScript.
Short questions which test your knowledge and have clear non-subjective answers. These are usually asked by recruiters because the accuracy of the answers can be verified even by non-technical people. Here are some examples:
[Read more about front end pop quizzes](./pop-quiz.md)
- JavaScript
- What is a closure?
- What is the difference between a promise and a callback?
- Explain the `this` keyword in JavaScript.
- CSS
- What is the CSS box model?
- Various CSS `position` properties and its differences.
### Coding
[**Read more about front end trivia questions →**](./trivia.md)
- **Algorithms** - LeetCode-style algorithmic coding questions, but solve them using JavaScript
- **Write a small utility function/library** - Implement a common function in JavaScript. This is the front end version of LeetCode-style algorithm questions. E.g. Implement the `debounce` function found in Underscore/Lodash
- **Build user interfaces (component/app/game)** - Write HTML, CSS and JavaScript to implement a UI component or a small app/game. E.g. Build a tabs component, Tic-tac-toe Game, Tetris Game
### JavaScript coding
[Read more about front end coding questions](./algorithms.md)
This is the front end version of LeetCode-style algorithm questions. Implement a function in JavaScript, it could be a utility function found in Lodash/Underscore (e.g. `throttle`), or a polyfill for the JavaScript language/DOM APIs (e.g. `Array.prototype.filter`, `Promise.all`, `document.getElementsByClassName()`).
### System Design
- Implement `Array.prototype` functions: `map`, `reduce`, `filter`, `sort`.
- Implement DOM APIs: `getElementsByClassName`.
- `debounce`/`throttle`.
- Implement Promise/Promise-related APIs: `Promise`, `Promise.all`.
### User interface coding
Build user interfaces (can be a UI component, an app, or a game) using HTML, CSS, and JavaScript.
- Components
- Autocomplete (**very popular**)
- Photo gallery
- Image carousel
- Tooltip component
- Star rating widget
- Apps
- Build tic-tac-toe
- Build a chess board with movable pieces
[**Read more about front end coding questions →**](./algorithms.md)
### Algorithm coding
LeetCode-style algorithmic coding questions which evaluate your core data structures and algorithms skills. You can be asked any questions on LeetCode and might be asked to solve them using JavaScript.
### System design
Describe and discuss how you would build a UI component/app/game and its architecture. This is the front end version of system design questions. E.g. Describe how you would build Emoji autocomplete feature in a chat app, what APIs it would have, what components there are to the feature, how to ensure it has good performance, UX, etc.
[Read more about front end system design](./front-end-system-design.md)
- Design an image carousel component.
- Design an email client application.
[**Read more about front end system design →**](./front-end-system-design.md)
## Company formats
Through extensive research, are the different type of formats companies ask during the technical rounds of front end interviews. If you're interviewing for front end engineering roles at certain companies, prepare accordingly!
_Legend: ✅: Asked, ❌: Not asked, ⚠️: No data_
| Company | Trivia | Algorithms | JavaScript coding | UI coding | System design |
| :-- | :-: | :-: | :-: | :-: | :-: |
| Airbnb | ❌ | ✅ | ✅ | ✅ | ❌ |
| Amazon | ✅ | ✅ | ✅ | ✅ | ✅ |
| Apple | ⚠️ | ⚠️ | ✅ | ✅ | ⚠️ |
| ByteDance/TikTok | ✅ | ✅ | ✅ | ✅ | ❌ |
| Dropbox | ❌ | ⚠️ | ✅ | ✅ | ✅ |
| Facebook/Meta | ✅ | ❌ | ✅ | ❌ | ✅ |
| Flipkart | ⚠️ | ✅ | ⚠️ | ⚠️ | ⚠️ |
| Google | ✅ | ✅ | ✅ | ✅ | ✅ |
| LinkedIn | ✅ | ⚠️ | ✅ | ✅ | ⚠️ |
| Lyft | ❌ | ❌ | ✅ | ✅ | ⚠️ |
| Microsoft | ✅ | ✅ | ✅ | ✅ | ⚠️ |
| Salesforce | ✅ | ⚠️ | ⚠️ | ⚠️ | ⚠️ |
| Twitter | ✅ | ⚠️ | ✅ | ✅ | ⚠️ |
| Uber | ⚠️ | ⚠️ | ✅ | ✅ | ⚠️ |

164
contents/javascript-questions.md
View File

@ -1,65 +1,119 @@
---
title: JavaScript questions
title: JavaScript trivia questions in front end interviews
sidebar_label: JavaScript questions
---
Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome!
## Table of contents
- [Explain event delegation](#explain-event-delegation)
- [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript)
- [Explain how prototypal inheritance works](#explain-how-prototypal-inheritance-works)
- [What do you think of AMD vs CommonJS?](#what-do-you-think-of-amd-vs-commonjs)
- [Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?](#explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife)
- [What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?](#whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states)
- [What is a closure, and how/why would you use one?](#what-is-a-closure-and-howwhy-would-you-use-one)
- [Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?](#can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other)
- [What's a typical use case for anonymous functions?](#whats-a-typical-use-case-for-anonymous-functions)
- [How do you organize your code? (module pattern, classical inheritance?)](#how-do-you-organize-your-code-module-pattern-classical-inheritance)
- [What's the difference between host objects and native objects?](#whats-the-difference-between-host-objects-and-native-objects)
- [Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?](#difference-between-function-person-var-person--person-and-var-person--new-person)
- [What's the difference between `.call` and `.apply`?](#whats-the-difference-between-call-and-apply)
- [Explain `Function.prototype.bind`.](#explain-functionprototypebind)
- [When would you use `document.write()`?](#when-would-you-use-documentwrite)
- [What's the difference between feature detection, feature inference, and using the UA string?](#whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string)
- [Explain Ajax in as much detail as possible.](#explain-ajax-in-as-much-detail-as-possible)
- [What are the advantages and disadvantages of using Ajax?](#what-are-the-advantages-and-disadvantages-of-using-ajax)
- [Explain how JSONP works (and how it's not really Ajax).](#explain-how-jsonp-works-and-how-its-not-really-ajax)
- [Have you ever used JavaScript templating? If so, what libraries have you used?](#have-you-ever-used-javascript-templating-if-so-what-libraries-have-you-used)
- [Explain "hoisting".](#explain-hoisting)
- [Describe event bubbling.](#describe-event-bubbling)
- [What's the difference between an "attribute" and a "property"?](#whats-the-difference-between-an-attribute-and-a-property)
- [Why is extending built-in JavaScript objects not a good idea?](#why-is-extending-built-in-javascript-objects-not-a-good-idea)
- [Difference between document `load` event and document `DOMContentLoaded` event?](#difference-between-document-load-event-and-document-domcontentloaded-event)
- [What is the difference between `==` and `===`?](#what-is-the-difference-between--and-)
- [Explain the same-origin policy with regards to JavaScript.](#explain-the-same-origin-policy-with-regards-to-javascript)
- [Make this work: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`](#make-this-work)
- [Why is it called a Ternary expression, what does the word "Ternary" indicate?](#why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate)
- [What is "use strict";? what are the advantages and disadvantages to using it?](#what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it)
- [Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5](#create-a-for-loop-that-iterates-up-to-100-while-outputting-fizz-at-multiples-of-3-buzz-at-multiples-of-5-and-fizzbuzz-at-multiples-of-3-and-5)
- [Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?](#why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it)
- [Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?](#why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those)
- [Explain what a single page app is and how to make one SEO-friendly.](#explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly)
- [What is the extent of your experience with Promises and/or their polyfills?](#what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills)
- [What are the pros and cons of using Promises instead of callbacks?](#what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks)
- [What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?](#what-are-some-of-the-advantagesdisadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript)
- [What tools and techniques do you use debugging JavaScript code?](#what-tools-and-techniques-do-you-use-for-debugging-javascript-code)
- [What language constructions do you use for iterating over object properties and array items?](#what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items)
- [Explain the difference between mutable and immutable objects.](#explain-the-difference-between-mutable-and-immutable-objects)
- [Explain the difference between synchronous and asynchronous functions.](#explain-the-difference-between-synchronous-and-asynchronous-functions)
- [What is event loop? What is the difference between call stack and task queue?](#what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue)
- [Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`](#explain-the-differences-on-the-usage-of-foo-between-function-foo--and-var-foo--function-)
- [What are the differences between variables created using `let`, `var` or `const`?](#what-are-the-differences-between-variables-created-using-let-var-or-const)
- [What are the differences between ES6 class and ES5 function constructors?](#what-are-the-differences-between-es6-class-and-es5-function-constructors)
- [Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?](#can-you-offer-a-use-case-for-the-new-arrow--function-syntax-how-does-this-new-syntax-differ-from-other-functions)
- [What advantage is there for using the arrow syntax for a method in a constructor?](#what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor)
- [What is the definition of a higher-order function?](#what-is-the-definition-of-a-higher-order-function)
- [Can you give an example for destructuring an object or an array?](#can-you-give-an-example-for-destructuring-an-object-or-an-array)
- [ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?](#es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example)
- [Can you give an example of a curry function and why this syntax offers an advantage?](#can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage)
- [What are the benefits of using spread syntax and how is it different from rest syntax?](#what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax)
- [How can you share code between files?](#how-can-you-share-code-between-files)
- [Why you might want to create static class members?](#why-you-might-want-to-create-static-class-members)
- [Table of contents](#table-of-contents)
- [Explain event delegation](#explain-event-delegation)
- [References](#references)
- [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript)
- [Can you give an example of one of the ways that working with this has changed in ES6?](#can-you-give-an-example-of-one-of-the-ways-that-working-with-this-has-changed-in-es6)
- [References](#references-1)
- [Explain how prototypal inheritance works](#explain-how-prototypal-inheritance-works)
- [Example of Prototypal Inheritance](#example-of-prototypal-inheritance)
- [References](#references-2)
- [What do you think of AMD vs CommonJS?](#what-do-you-think-of-amd-vs-commonjs)
- [References](#references-3)
- [Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?](#explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife)
- [References](#references-4)
- [What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?](#whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states)
- [References](#references-5)
- [What is a closure, and how/why would you use one?](#what-is-a-closure-and-howwhy-would-you-use-one)
- [References](#references-6)
- [Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?](#can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other)
- [References](#references-7)
- [What's a typical use case for anonymous functions?](#whats-a-typical-use-case-for-anonymous-functions)
- [References](#references-8)
- [How do you organize your code? (module pattern, classical inheritance?)](#how-do-you-organize-your-code-module-pattern-classical-inheritance)
- [What's the difference between host objects and native objects?](#whats-the-difference-between-host-objects-and-native-objects)
- [References](#references-9)
- [Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?](#difference-between-function-person-var-person--person-and-var-person--new-person)
- [References](#references-10)
- [What's the difference between `.call` and `.apply`?](#whats-the-difference-between-call-and-apply)
- [Explain `Function.prototype.bind`.](#explain-functionprototypebind)
- [References](#references-11)
- [When would you use `document.write()`?](#when-would-you-use-documentwrite)
- [References](#references-12)
- [What's the difference between feature detection, feature inference, and using the UA string?](#whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string)
- [References](#references-13)
- [Explain Ajax in as much detail as possible.](#explain-ajax-in-as-much-detail-as-possible)
- [References](#references-14)
- [What are the advantages and disadvantages of using Ajax?](#what-are-the-advantages-and-disadvantages-of-using-ajax)
- [Explain how JSONP works (and how it's not really Ajax).](#explain-how-jsonp-works-and-how-its-not-really-ajax)
- [References](#references-15)
- [Have you ever used JavaScript templating? If so, what libraries have you used?](#have-you-ever-used-javascript-templating-if-so-what-libraries-have-you-used)
- [Explain "hoisting".](#explain-hoisting)
- [References](#references-16)
- [Describe event bubbling.](#describe-event-bubbling)
- [What's the difference between an "attribute" and a "property"?](#whats-the-difference-between-an-attribute-and-a-property)
- [References](#references-17)
- [Why is extending built-in JavaScript objects not a good idea?](#why-is-extending-built-in-javascript-objects-not-a-good-idea)
- [References](#references-18)
- [Difference between document `load` event and document `DOMContentLoaded` event?](#difference-between-document-load-event-and-document-domcontentloaded-event)
- [References](#references-19)
- [What is the difference between `==` and `===`?](#what-is-the-difference-between--and-)
- [References](#references-20)
- [Explain the same-origin policy with regards to JavaScript.](#explain-the-same-origin-policy-with-regards-to-javascript)
- [References](#references-21)
- [Make this work:](#make-this-work)
- [Why is it called a Ternary expression, what does the word "Ternary" indicate?](#why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate)
- [References](#references-22)
- [What is `"use strict";`? What are the advantages and disadvantages to using it?](#what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it)
- [References](#references-23)
- [Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, **"buzz"** at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`.](#create-a-for-loop-that-iterates-up-to-100-while-outputting-fizz-at-multiples-of-3-buzz-at-multiples-of-5-and-fizzbuzz-at-multiples-of-3-and-5)
- [References](#references-24)
- [Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?](#why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it)
- [Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?](#why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those)
- [References](#references-25)
- [Explain what a single page app is and how to make one SEO-friendly.](#explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly)
- [References](#references-26)
- [What is the extent of your experience with Promises and/or their polyfills?](#what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills)
- [References](#references-27)
- [What are the pros and cons of using Promises instead of callbacks?](#what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks)
- [References](#references-28)
- [What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?](#what-are-some-of-the-advantagesdisadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript)
- [References](#references-29)
- [What tools and techniques do you use for debugging JavaScript code?](#what-tools-and-techniques-do-you-use-for-debugging-javascript-code)
- [References](#references-30)
- [What language constructions do you use for iterating over object properties and array items?](#what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items)
- [References](#references-31)
- [Explain the difference between mutable and immutable objects.](#explain-the-difference-between-mutable-and-immutable-objects)
- [What is an example of an immutable object in JavaScript?](#what-is-an-example-of-an-immutable-object-in-javascript)
- [What are the pros and cons of immutability?](#what-are-the-pros-and-cons-of-immutability)
- [References](#references-32)
- [How can you achieve immutability in your own code?](#how-can-you-achieve-immutability-in-your-own-code)
- [References](#references-33)
- [Explain the difference between synchronous and asynchronous functions.](#explain-the-difference-between-synchronous-and-asynchronous-functions)
- [What is event loop? What is the difference between call stack and task queue?](#what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue)
- [References](#references-34)
- [Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`](#explain-the-differences-on-the-usage-of-foo-between-function-foo--and-var-foo--function-)
- [References](#references-35)
- [What are the differences between variables created using `let`, `var` or `const`?](#what-are-the-differences-between-variables-created-using-let-var-or-const)
- [References](#references-36)
- [What are the differences between ES6 class and ES5 function constructors?](#what-are-the-differences-between-es6-class-and-es5-function-constructors)
- [References](#references-37)
- [Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?](#can-you-offer-a-use-case-for-the-new-arrow--function-syntax-how-does-this-new-syntax-differ-from-other-functions)
- [What advantage is there for using the arrow syntax for a method in a constructor?](#what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor)
- [References](#references-38)
- [What is the definition of a higher-order function?](#what-is-the-definition-of-a-higher-order-function)
- [References](#references-39)
- [Can you give an example for destructuring an object or an array?](#can-you-give-an-example-for-destructuring-an-object-or-an-array)
- [References](#references-40)
- [ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?](#es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example)
- [References](#references-41)
- [Can you give an example of a curry function and why this syntax offers an advantage?](#can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage)
- [References](#references-42)
- [What are the benefits of using spread syntax and how is it different from rest syntax?](#what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax)
- [References](#references-43)
- [How can you share code between files?](#how-can-you-share-code-between-files)
- [References](#references-44)
- [Why you might want to create static class members?](#why-you-might-want-to-create-static-class-members)
- [References](#references-45)
- [Other Answers](#other-answers)
### Explain event delegation

32
contents/utility-function.md → contents/javascript-utility-function.md
View File

@ -1,7 +1,7 @@
---
title: Front end utility functions
slug: coding/utility-function
sidebar_label: Utility functions
title: Coding JavaScript utility functions in front end interviews
slug: coding/javascript-utility-function
sidebar_label: JavaScript coding
---
These are the front-end version of LeetCode questions, but with less emphasis on complicated algorithms and more focused on practical use cases. However, they could also be questions simply being the same LeetCode problem but you are required to answer in JavaScript.
@ -10,28 +10,30 @@ Almost all existing utility functions you will be asked exist within the JavaScr
## Basic examples
- `debounce()`/`throttle()`
- `cloneDeep()`
- `groupBy()`
- `chunk()`/`map()` with follow up of `mapAsync`(`Promise.all`) then `mapWithChunksAsync`
- Implement `Array.prototype` functions: `map`, `reduce`, `filter`, `sort`
- Implement Promise/Promise-related APIs: `Promise`, `Promise.all`
- Implement Lodash functions: `debounce()`, `throttle()`, `cloneDeep()`, `groupBy()`
- Lodash's `chunk()`/`map()` with follow up of `mapAsync`(`Promise.all`) then `mapWithChunksAsync`
- Convert all keys within an object into snake_case/camelCase
- `document.querySelectorAll` (limited to just tags selectors)
- [Observer pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript)
The best way to prepare is to get your hands dirty by implementing them yourself and writing test cases for them. Because you're writing functions, pay attention to the time complexity as well. Don't write a function that runs in O(n<sup>2</sup>) if it can pretty easily be written in O(n).
The best way to prepare is to get your hands dirty by implementing them yourself and writing test cases for them.
Candidates are expected to take just around 10-15 minutes for a basic question. If you can tell that you received a basic question, try to finish within the suggested duration and do not intentionally take the entire interview to do one question. In most cases, you are expected to answer another small coding question.
Although the focus of such questions is not on algorithms, do pay attention to choice of data structures and the time complexity as well. Don't write a function that runs in O(n<sup>2</sup>) if it can pretty easily be written in O(n) with the help of hash maps.
Candidates are expected to take just around 10-15 minutes for a basic question. If you can tell that you received a basic question, try to finish within the suggested duration and do not intentionally take the entire interview to do one question. In most cases, you are expected to answer another coding question.
## Advanced examples
Advanced questions are usually given to more senior candidates and expect around 25-30 minutes to complete or arrive at a minimally working solution.
- Write a templating engine that does variables substitution and simple conditionals
- Implement `JSON.stringify()`
- Generate table of contents/outline from a HTML page (similar to Google Docs autogenerated outline)
- Write a templating engine that does variables substitution and simple conditionals.
- Implement `JSON.stringify()`.
- Generate table of contents/outline from a HTML page (similar to Google Docs autogenerated outline).
## Tips
- Always try to write pure functions
- If you're writing a recursive function, ask whether there's a maximum stack depth limit
- Some nested data structures can have recursive references to itself. Do clarify that there are no self-references/cycles within the object/ask if you need to handle them (usually the answer is No)
- Always strive to write pure functions, aka functions which don't rely on state outside of the function and doesn't cause side effects.
- If you're writing a recursive function, ask whether there's a maximum stack depth limit.
- Some nested data structures can have recursive references to itself. Do clarify that there are no self-references/cycles within the object/ask if you need to handle them (usually the answer is "No").

27
contents/pop-quiz.md
View File

@ -1,27 +0,0 @@
---
title: Pop quiz overview
sidebar_label: Overview
---
Pop Quiz-style questions are usually found in the first few stages of an interview as the answers are usually short and can possibly be administered by a minimally-technical recruiter.
Pop quiz questions are meant to test how well a candidates understands the theory behind the domain. They can be aced by either having real solid understanding of the concepts or by pure memorization of answers. The questions asked here are pretty limited and most can be found within the next few sections.
## Basic examples
- What is a closure in JavaScript?
- Explain what promises are and what they're useful for.
- Explain the CSS box model.
## Advanced examples
For more senior candidates, expect to explain more advanced stuff with no absolute answers.
- How does React work? What is Virtual DOM and what problems does it solve?
- Why did you use library X over library Y?
The best and correct way is to prepare for such questions is to really understand the concepts and gets some hands-on experience in applying them in a project. Memorizing the answers is not recommended but is acceptable if you are running out of time.
## Common questions
The next few pages go through common questions tested for HTML/CSS/JavaScript and provides answers to them.

32
contents/trivia.md Normal file
View File

@ -0,0 +1,32 @@
---
title: Trivia questions in front end interviews
sidebar_label: Overview
---
Trivia-style questions are usually found in the first few stages of an interview as the answers are usually short and can possibly be administered by a minimally-technical recruiter.
Trivia questions are meant to test how well a candidates understands the theory behind the domain. They can be aced by either having real solid understanding of the concepts or by pure memorization of answers. The questions asked here are pretty limited and most can be found within the next few sections.
## Basic examples
- JavaScript
- What is a closure?
- Explain what promises are and what they're useful for.
- What is the difference between a promise and a callback?
- Explain `this` in JavaScript.
- CSS
- Explain the CSS box model.
- Explain the various CSS `position` properties and its differences.
## Advanced examples
For more senior candidates, expect to explain more advanced stuff with no absolute answers.
- How does React work? What is virtual DOM and what problems does it solve?
- Why did you use library X over library Y?
The best and correct way is to prepare for such questions is to really understand the concepts and gets some hands-on experience in applying them in a project. Memorizing the answers is not recommended but is acceptable if you are running out of time.
## Common questions
The next few pages go through common trivia questions tested for HTML/CSS/JavaScript and provides high quality answers to them.

16
website/docusaurus.config.js
View File

@ -1,7 +1,7 @@
module.exports = {
title: 'Front End Interview Handbook',
tagline:
'Front end interview preparation materials for busy engineers - pop quizzes, coding, algorithms, front end system design and more!',
'Front end interview preparation materials for busy engineers - trivias, coding, algorithms, front end system design and more!',
url: 'https://www.frontendinterviewhandbook.com',
baseUrl: '/',
trailingSlash: true,
@ -70,12 +70,12 @@ module.exports = {
href: '/introduction/',
},
{
label: 'Pop quiz',
href: '/pop-quiz/',
label: 'Trivia questions',
href: '/trivia/',
},
{
label: 'Behavioral round',
href: '/behavioral/',
label: 'Company questions',
href: '/company-interview-questions/',
},
{
label: 'Blog',
@ -91,12 +91,12 @@ module.exports = {
href: '/coding/algorithms/',
},
{
label: 'Utility function',
href: '/coding/utility-function/',
label: 'JavaScript utility functions',
href: '/coding/javascript-utility-function/',
},
{
label: 'User interfaces',
href: '/coding/build-user-interfaces/',
href: '/coding/build-front-end-user-interfaces/',
},
],
},

26
website/sidebars.js
View File

@ -3,29 +3,34 @@ module.exports = {
'introduction',
{
type: 'category',
label: 'Pop quiz',
label: 'Trivia questions',
items: [
'pop-quiz',
'html-questions',
'css-questions',
'trivia',
'javascript-questions',
'css-questions',
'html-questions',
],
},
{
type: 'category',
label: 'Coding round',
label: 'Coding interview',
collapsed: false,
link: {
type: 'generated-index',
title: 'Coding round',
description: 'Various type of front end coding interview!',
description:
'Various type of coding questions for front end interviews!',
slug: '/coding',
},
items: ['algorithms', 'utility-function', 'build-user-interfaces'],
items: [
'javascript-utility-function',
'build-front-end-user-interfaces',
'algorithms',
],
},
{
type: 'category',
label: 'System design',
label: 'System design interview',
collapsed: false,
items: [
'front-end-system-design',
@ -39,6 +44,11 @@ module.exports = {
type: 'category',
label: 'Interview questions 🔥',
collapsed: false,
link: {
type: 'generated-index',
title: 'Company interview questions',
slug: '/company-interview-questions',
},
items: [
'companies/google-front-end-interview-questions',
'companies/microsoft-front-end-interview-questions',

133
website/src/css/custom.css
View File

@ -52,22 +52,63 @@ html[data-theme='dark'] {
text-align: start;
}
.markdown h1:first-child {
--ifm-h1-font-size: 1.5em;
}
@media screen and (min-width: 768px) {
.markdown h1:first-child {
--ifm-h1-font-size: 2.25em;
}
}
.markdown h2 {
--ifm-h2-font-size: 1.375em;
margin-top: 2em;
margin-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
.markdown h2 {
--ifm-h2-font-size: 1.5em;
}
}
.markdown h3 {
--ifm-h3-font-size: 1.25em;
font-weight: 600;
margin-top: 1.8em;
margin-bottom: 0.5em;
}
.markdown h4 {
font-size: 1.15em;
font-weight: 600;
margin-top: 1.6em;
margin-bottom: 0.4em;
}
.markdown h5 {
font-size: 1em;
font-weight: 600;
margin-top: 1.4em;
margin-bottom: 0.3em;
}
.markdown blockquote {
border-left-color: var(--ifm-color-emphasis-200);
border-left-width: 0.5rem;
color: var(--ifm-color-emphasis-600);
}
.markdown ul blockquote {
font-size: 0.9em;
margin-top: 0.5em;
}
@media screen and (max-width: 767px) {
:root {
--ifm-font-size-base: 16px;
}
.markdown h1 {
--ifm-h1-font-size: 1.5rem;
}
.markdown h2 {
--ifm-h2-font-size: 1.375rem;
}
.markdown h3 {
--ifm-h3-font-size: 1.25rem;
}
}
div[class^='announcementBar_'] {
@ -123,71 +164,3 @@ html[data-theme='dark'] .navbar-icon-facebook:before {
height: 28px;
width: 28px;
}
#carbonads * {
margin: initial;
padding: initial;
}
#carbonads {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
sans-serif;
display: flex;
background-color: hsl(0, 0%, 98%);
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
z-index: 100;
margin: 1rem auto;
}
html[data-theme='dark'] #carbonads {
background-color: hsl(0, 0%, 15%);
box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085), 0 0 2px hsl(0deg 0% 0% / 0.085),
0 0 4px hsl(0deg 0% 0% / 0.085), 0 0 8px hsl(0deg 0% 0% / 0.085);
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
}
#carbonads .carbon-img {
display: block;
margin: 0;
line-height: 1;
}
#carbonads .carbon-img img {
display: block;
}
#carbonads .carbon-text {
font-size: 13px;
padding: 10px;
margin-bottom: 16px;
line-height: 1.5;
text-align: left;
}
#carbonads .carbon-poweredby {
display: block;
padding: 6px 8px;
background: #f1f1f2;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 8px;
line-height: 1;
border-top-left-radius: 3px;
position: absolute;
bottom: 0;
right: 0;
}
html[data-theme='dark'] #carbonads .carbon-poweredby {
background: #1e2021;
}

2
website/src/pages/index.js
View File

@ -198,7 +198,7 @@ function FeaturesSection() {
End interviews. We tell you how to prepare for them (hint: not
just LeetCode).
</p>
<a href={useBaseUrl('build-user-interfaces')}>
<a href={useBaseUrl('coding/build-front-end-user-interfaces')}>
<strong>Learn more</strong>
</a>
</div>

BIN
website/static/GoogleFE.pdf Normal file
View File

Binary file not shown.

32
website/vercel.json
View File

@ -14,19 +14,43 @@
},
{
"source": "/utility-function",
"destination": "/coding/utility-function/"
"destination": "/coding/javascript-utility-function/"
},
{
"source": "/utility-function/",
"destination": "/coding/utility-function/"
"destination": "/coding/javascript-utility-function/"
},
{
"source": "/coding/utility-function",
"destination": "/coding/javascript-utility-function/"
},
{
"source": "/coding/utility-function/",
"destination": "/coding/javascript-utility-function/"
},
{
"source": "/build-user-interfaces",
"destination": "/coding/build-user-interfaces/"
"destination": "/coding/build-front-end-user-interfaces/"
},
{
"source": "/build-user-interfaces/",
"destination": "/coding/build-user-interfaces/"
"destination": "/coding/build-front-end-user-interfaces/"
},
{
"source": "/coding/build-user-interfaces",
"destination": "/coding/build-front-end-user-interfaces/"
},
{
"source": "/coding/build-user-interfaces/",
"destination": "/coding/build-front-end-user-interfaces/"
},
{
"source": "/pop-quiz",
"destination": "/trivia/"
},
{
"source": "/pop-quiz/",
"destination": "/trivia/"
}
]
}