https://www.frontendinterviewhandbook.com/zh-CN/assets/js/c4f5d8e4.a808bbbd.js

1"use strict";(globalThis.webpackChunkwebsite=globalThis.webpackChunkwebsite||[]).push([[2634],{3689(e,t,n){n.r(t),n.d(t,{default:()=>m});n(8318);var s=n(6601),r=n(8899),a=n(8441),o=n(9450),i=n(7581);const l={heroBanner:"heroBanner_UJJx",heroBannerLogo:"heroBannerLogo_NsEC",buttons:"buttons_pzbO",flexContainer:"flexContainer_aanS",promoIcon:"promoIcon_zfwe",whiteText:"whiteText_cNhE",sectionTitle:"sectionTitle_czhA",sectionTagline:"sectionTagline_ihYW",sectionAlt:"sectionAlt_XiGz",sectionSponsor:"sectionSponsor_ILVn",sectionSponsorTitle:"sectionSponsorTitle__Jpu",sectionSponsorAlt:"sectionSponsorAlt_Mw8i",quote:"quote_aYQC",featuresRow:"featuresRow_NzQb",featuresRowItem:"featuresRowItem__8mN",tweet:"tweet_irWa",tweetsSection:"tweetsSection_Fqsy",tweetMeta:"tweetMeta_SqCK"};var c=n(4227),d=n(9214);const h=[{name:"Erin Teo",title:"Senior Front End Engineer, Facebook",thumbnail:"https://github.com/airse.png",quote:(0,d.jsxs)(d.Fragment,{children:["Preparing for my first rounds of tech interviews was really daunting - I wasn't sure what to expect and where to start. This handbook together with the"," ",(0,d.jsx)("a",{href:"https://www.techinterviewhandbook.org",target:"_blank",rel:"noreferrer noopener",children:"Tech Interview Handbook"})," ","was a great starting point for me. It clearly describes each part of the process and has tons of awesome tips and resources. With this handbook and lots of practice, I managed to get offers from Facebook, Dropbox and Amazon!"]})},{name:"Zhenghao He",title:"Engineering Manager at Robinhood, ex-Amazon",thumbnail:"/img/authors/zhenghao.jpg",quote:(0,d.jsxs)(d.Fragment,{children:["There aren't a lot of high quality front end interview prep materials online. That's why the Front End Interview Handbook is my go-to prep resource. With the help of the interview handbook, I was able to easily identify my weak points and work on them. As a result, I managed to get offers from Meta, Amazon, Twitch, Microsoft, Coinbase, etc.",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"I've learnt a few things and blogged about them on"," ",(0,d.jsx)("a",{href:"https://www.zhenghao.io/",rel:"noopener",children:"https://www.zhenghao.io/"}),", check them out if you're interested!"]})},{name:"Kai Li",title:"Software Engineer, Stripe, ex-Quora, ex-Zendesk",thumbnail:"https://github.com/li-kai.png",quote:(0,d.jsx)(d.Fragment,{children:"Before discovering the handbook, I didn't know what to expect for my front end interviews. Thanks to it, I had a better understanding and even learned new things about frontend development. The handbook is an immense resource, one that I still use to refresh and reinforce my knowledge to tackle interviews confidently!"})}];function m(){const{siteConfig:e={}}=(0,a.A)();return(0,d.jsx)(r.A,{title:"Front end interview preparation for busy engineers",description:e.tagline,children:(0,d.jsxs)("div",{children:[(0,d.jsx)(g,{}),(0,d.jsx)(u,{}),(0,d.jsx)(j,{}),(0,d.jsx)(w,{}),(0,d.jsx)(x,{}),(0,d.jsx)(p,{}),(0,d.jsx)(f,{})]})})}function g(){const{siteConfig:e={}}=(0,a.A)();return(0,d.jsx)("header",{className:(0,s.A)("hero",l.heroBanner),children:(0,d.jsx)("div",{className:"container",children:(0,d.jsx)("div",{className:"row",children:(0,d.jsxs)("div",{className:"col col--8 col--offset-2",children:[(0,d.jsx)("img",{alt:e.title,className:(0,s.A)(l.heroBannerLogo,"margin-vert--md"),src:(0,o.A)("img/logo.svg")}),(0,d.jsx)("h1",{className:"hero__title",children:"Front End Interview Handbook"}),(0,d.jsx)("p",{className:"hero__subtitle",children:e.tagline}),(0,d.jsx)("div",{className:l.buttons,children:(0,d.jsx)(i.A,{className:(0,s.A)("button button--primary button--lg",l.getStarted),to:"/introduction",children:"Start reading\xa0\xa0\u2192"})}),(0,d.jsx)("p",{className:"margin-top--md",children:(0,d.jsx)("em",{children:"It's completely free to read!"})}),(0,d.jsx)("div",{className:"margin-top--lg",children:(0,d.jsx)("iframe",{src:"https://ghbtns.com/github-btn.html?user=yangshun&repo=front-end-interview-handbook&type=star&count=true&size=large",frameBorder:0,scrolling:0,width:165,height:30,title:"GitHub Stars"})})]})})})})}function u(){return(0,d.jsx)("div",{className:"padding-vert--lg",style:{backgroundColor:"rgb(214, 43, 121)"},children:(0,d.jsxs)("div",{className:"container padding-vert--lg",children:[(0,d.jsx)("div",{className:"row",children:(0,d.jsx)("div",{className:"col col--8 col--offset-2",children:(0,d.jsx)("div",{className:"margin-bottom--lg text--center",children:(0,d.jsxs)("div",{children:[(0,d.jsx)("h2",{className:l.sectionSponsorTitle,style:{fontSize:"var(--ifm-h1-font-size)"},children:(0,d.jsxs)("strong",{children:["Looking for front end interview practice? ",(0,d.jsx)("br",{}),"GreatFrontEnd has 500+ practice questions and reference solutions from ex-interviewers at FAANG"]})}),(0,d.jsx)("div",{className:"margin-vert--md",children:(0,d.jsx)("a",{className:"button button--secondary button--lg",href:"https://www.greatfrontend.com/interviews/get-started?gnrs=frontendinterviewhandbook",rel:"noopener",target:"_blank",onClick:()=>{window.gtag("event","greatfrontend.homepage.system_design.click")},children:"Get started \xa0\xa0\u2192"})}),(0,d.jsx)("div",{className:"margin-vert--md",children:(0,d.jsxs)("h5",{style:{color:"rgb(255,255,255)",fontWeight:"normal"},children:["Psst... I built this!",(0,d.jsx)("br",{})]})})]})})})}),(0,d.jsx)("div",{className:"row",children:(0,d.jsx)("div",{className:(0,s.A)("col col--8 col--offset-2"),children:(0,d.jsxs)("div",{className:"row",children:[(0,d.jsxs)("div",{className:(0,s.A)("col col--4",l.flexContainer),children:[(0,d.jsx)(c.mDy,{className:l.promoIcon}),(0,d.jsx)("p",{className:l.whiteText,children:"Well-explained solutions"})]}),(0,d.jsxs)("div",{className:(0,s.A)("col col--4",l.flexContainer),children:[(0,d.jsx)(c.L4U,{className:l.promoIcon}),(0,d.jsx)("p",{className:l.whiteText,children:"Step-by-step study plans"})]}),(0,d.jsxs)("div",{className:(0,s.A)("col col--4",l.flexContainer),children:[(0,d.jsx)(c.EcA,{className:l.promoIcon}),(0,d.jsx)("p",{className:l.whiteText,children:"Structured prep process"})]})]})})})]})})}function x(){return(0,d.jsx)("div",{className:(0,s.A)("padding-vert--lg"),style:{backgroundColor:"rgb(244, 63, 94)"},children:(0,d.jsx)("div",{className:"container",children:(0,d.jsx)("div",{className:"row",children:(0,d.jsx)("div",{className:"col col--8 col--offset-2",children:(0,d.jsx)("div",{className:"margin-vert--lg text--center",children:(0,d.jsxs)("div",{children:[(0,d.jsx)("h2",{className:l.sectionSponsorTitle,children:(0,d.jsx)("strong",{children:"Craft the perfect resume for FAANG with FAANG Tech Leads' high quality Software Engineer resume templates and samples."})}),(0,d.jsx)("div",{className:"margin-vert--lg",children:(0,d.jsx)("a",{className:"button button--secondary button--lg",href:"https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2",rel:"noopener",target:"_blank",onClick:()=>{window.gtag("event","faangtechleads.homepage.click")},children:"Improve your resume now \xa0\xa0\u2192"})})]})})})})})})}function j(){return(0,d.jsx)("div",{className:(0,s.A)("margin-vert--lg","padding-vert--lg"),children:(0,d.jsx)("div",{className:"container",children:(0,d.jsx)("div",{className:"row",children:(0,d.jsxs)("div",{className:"col col--10 col--offset-1",children:[(0,d.jsx)("h2",{className:(0,s.A)("text--center","margin-bottom--xl",l.sectionTitle),children:"Why Front End Interview Handbook?"}),(0,d.jsxs)("div",{className:(0,s.A)("row",l.featuresRow),children:[(0,d.jsxs)("div",{className:(0,s.A)("col","col--4",l.featuresRowItem),children:[(0,d.jsx)("h3",{children:"\ud83d\udd0d Front end interviews demystified"}),(0,d.jsx)("p",{children:"Front end interview preparation resources are scarce but no fret, we tell you what to expect and everything else you need to know!"}),(0,d.jsx)("a",{href:(0,o.A)("introduction"),children:(0,d.jsx)("strong",{children:"Learn more"})})]}),(0,d.jsxs)("div",{className:(0,s.A)("col","col--4",l.featuresRowItem),children:[(0,d.jsx)("h3",{children:"\ud83d\udc69\u200d\ud83c\udfa8 System design"}),(0,d.jsx)("p",{children:"What even is Front end system design?! Learn more about them and how to ace these interviews."}),(0,d.jsx)("a",{href:(0,o.A)("front-end-system-design"),children:(0,d.jsx)("strong",{children:"Learn more"})})]}),(0,d.jsxs)("div",{className:(0,s.A)("col","col--4",l.featuresRowItem),children:[(0,d.jsx)("h3",{children:"\ud83d\udc69\u200d\ud83d\udcbb Coding questions"}),(0,d.jsx)("p",{children:"Coding questions are an entirely different ball game for Front End interviews. We tell you how to prepare for them (hint: n

1ot just LeetCode)."}),(0,d.jsx)("a",{href:(0,o.A)("coding/build-front-end-user-interfaces"),children:(0,d.jsx)("strong",{children:"Learn more"})})]}),(0,d.jsxs)("div",{className:(0,s.A)("col","col--4",l.featuresRowItem),children:[(0,d.jsx)("h3",{children:"\ud83d\udcaf From zero to hero"}),(0,d.jsx)("p",{children:"Go from zero to front end interview hero with this handbook. No prior interview experience needed."})]}),(0,d.jsxs)("div",{className:(0,s.A)("col","col--4",l.featuresRowItem),children:[(0,d.jsx)("h3",{children:"\ud83c\udf7c Back to basics"}),(0,d.jsx)("p",{children:"Learn to walk before you learn to fly. While React, Vue and Angular are cool, make sure you also know your fundamentals."})]}),(0,d.jsxs)("div",{className:(0,s.A)("col","col--4",l.featuresRowItem),children:[(0,d.jsx)("h3",{children:"\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66 Community effort"}),(0,d.jsx)("p",{children:"The best thing about Open Source is that the community vets the contents, so you can be sure the answers here have been proofread by many."})]})]})]})})})})}function v(e){let{url:t,handle:n,name:r,content:a,avatar:o,date:i}=e;return(0,d.jsx)("div",{className:(0,s.A)("card",l.tweet),children:(0,d.jsx)("div",{className:"card__header",children:(0,d.jsxs)("div",{className:"avatar",children:[(0,d.jsx)("img",{alt:r,className:"avatar__photo",src:o}),(0,d.jsxs)("div",{className:"avatar__intro",children:[(0,d.jsxs)("div",{className:l.tweet,children:[(0,d.jsx)("strong",{children:r})," ",(0,d.jsxs)("span",{className:l.tweetMeta,children:["@",n," \xb7"," ",(0,d.jsx)("a",{className:l.tweetMeta,href:t,rel:"noopener",children:i})]})]}),(0,d.jsx)("div",{children:a})]})]})})})}function w(){return(0,d.jsx)("div",{className:(0,s.A)("padding-vert--xl",l.sectionAlt),children:(0,d.jsxs)("div",{className:"container",children:[(0,d.jsx)("h2",{className:(0,s.A)("margin-bottom--lg","text--center",l.sectionTitle),children:"Over 500,000 people have benefitted from this handbook"}),(0,d.jsxs)("div",{className:(0,s.A)("row",l.tweetsSection),children:[(0,d.jsxs)("div",{className:"col col--4",children:[(0,d.jsx)(v,{url:"https://twitter.com/css/status/963442650476089344",handle:"css",name:"CSS-Tricks",date:"Feb 14, 2018",avatar:"/img/tweets/css.jpg",content:(0,d.jsxs)(d.Fragment,{children:["Front End Interview [Question] Handbook",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"A good amount of HTML, CSS, and JavaScript questions (and answers)."]})}),(0,d.jsx)(v,{url:"https://twitter.com/Insharamin/status/1479459483592110085",handle:"Insharamin",name:"Insha",date:"Jan 7, 2022",avatar:"/img/tweets/Insharamin.jpg",content:(0,d.jsx)(d.Fragment,{children:'Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself. Go from zero to front end interview hero with this handbook.'})}),(0,d.jsx)(v,{url:"https://twitter.com/umaar/status/963161780787798016",handle:"umaar",name:"Umar Hansa",date:"Feb 13, 2018",avatar:"/img/tweets/umaar.jpg",content:(0,d.jsx)(d.Fragment,{children:"Front End Interview Handbook (Answers) \ud83d\udc40 - Useful for testing yourself and learning more about quirks, best practices and standards on the web \u2705"})})]}),(0,d.jsxs)("div",{className:"col col--4",children:[(0,d.jsx)(v,{url:"https://twitter.com/FrontendDaily/status/966791481058119680",handle:"FrontendDaily",name:"Frontend Daily",date:"Apr 10, 2018",avatar:"/img/tweets/FrontendDaily.jpg",content:(0,d.jsx)(d.Fragment,{children:"A Front End Interview Handbook (Headed to a job interview any time soon? Here are some questions and answers worth being prepared for.)"})}),(0,d.jsx)(v,{url:"https://twitter.com/silvenon/status/1284988755942748161",handle:"silvenon",name:"Matija Marohni\u0107",date:"Jul 20, 2020",avatar:"/img/tweets/silvenon.jpg",content:(0,d.jsx)(d.Fragment,{children:"Front End Interview Handbook is AMAZING, huge props to @yangshunz and all the contributors. \u2b50\ufe0f"})}),(0,d.jsx)(v,{url:"https://twitter.com/nimz_co/status/1052966426645016588",handle:"nimz_co",name:"Nima Izadi",date:"Oct 19, 2018",avatar:"/img/tweets/nimz_co.jpg",content:(0,d.jsxs)(d.Fragment,{children:["Awesome guide for beginners to front-end development #JavaScript #CSS #HTML",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"I guess, big shout out to @yangshunz and all the contributors of the repo! \ud83d\udcaa"]})})]}),(0,d.jsxs)("div",{className:"col col--4",children:[(0,d.jsx)(v,{url:"https://twitter.com/CodeWithKenny/status/1326505319137161218",handle:"CodeWithKenny",name:"Code with Kenny",date:"Nov 11, 2020",avatar:"/img/tweets/CodeWithKenny.jpg",content:(0,d.jsx)(d.Fragment,{children:"This has been a great refresher resource and in an easy to read format. Enjoy!"})}),(0,d.jsx)(v,{url:"https://twitter.com/ddskier/status/1287085703172677632",handle:"ddskier",name:"DeeDee Walsh",date:"Jul 26, 2020",avatar:"/img/tweets/ddskier.jpg",content:(0,d.jsx)(d.Fragment,{children:"This is useful! Front End Interview Handbook by @yangshunz #interviews #interviewing #career"})}),(0,d.jsx)(v,{url:"https://twitter.com/realJacobJed/status/969604583273172992",handle:"realJacobJed",name:"Jacob Jed",date:"Mar 3, 2018",avatar:"/img/tweets/realJacobJed.jpg",content:(0,d.jsx)(d.Fragment,{children:"Awesome Front End Interview Handbook. I learned a lot from this. Test yourself! I wouldn't pass this interview before reading the answers for the first time. Would you?"})})]})]})]})})}function p(){return(0,d.jsx)("div",{className:(0,s.A)("padding-vert--lg",l.sectionAlt),children:(0,d.jsx)("div",{className:"container",children:(0,d.jsx)("div",{className:"row",children:(0,d.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,d.jsx)("h2",{className:(0,s.A)("margin-vert--lg","text--center",l.sectionTitle),children:"Success stories"}),h.map(e=>(0,d.jsxs)("div",{className:"card margin-vert--lg",children:[(0,d.jsx)("div",{className:"card__body",children:(0,d.jsxs)("p",{className:l.quote,children:['"',e.quote,'"']})}),(0,d.jsx)("div",{className:"card__header",children:(0,d.jsxs)("div",{className:"avatar",children:[(0,d.jsx)("img",{alt:e.name,className:"avatar__photo",src:e.thumbnail}),(0,d.jsxs)("div",{className:"avatar__intro",children:[(0,d.jsx)("div",{className:"avatar__name",children:e.name}),(0,d.jsx)("small",{className:"avatar__subtitle",children:e.title})]})]})})]},e.name)),(0,d.jsxs)("p",{className:"margin-vert--lg text--center",children:["Would you like to contribute a success story?"," ",(0,d.jsx)("a",{href:"https://github.com/yangshun/front-end-interview-handbook/edit/main/website/src/data/successStories.js",rel:"nofollow noopener",target:"_blank",children:"Open a Pull Request here"}),"!"]})]})})})})}function f(){return(0,d.jsx)("div",{className:(0,s.A)("padding-vert--lg","text--center"),children:(0,d.jsx)("div",{className:"container",children:(0,d.jsx)("div",{className:"row",children:(0,d.jsxs)("div",{className:"col col--8 col--offset-2",children:[(0,d.jsx)("h2",{className:(0,s.A)("margin-vert--lg",l.sectionTitle),children:"Enjoying Front End Interview Handbook so far?"}),(0,d.jsx)("p",{className:(0,s.A)(l.sectionTagline),children:"Support this project by becoming a sponsor! Your logo/profile picture will show up here with a link to your website."}),(0,d.jsxs)("div",{children:[(0,d.jsx)("a",{href:"https://opencollective.com/tech-interview-handbook/sponsor/0/website",rel:"noopener",target:"_blank",children:(0,d.jsx)("img",{alt:"Sponsor",src:"https://opencollective.com/tech-interview-handbook/sponsor/0/avatar.svg"})}),(0,d.jsx)("a",{href:"https://opencollective.com/tech-interview-handbook/sponsor/1/website",rel:"noopener",target:"_blank",children:(0,d.jsx)("img",{alt:"Sponsor",src:"https://opencollective.com/tech-interview-handbook/sponsor/1/avatar.svg"})})]}),(0,d.jsx)("div",{className:"margin-vert--lg",children:(0,d.jsx)("a",{className:"button button--primary button--lg",href:"https://opencollective.com/tech-interview-handbook",rel:"noopener",target:"_blank",children:"Become a sponsor!"})})]})})})})}}}]);