├── .gitignore ├── website ├── static │ ├── CNAME │ ├── ads.txt │ └── img │ │ ├── favicon.png │ │ ├── icons8-facebook.svg │ │ ├── icons8-facebook-light.svg │ │ ├── icons8-github.svg │ │ ├── icons8-github-light.svg │ │ ├── icons8-twitter.svg │ │ ├── icons8-twitter-light.svg │ │ └── logo.svg ├── src │ ├── css │ │ ├── fonts │ │ │ ├── Inter-roman-latin.var.woff2 │ │ │ └── Inter-italic-latin.var.woff2 │ │ └── custom.css │ ├── theme │ │ ├── DocSidebarItem │ │ │ ├── styles.module.css │ │ │ └── index.js │ │ ├── PaginatorNavLink │ │ │ └── index.js │ │ ├── TOC │ │ │ ├── styles.module.css │ │ │ └── index.js │ │ └── DocPaginator │ │ │ └── index.js │ ├── components │ │ └── SidebarAd │ │ │ ├── styles.module.css │ │ │ └── index.js │ ├── pages │ │ └── styles.module.css │ └── data │ │ └── successStories.js ├── .gitignore ├── vercel.json ├── README.md ├── i18n │ ├── kr │ │ └── docusaurus-plugin-content-docs │ │ │ └── current │ │ │ └── pop-quiz.md │ ├── zh │ │ └── docusaurus-plugin-content-docs │ │ │ └── current │ │ │ └── html-questions.md │ ├── es │ │ └── docusaurus-plugin-content-docs │ │ │ └── current │ │ │ └── javascript-questions.md │ ├── jp │ │ └── docusaurus-plugin-content-docs │ │ │ └── current │ │ │ └── html-questions.md │ └── pr │ │ └── docusaurus-plugin-content-docs │ │ └── current │ │ └── css-questions.md ├── package.json ├── sidebars.js ├── blog │ ├── 2021-08-28-front-end-career-questions.md │ ├── 2021-08-30-a-glimpse-into-front-end-interviews.md │ ├── 2019-11-03-are-front-end-development-enough-for-a-career.md │ └── 2021-12-23-front-end-vs-back-end-system-design-interviews.md └── docusaurus.config.js ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── questions ├── css-questions.md ├── html-questions.md └── javascript-questions.md ├── .travis.yml ├── .wip └── topics │ ├── networking.md │ ├── caching.md │ ├── design.md │ ├── html.md │ ├── performance.md │ ├── widgets.md │ ├── browser.md │ ├── css.md │ ├── javascript.md │ ├── dom.md │ └── security.md ├── .prettierrc ├── .editorconfig ├── CODE_OF_CONDUCT.md ├── LICENSE ├── contents ├── pop-quiz.md ├── behavioral.md ├── resume.md ├── utility-function.md ├── algorithms.md ├── front-end-system-design-applications.md ├── introduction.md ├── front-end-system-design.md └── build-user-interfaces.md ├── CONTRIBUTING.md ├── assets ├── scroll.svg └── coding.svg └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode 3 | -------------------------------------------------------------------------------- /website/static/CNAME: -------------------------------------------------------------------------------- 1 | frontendinterviewhandbook.com -------------------------------------------------------------------------------- /website/static/ads.txt: -------------------------------------------------------------------------------- 1 | google.com, pub-4984084888641317, DIRECT, f08c47fec0942fa0 -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [yangshun] 2 | open_collective: yangshun 3 | custom: https://www.buymeacoffee.com/yangshun 4 | -------------------------------------------------------------------------------- /questions/css-questions.md: -------------------------------------------------------------------------------- 1 | # CSS Questions 2 | 3 | Moved to [new location](https://www.frontendinterviewhandbook.com/css-questions/). 4 | -------------------------------------------------------------------------------- /questions/html-questions.md: -------------------------------------------------------------------------------- 1 | # HTML Questions 2 | 3 | Moved to [new location](https://www.frontendinterviewhandbook.com/html-questions/). 4 | -------------------------------------------------------------------------------- /website/static/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HappyMicky0317/front-end-interview-handbook/HEAD/website/static/img/favicon.png -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | install: 2 | - gem install awesome_bot 3 | 4 | script: 5 | - awesome_bot **/*.md --allow-dupe --allow-redirect --allow 429 --skip-save-results 6 | -------------------------------------------------------------------------------- /.wip/topics/networking.md: -------------------------------------------------------------------------------- 1 | Networking 2 | == 3 | 4 | WIP. 5 | 6 | ## Glossary 7 | 8 | - **JSON** 9 | - **RPC** 10 | - **HTTP** 11 | - **HTTP/2** 12 | -------------------------------------------------------------------------------- /questions/javascript-questions.md: -------------------------------------------------------------------------------- 1 | # JavaScript Questions 2 | 3 | Moved to [new location](https://www.frontendinterviewhandbook.com/javascript-questions/). 4 | -------------------------------------------------------------------------------- /website/src/css/fonts/Inter-roman-latin.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HappyMicky0317/front-end-interview-handbook/HEAD/website/src/css/fonts/Inter-roman-latin.var.woff2 -------------------------------------------------------------------------------- /website/src/css/fonts/Inter-italic-latin.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HappyMicky0317/front-end-interview-handbook/HEAD/website/src/css/fonts/Inter-italic-latin.var.woff2 -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": false, 3 | "jsxBracketSameLine": true, 4 | "printWidth": 80, 5 | "proseWrap": "never", 6 | "singleQuote": true, 7 | "trailingComma": "all" 8 | } 9 | -------------------------------------------------------------------------------- /website/src/theme/DocSidebarItem/styles.module.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 997px) { 2 | .menuLinkText { 3 | cursor: initial; 4 | } 5 | .menuLinkText:hover { 6 | background: none; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | 8 | [*.{js,py}] 9 | charset = utf-8 10 | indent_style = space 11 | indent_size = 2 12 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | We have adopted the same Code of Conduct as Facebook that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated. 4 | -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | 4 | # production 5 | /build 6 | 7 | # generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* -------------------------------------------------------------------------------- /website/static/img/icons8-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /website/static/img/icons8-facebook-light.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /website/src/theme/PaginatorNavLink/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Link from '@docusaurus/Link'; 3 | 4 | function PaginatorNavLink({permalink, title, subLabel}) { 5 | return ( 6 | 7 | {subLabel &&
{subLabel}
} 8 |
{title}
9 | 10 | ); 11 | } 12 | 13 | export default PaginatorNavLink; 14 | -------------------------------------------------------------------------------- /.wip/topics/caching.md: -------------------------------------------------------------------------------- 1 | Caching 2 | == 3 | 4 | WIP. 5 | 6 | ## Glossary 7 | 8 | - **Cookies** 9 | 10 | #### References 11 | 12 | - [A Tale of Four Caches](https://calendar.perfplanet.com/2016/a-tale-of-four-caches/) 13 | - [Web Caching Basics: Terminology, HTTP Headers, and Caching Strategies](https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies) 14 | - [This browser tweak saved 60% of requests to Facebook](https://code.facebook.com/posts/557147474482256/this-browser-tweak-saved-60-of-requests-to-facebook/) 15 | -------------------------------------------------------------------------------- /website/src/theme/TOC/styles.module.css: -------------------------------------------------------------------------------- 1 | .tableOfContents { 2 | max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); 3 | overflow-y: auto; 4 | position: sticky; 5 | top: calc(var(--ifm-navbar-height) + 1rem); 6 | } 7 | 8 | @media (max-width: 996px) { 9 | .tableOfContents { 10 | display: none; 11 | } 12 | 13 | .docItemContainer { 14 | padding: 0 0.3rem; 15 | } 16 | } 17 | 18 | .socialLinksContainer { 19 | background-color: var(--ifm-color-emphasis-100); 20 | border-radius: var(--ifm-global-radius); 21 | } 22 | 23 | .socialLinks { 24 | align-items: center; 25 | display: flex; 26 | font-size: 0.9rem; 27 | justify-content: center; 28 | gap: 1rem; 29 | } 30 | -------------------------------------------------------------------------------- /website/static/img/icons8-github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /website/static/img/icons8-github-light.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /website/vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "silent": true 4 | }, 5 | "trailingSlash": false, 6 | "redirects": [ 7 | { 8 | "source": "/algorithms", 9 | "destination": "/coding/algorithms/" 10 | }, 11 | { 12 | "source": "/algorithms/", 13 | "destination": "/coding/algorithms/" 14 | }, 15 | { 16 | "source": "/utility-function", 17 | "destination": "/coding/utility-function/" 18 | }, 19 | { 20 | "source": "/utility-function/", 21 | "destination": "/coding/utility-function/" 22 | }, 23 | { 24 | "source": "/build-user-interfaces", 25 | "destination": "/coding/build-user-interfaces/" 26 | }, 27 | { 28 | "source": "/build-user-interfaces/", 29 | "destination": "/coding/build-user-interfaces/" 30 | } 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /website/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using Docusaurus 2, a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | ``` 30 | $ GIT_USER= USE_SSH=1 yarn deploy 31 | ``` 32 | 33 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /website/i18n/kr/docusaurus-plugin-content-docs/current/pop-quiz.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 돌발 질문 개요 3 | sidebar_label: 개요 4 | --- 5 | 6 | 돌발 질문은 정답이 짧은 경우가 대부분이고, 면접을 진행 가능한 최소한의 기술력을 가진 채용 담당자에 의해 진행되기 때문에 보통 면접의 처음 몇 단계에서 볼 수 있습니다. 7 | 8 | 돌발퀴즈는 답변자가 해당 분야의 이론을 얼마나 제대로 알고 대답하는지 알기 위한 것입니다. 개념을 확실히 이해하거나 답을 완전히 암기함으로써 실력을 향상시킬 수 있습니다. 여기서 묻는 질문은 상당히 제한적이며 대부분 다음 몇 개의 부문에서 찾을 수 있습니다. 9 | 10 | ## 기본 예제 11 | 12 | - 자바스크립트에서 closure가 무엇인가요? 13 | - 무엇들을 약속하며 그것들이 무엇에 유용한지 설명하세요. 14 | - css 박스 모델에 대해 설명하세요. 15 | 16 | ## 상급 예제 17 | 18 | 많은 경력자들에게, 답이 정해져있지 않은 더 수준높은 내용을 설명할 수 있기를 기대합니다. 19 | 20 | - React는 어떻게 동작하나요? Virtual DOM이란 무엇이며 어떤 문제를 해결하나요? 21 | - 왜 library Y가 아닌 library X를 사용했나요? 22 | 23 | 가장 좋고 올바른 방법은 이러한 질문들에 대한 준비를 하는 것이고, 개념을 제대로 이해하고 그것들을 프로젝트에 적용하는 데 있어 실제 경험을 쌓는 것입니다. 답을 암기하는 것은 권장하지 않지만 시간이 부족할 경우 허용됩니다. 24 | 25 | ## 자주 나오는 돌발 질문들 26 | 27 | 다음 몇 페이지는 HTML/CSS/JavaScript에 대해 테스트한 자주 나오는 질문에 대한 답을 제공합니다. 28 | -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "dev": "docusaurus start", 9 | "build": "docusaurus build", 10 | "swizzle": "docusaurus swizzle", 11 | "deploy": "docusaurus deploy" 12 | }, 13 | "dependencies": { 14 | "@docusaurus/core": "^2.0.0-beta.18", 15 | "@docusaurus/plugin-client-redirects": "^2.0.0-beta.18", 16 | "@docusaurus/preset-classic": "^2.0.0-beta.18", 17 | "classnames": "^2.2.6", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.wip/topics/design.md: -------------------------------------------------------------------------------- 1 | Design Questions 2 | == 3 | 4 | ## Autocomplete Widget 5 | 6 | Talk me through a full stack implementation of an autocomplete widget. A user can type text into it, and get back results from a server. 7 | - How would you design a frontend to support the following features: 8 | - Fetch data from a backend API 9 | - Render results as a tree (items can have parents/children - it's not just a flat list) 10 | - Support for checkbox, radio button, icon, and regular list items - items come in many forms 11 | - What does the component's API look like? 12 | - What does the backend API look like? 13 | - What perf considerations are there for complete-as-you-type behavior? Are there any edge cases (for example, if the user types fast and the network is slow)? 14 | - How would you design the network stack and backend in support of fast performance: how do your client/server communicate? How is your data stored on the backend? How do these approaches scale to lots of data and lots of clients? 15 | -------------------------------------------------------------------------------- /website/sidebars.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: [ 3 | 'introduction', 4 | { 5 | type: 'category', 6 | label: 'Pop quiz', 7 | items: [ 8 | 'pop-quiz', 9 | 'html-questions', 10 | 'css-questions', 11 | 'javascript-questions', 12 | ], 13 | }, 14 | { 15 | type: 'category', 16 | label: 'Coding round', 17 | collapsed: false, 18 | link: { 19 | type: 'generated-index', 20 | title: 'Coding round', 21 | description: 'Various type of front end coding interview!', 22 | slug: '/coding', 23 | }, 24 | items: ['algorithms', 'utility-function', 'build-user-interfaces'], 25 | }, 26 | { 27 | type: 'category', 28 | label: 'System design', 29 | collapsed: false, 30 | items: [ 31 | 'front-end-system-design', 32 | 'front-end-system-design-ui-components', 33 | 'front-end-system-design-applications', 34 | ], 35 | }, 36 | 'behavioral', 37 | 'resume', 38 | ], 39 | }; 40 | -------------------------------------------------------------------------------- /website/src/components/SidebarAd/styles.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-repeat: no-repeat; 3 | background-size: contain; 4 | border-radius: var(--ifm-global-radius); 5 | color: #fff; 6 | display: block; 7 | opacity: 0.95; 8 | padding: 1rem; 9 | transition: opacity var(--ifm-transition-fast) 10 | var(--ifm-transition-timing-default); 11 | } 12 | 13 | .backgroundPurple { 14 | background-image: linear-gradient( 15 | 138deg, 16 | rgb(69, 104, 220), 17 | rgb(176, 106, 179) 18 | ); 19 | } 20 | 21 | .backgroundRed { 22 | background-image: linear-gradient(39deg, rgb(188, 78, 156), rgb(248, 7, 89)); 23 | } 24 | 25 | .backgroundOrange { 26 | background-image: linear-gradient( 27 | 90deg, 28 | rgb(253, 200, 48), 29 | rgb(243, 115, 53) 30 | ); 31 | } 32 | 33 | .container:hover { 34 | color: #fff; 35 | opacity: 1; 36 | text-decoration: none; 37 | } 38 | 39 | .tagline { 40 | font-size: 0.75rem; 41 | margin-bottom: 0; 42 | } 43 | 44 | .title { 45 | display: block; 46 | font-size: 0.8rem; 47 | margin-bottom: 0.1rem; 48 | } 49 | 50 | .logo { 51 | width: 96px; 52 | } 53 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017-Present Yangshun Tay 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /website/static/img/icons8-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /website/static/img/icons8-twitter-light.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /contents/pop-quiz.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pop quiz overview 3 | sidebar_label: Overview 4 | --- 5 | 6 | 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. 7 | 8 | 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. 9 | 10 | ## Basic examples 11 | 12 | - What is a closure in JavaScript? 13 | - Explain what promises are and what they're useful for. 14 | - Explain the CSS box model. 15 | 16 | ## Advanced examples 17 | 18 | For more senior candidates, expect to explain more advanced stuff with no absolute answers. 19 | 20 | - How does React work? What is Virtual DOM and what problems does it solve? 21 | - Why did you use library X over library Y? 22 | 23 | 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. 24 | 25 | ## Common questions 26 | 27 | The next few pages go through common questions tested for HTML/CSS/JavaScript and provides answers to them. 28 | -------------------------------------------------------------------------------- /.wip/topics/html.md: -------------------------------------------------------------------------------- 1 | HTML 2 | == 3 | 4 | HTML (Hypertext Markup Language) is the structure that all websites are built on. Anyone working on websites and webapps should have a basic understanding of HTML at the very least. A helpful analogy for understanding the importance of HTML is the house scenario. When building a new house, the process can be split into a few key areas; structure (HTML), aesthetics (CSS) and furniture (Content). The HTML is your basic page structure, without the structure, you cannot change how it looks using CSS, or what content is on the page. 5 | 6 | ## Glossary 7 | 8 | - **Doctype** 9 | 10 | ## Deprecated Tags 11 | 12 | There are a number of tags from past versions of HTML that have become deprecated over time. This means that while they are no longer considered valid elements, most browsers should still be able to read and render them. 13 | 14 | ## Script Loading 15 | 16 | - `