diff --git a/README.md b/README.md index c2fa7a2e6..c7146ee9b 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/contents/algorithms.md b/contents/algorithms.md index a9f870b03..ad70f654b 100644 --- a/contents/algorithms.md +++ b/contents/algorithms.md @@ -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 diff --git a/contents/behavioral.md b/contents/behavioral.md index 32ea85575..4b11d7178 100644 --- a/contents/behavioral.md +++ b/contents/behavioral.md @@ -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. diff --git a/contents/build-user-interfaces.md b/contents/build-front-end-user-interfaces.md similarity index 68% rename from contents/build-user-interfaces.md rename to contents/build-front-end-user-interfaces.md index 8b737c364..c71d772f2 100644 --- a/contents/build-user-interfaces.md +++ b/contents/build-front-end-user-interfaces.md @@ -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. diff --git a/contents/companies/apple-front-end-interview-questions.md b/contents/companies/apple-front-end-interview-questions.md index 0a8a47dc5..446a0299a 100644 --- a/contents/companies/apple-front-end-interview-questions.md +++ b/contents/companies/apple-front-end-interview-questions.md @@ -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 diff --git a/contents/companies/salesforce-front-end-interview-questions.md b/contents/companies/salesforce-front-end-interview-questions.md index d757ab26a..9fc934c32 100644 --- a/contents/companies/salesforce-front-end-interview-questions.md +++ b/contents/companies/salesforce-front-end-interview-questions.md @@ -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 diff --git a/contents/company-interview-questions.md b/contents/company-interview-questions.md deleted file mode 100644 index 98e31d937..000000000 --- a/contents/company-interview-questions.md +++ /dev/null @@ -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]() -- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source]() -- 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 ``). 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) diff --git a/contents/css-questions.md b/contents/css-questions.md index 763599661..2ed978465 100644 --- a/contents/css-questions.md +++ b/contents/css-questions.md @@ -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? diff --git a/contents/front-end-system-design-applications.md b/contents/front-end-system-design-applications.md index cf0cd0fa5..3c2a4ed6a 100644 --- a/contents/front-end-system-design-applications.md +++ b/contents/front-end-system-design-applications.md @@ -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 --- diff --git a/contents/front-end-system-design-ui-components.md b/contents/front-end-system-design-ui-components.md index f25cb8e07..1ef482cd4 100644 --- a/contents/front-end-system-design-ui-components.md +++ b/contents/front-end-system-design-ui-components.md @@ -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 --- diff --git a/contents/front-end-system-design.md b/contents/front-end-system-design.md index ec7d62ffd..6409c2c42 100644 --- a/contents/front-end-system-design.md +++ b/contents/front-end-system-design.md @@ -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 diff --git a/contents/html-questions.md b/contents/html-questions.md index 090aa5200..2cff22304 100644 --- a/contents/html-questions.md +++ b/contents/html-questions.md @@ -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 `