🌐 Interview Prep
Web & Frontend
HTML, CSS layout, the DOM, HTTP, browsers, React, security and accessibility: front-end and full-stack interview staples.
📘 Learn it from scratch
Visual, hands-on lessons for every pattern in this topic. Do the lesson, then come back and the questions click.
100 questions, most asked first
Ordered so the most useful questions for learning each pattern come first.
All patternsHTTP & APIsStorage & cachingBox modelFlexboxWeb securityReactHTMLAccessibilityResponsive designCSS Grid & positioningBrowser & performanceState managementFormsDOM & events
#1💬What happens when you type a URL and press Enter?HTTP & APIsMediumFree#2💬What makes an API RESTful?HTTP & APIsEasyFree#3💬Cookies vs localStorage vs sessionStorageStorage & cachingEasyFree#4💬The CSS box modelBox modelEasyFree#5💬Flexbox vs CSS GridFlexboxEasyFree#6💬CSS specificity and the cascadeBox modelMediumFree#7💬HTTP methods and status codesHTTP & APIsEasyFree#8💬What is CORS?Web securityMediumFree#9💬Cross-site scripting (XSS)Web securityMediumFree#10💬Cross-site request forgery (CSRF)Web securityMediumFree🔓Unlock 90 more Web & Frontend questions · all 1,200 questions for $39/year (about 11¢ a day)See full access#11💬How does HTTPS work?Web securityMedium🔒#12💬Virtual DOM and reconciliationReactMedium🔒#13💬State vs propsReactEasy🔒#14💬How does useEffect work?ReactMedium🔒#15💬Why do lists need keys?ReactEasy🔒#16💬Controlled vs uncontrolled inputsReactMedium🔒#17💬Semantic HTMLHTMLEasy🔒#18💬Making a website accessibleAccessibilityMedium🔒#19💬Responsive designResponsive designEasy🔒#20💬CSS position valuesCSS Grid & positioningEasy🔒#21💬display none vs visibility hidden vs opacity 0Box modelEasy🔒#22💬The critical rendering pathBrowser & performanceMedium🔒#23💬Reflow vs repaint (layout thrashing)Browser & performanceMedium🔒#24💬Core Web VitalsBrowser & performanceMedium🔒#25💬Lazy loading images and codeBrowser & performanceEasy🔒#26💬HTTP caching (Cache-Control, ETag)Storage & cachingMedium🔒#27💬Service workers and PWAsStorage & cachingMedium🔒#28💬WebSockets vs polling vs Server-Sent EventsHTTP & APIsMedium🔒#29💬Session cookies vs JWTsWeb securityMedium🔒#30💬How does "Sign in with Google" work?Web securityMedium🔒#31💬SSR vs CSR vs SSG (and ISR)ReactMedium🔒#32💬SEO for web developersHTMLEasy🔒#33💬The rules of hooksReactMedium🔒#34💬useMemo and useCallbackReactMedium🔒#35💬Context vs Redux vs other state librariesState managementMedium🔒#36💬Making a slow React app fastReactMedium🔒#37💬Form validation on the client and the serverFormsEasy🔒#38💬CSS units (px, em, rem, %, vw/vh)Responsive designEasy🔒#39💬Why isn't my z-index working?CSS Grid & positioningMedium🔒#40💬Pseudo-classes vs pseudo-elementsBox modelEasy🔒#41💬CSS transitions vs animations vs JS animationBrowser & performanceEasy🔒#42💬Organizing CSS at scale (BEM, CSS modules, Tailwind)Box modelMedium🔒#43💬DOM APIs every frontend dev should knowDOM & eventsEasy🔒#44💬Event bubbling and delegationDOM & eventsMedium🔒#45⌨️fetch and error handlingHTTP & APIsMedium🔒#46💬Loading, empty and error statesState managementEasy🔒#47💬REST vs GraphQLHTTP & APIsMedium🔒#48💬Designing API paginationHTTP & APIsMedium🔒#49💬Idempotent APIs and retriesHTTP & APIsMedium🔒#50💬401 vs 403 (and 404 for privacy)HTTP & APIsEasy🔒#51💬HTTP/1.1 vs HTTP/2 vs HTTP/3HTTP & APIsMedium🔒#52💬How DNS worksHTTP & APIsMedium🔒#53💬What is a CDN?Storage & cachingEasy🔒#54💬Content Security Policy (CSP)Web securityMedium🔒#55💬ClickjackingWeb securityEasy🔒#56💬The same-origin policyWeb securityMedium🔒#57💬Storing passwords safelyWeb securityMedium🔒#58⌨️Rate limiting an APIWeb securityMedium🔒#59💬When and how to use ARIAAccessibilityMedium🔒#60💬Responsive and optimized imagesBrowser & performanceMedium🔒#61💬Loading web fonts without hurting performanceBrowser & performanceMedium🔒#62💬What is hydration?ReactMedium🔒#63💬React Server ComponentsReactHard🔒#64💬Lifting state up and prop drillingState managementEasy🔒#65💬Error boundariesReactMedium🔒#66💬Testing frontend codeReactMedium🔒#67💬Debugging with browser DevToolsBrowser & performanceEasy🔒#68💬requestAnimationFrameBrowser & performanceMedium🔒#69💬IntersectionObserverDOM & eventsMedium🔒#70💬Internationalization (i18n)HTMLMedium🔒#71💬Progressive enhancementHTMLMedium🔒#72💬Cross-browser compatibilityResponsive designEasy🔒#73💬The viewport meta tagResponsive designEasy🔒#74💬Build a layout with CSS GridCSS Grid & positioningMedium🔒#75💬How do you center a div?FlexboxEasy🔒#76💬flex-grow, flex-shrink and flex-basisFlexboxMedium🔒#77💬CSS custom properties and dark modeResponsive designMedium🔒#78💬Form submission and preventDefaultFormsEasy🔒#79💬Implementing infinite scrollDOM & eventsMedium🔒#80💬Handling file uploadsFormsMedium🔒#81💬Web Components and the Shadow DOMDOM & eventsMedium🔒#82💬Running untrusted code safely in an iframeWeb securityHard🔒#83💬Cookie security attributesWeb securityMedium🔒#84💬HTTP security headersWeb securityMedium🔒#85💬How client-side routing worksBrowser & performanceMedium🔒#86💬Frontend system design: an autocomplete search boxBrowser & performanceHard🔒#87💬Micro-frontendsState managementHard🔒#88💬Monitoring a frontend in productionBrowser & performanceMedium🔒#89⌨️Optimistic UI updatesState managementMedium🔒#90💬IndexedDB and offline dataStorage & cachingMedium🔒#91💬Mobile-first designResponsive designEasy🔒#92💬Accessible formsAccessibilityEasy🔒#93💬Color contrast and accessible colorAccessibilityEasy🔒#94💬Keyboard navigation and focus managementAccessibilityMedium🔒#95💬Building an accessible modal dialogAccessibilityMedium🔒#96💬Performance budgetsBrowser & performanceMedium🔒#97💬Third-party scripts (analytics, ads, widgets)Web securityMedium🔒#98💬Walk me through a frontend you builtState managementMedium🔒#99💬script, async, defer and type=moduleBrowser & performanceMedium🔒#100⌨️A search box that doesn't spam the APIDOM & eventsMedium🔒