{"id":137,"date":"2026-03-10T09:57:08","date_gmt":"2026-03-10T04:27:08","guid":{"rendered":"https:\/\/craqly.com\/?p=133"},"modified":"2026-07-22T12:19:47","modified_gmt":"2026-07-22T12:19:47","slug":"frontend-interview-questions-react-js-css","status":"publish","type":"post","link":"https:\/\/craqly.com\/blog\/frontend-interview-questions-react-js-css\/","title":{"rendered":"Front-End Interview Questions: React, JavaScript, and CSS Deep Dive"},"content":{"rendered":"<p>Here&#8217;s a thing I&#8217;ve noticed: the hardest part of a frontend interview isn&#8217;t knowing the answer. It&#8217;s explaining the answer while someone is watching you think. Most frontend engineers know what a closure is. Far fewer can explain it clearly under pressure while also writing a working example on a whiteboard or shared editor.<\/p>\n<p>This post is about the subset of frontend interview questions that consistently show up in React, JavaScript, and CSS interviews, and more importantly, what a genuinely good answer sounds like versus a technically-correct-but-hollow one.<\/p>\n<h2>JavaScript questions that look simple but aren&#8217;t<\/h2>\n<p>A few questions get asked constantly because they have real depth if you push on them.<\/p>\n<p><strong>1. explain closures<\/strong><\/p>\n<p>The definition everyone knows: a closure is a function that has access to variables in its outer (enclosing) scope, even after the outer function has returned.<\/p>\n<p>What makes the answer good: a concrete example. Here&#8217;s one interviewers like:<\/p>\n<pre><code>function makeCounter() {\n  let count = 0;\n  return function() {\n    count++;\n    return count;\n  };\n}\nconst counter = makeCounter();\ncounter(); \/\/ 1\ncounter(); \/\/ 2<\/code><\/pre>\n<p>The inner function &#8220;closes over&#8221; <code>count<\/code>. The outer function has returned, but <code>count<\/code> is still alive in memory because the inner function holds a reference to it. Interviewers often follow up with: &#8220;What would happen if you called <code>makeCounter()<\/code> twice?&#8221; (Two separate closures, two separate <code>count<\/code> variables.)<\/p>\n<p><strong>2. the event loop, explained clearly<\/strong><\/p>\n<p>The interviewer gives you this code and asks for the output order:<\/p>\n<pre><code>console.log('A');\nsetTimeout(() => console.log('B'), 0);\nPromise.resolve().then(() => console.log('C'));\nconsole.log('D');<\/code><\/pre>\n<p>Output: A, D, C, B.<\/p>\n<p>Why: &#8216;A&#8217; and &#8216;D&#8217; run synchronously. Promises go into the microtask queue. setTimeout goes into the macrotask (callback) queue. Microtasks run before macrotasks, so &#8216;C&#8217; runs before &#8216;B&#8217; even though both were scheduled after the synchronous code.<\/p>\n<p>This trips people up the first time they see it. Once you understand the microtask\/macrotask split, it makes sense. I find it helps to think of microtasks as &#8220;urgent callbacks&#8221; that cut the line.<\/p>\n<p><strong>3. what does <code>this<\/code> refer to?<\/strong><\/p>\n<p>Arrow functions vs. regular functions is the crux. In a regular function, <code>this<\/code> is determined at call time by how the function was invoked. In an arrow function, <code>this<\/code> is determined at define time by the surrounding scope. This matters a lot in React event handlers and class components.<\/p>\n<h2>CSS questions: specificity and layout<\/h2>\n<p>CSS interviews are often shorter but more practical. Interviewers care that you don&#8217;t break things accidentally and that you can reason about layouts without trial and error.<\/p>\n<p><strong>specificity<\/strong><\/p>\n<p>Specificity is calculated as a three-part value: (inline styles, IDs, classes\/attributes\/pseudo-classes, elements\/pseudo-elements). A single ID (0,1,0,0) wins over any number of classes. An inline style (1,0,0,0) beats everything except <code>!important<\/code>.<\/p>\n<p>The practical interviewer question: &#8220;You have a button styled with a class. Another developer added an ID to override the color. Now you need to override that ID without touching the HTML. What do you do?&#8221; The answer: add an attribute selector or two classes to bump your specificity past one ID, or use a more specific selector chain. The lesson: avoid ID selectors in component CSS so you don&#8217;t paint yourself into this corner.<\/p>\n<p><strong>flexbox vs. grid: a real decision<\/strong><\/p>\n<p>Flexbox: one axis at a time. Use it for navigation bars, button groups, card internals, anything that&#8217;s fundamentally a row or a column.<\/p>\n<p>Grid: two axes simultaneously. Use it for page-level layouts, media grids, anything where rows and columns need to align against each other.<\/p>\n<p>The question interviewers ask that&#8217;s harder: &#8220;Can you build a grid with flexbox?&#8221; Yes, but you have to calculate widths manually and handle gap with negative margins (old approach) or <code>gap<\/code> (modern, now well-supported). The point is grid was invented because flexbox for two-dimensional layouts was getting complicated.<\/p>\n<p><strong>responsive design techniques<\/strong><\/p>\n<p>Media queries are the baseline. The real conversation is about: mobile-first vs. desktop-first breakpoints, using <code>clamp()<\/code> for fluid typography, and when to use container queries instead of viewport queries. Container queries are well-supported as of late 2023 and come up more often in 2024 interviews.<\/p>\n<h2>React questions: hooks are the main topic<\/h2>\n<p>If you have three hours to prepare for a React interview, spend two of them on hooks. The <a href=\"https:\/\/survey.stackoverflow.co\/2024\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stack Overflow Developer Survey 2024<\/a> shows React still leads among web frameworks by usage share, so hooks knowledge is essentially table stakes.<\/p>\n<p><strong>useState and the re-render model<\/strong><\/p>\n<p>Every <code>setState<\/code> call schedules a re-render. The new state value doesn&#8217;t appear immediately in the current render. This catches people:<\/p>\n<pre><code>const [count, setCount] = useState(0);\nsetCount(count + 1);\nsetCount(count + 1);\n\/\/ count is still 0 here; both setCount calls scheduled a render with count=1<\/code><\/pre>\n<p>To fix: use the functional updater form: <code>setCount(prev => prev + 1)<\/code>. Each call gets the latest queued state, not the snapshot from the current render.<\/p>\n<p><strong>useEffect dependency arrays<\/strong><\/p>\n<p>The dependency array controls when the effect re-runs. Empty array: run once after mount. No array: run after every render. Array with values: run when those values change. The stale closure problem: an effect that closes over a value and doesn&#8217;t include it in the dependency array will read a stale copy of that value. ESLint&#8217;s <code>exhaustive-deps<\/code> rule catches this, which is why it&#8217;s in almost every React project&#8217;s config.<\/p>\n<p><strong>custom hooks<\/strong><\/p>\n<p>A custom hook is just a function starting with &#8220;use&#8221; that calls other hooks. They&#8217;re the right abstraction for logic you&#8217;d otherwise duplicate across components. A <code>useDebounce<\/code> hook, a <code>useFetch<\/code> hook, a <code>useLocalStorage<\/code> hook: these are all common interview whiteboard tasks.<\/p>\n<p>The question interviewers ask: &#8220;Write a <code>useDebounce<\/code> hook.&#8221; Here&#8217;s a straightforward implementation:<\/p>\n<pre><code>function useDebounce(value, delay) {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n  return debouncedValue;\n}<\/code><\/pre>\n<p>Interviewers often ask: &#8220;What happens if the component unmounts before the delay fires?&#8221; The cleanup function (the return inside useEffect) cancels the timer. That&#8217;s why the cleanup is there.<\/p>\n<h2>Frontend system design: what it looks like in practice<\/h2>\n<p>Larger companies add a system design round to frontend interviews. This isn&#8217;t the same as backend system design. It&#8217;s about component architecture, state shape, network strategy, and accessibility.<\/p>\n<p>Common prompts: &#8220;Design an autocomplete input,&#8221; &#8220;Design an infinite-scroll feed,&#8221; &#8220;Design a date picker component.&#8221;<\/p>\n<p>The evaluation criteria are roughly: (1) does the candidate break the problem into components before writing code, (2) do they think about the data flow before the UI, (3) do they mention edge cases like empty states, loading states, error states, and keyboard accessibility without being prompted.<\/p>\n<p>I think most candidates underestimate how much interviewers care about accessibility in system design. <a href=\"https:\/\/www.bls.gov\/ooh\/computer-and-information-technology\/web-developers.htm\" target=\"_blank\" rel=\"noopener noreferrer\">The BLS notes that web developers increasingly work with accessibility requirements<\/a> as part of their standard role. Mentioning ARIA roles and keyboard navigation in your design is a differentiator.<\/p>\n<h2>Preparing with actual verbal practice<\/h2>\n<p>Reading about closures is not the same as explaining them to someone in three sentences. The best preparation for a technical interview is speaking your answers out loud, getting interrupted with follow-ups, and discovering where your explanations fall apart.<\/p>\n<p>Craqly&#8217;s AI interview feature lets you practice exactly this: answer a frontend question out loud, hear a follow-up, and get feedback on whether your explanation was technically complete or fuzzy. It&#8217;s a faster feedback loop than studying alone with a document.<\/p>\n<p>If you had to pick the three highest-use things to nail for a React\/JS\/CSS interview: closures and the event loop, the hooks model (especially stale closures), and CSS specificity with a layout example. Get those three sharp and the rest fills in around them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Deep prep guide for React, JavaScript, and CSS interview questions. Real examples, coding patterns, and what interviewers actually want to hear.<\/p>\n","protected":false},"author":25,"featured_media":480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"fifu_image_url":"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop","fifu_image_alt":"Front-End Interview Questions: React, JavaScript, and CSS Deep Dive","footnotes":""},"categories":[4],"tags":[622,619,621,620,630],"class_list":["post-137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical-prep","tag-css-interview","tag-frontend-interview","tag-javascript-interview","tag-react-interview","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Frontend Interview Questions: React, JS &amp; CSS | Craqly<\/title>\n<meta name=\"description\" content=\"Deep prep guide for React, JavaScript, and CSS interview questions. Real examples, coding patterns, and what interviewers actually want to hear.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/craqly.com\/blog\/?p=137\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Interview Questions: React, JS &amp; CSS | Craqly\" \/>\n<meta property=\"og:description\" content=\"Deep prep guide for React, JavaScript, and CSS interview questions. Real examples, coding patterns, and what interviewers actually want to hear.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/craqly.com\/blog\/?p=137\" \/>\n<meta property=\"og:site_name\" content=\"Craqly Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-10T04:27:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-22T12:19:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop\" \/>\n<meta name=\"author\" content=\"Shekhar Babu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shekhar Babu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137\"},\"author\":{\"name\":\"Shekhar Babu\",\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/#\\\/schema\\\/person\\\/2d367ffecd1340d5b34c9fff026bf761\"},\"headline\":\"Front-End Interview Questions: React, JavaScript, and CSS Deep Dive\",\"datePublished\":\"2026-03-10T04:27:08+00:00\",\"dateModified\":\"2026-07-22T12:19:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137\"},\"wordCount\":1165,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/images.unsplash.com\\\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop\",\"keywords\":[\"css interview\",\"frontend interview\",\"javascript interview\",\"react interview\",\"web development\"],\"articleSection\":[\"Technical Prep\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137\",\"url\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137\",\"name\":\"Frontend Interview Questions: React, JS & CSS | Craqly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/images.unsplash.com\\\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop\",\"datePublished\":\"2026-03-10T04:27:08+00:00\",\"dateModified\":\"2026-07-22T12:19:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/#\\\/schema\\\/person\\\/2d367ffecd1340d5b34c9fff026bf761\"},\"description\":\"Deep prep guide for React, JavaScript, and CSS interview questions. Real examples, coding patterns, and what interviewers actually want to hear.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137#primaryimage\",\"url\":\"https:\\\/\\\/images.unsplash.com\\\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop\",\"contentUrl\":\"https:\\\/\\\/images.unsplash.com\\\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop\",\"caption\":\"Front-End Interview Questions: React, JavaScript, and CSS Deep Dive\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?p=137#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/craqly.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Front-End Interview Questions: React, JavaScript, and CSS Deep Dive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/craqly.com\\\/blog\\\/\",\"name\":\"Craqly Blog\",\"description\":\"AI interview prep, career advice, company guides\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/craqly.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/craqly.com\\\/blog\\\/#\\\/schema\\\/person\\\/2d367ffecd1340d5b34c9fff026bf761\",\"name\":\"Shekhar Babu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/65adfea7b83f8159b447d8e0245a7e47b930966daebf4377dea2f2e88cfb9a05?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/65adfea7b83f8159b447d8e0245a7e47b930966daebf4377dea2f2e88cfb9a05?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/65adfea7b83f8159b447d8e0245a7e47b930966daebf4377dea2f2e88cfb9a05?s=96&d=mm&r=g\",\"caption\":\"Shekhar Babu\"},\"description\":\"Shekhar Babu is an engineer on the Craqly team building the AI interview assistant. He writes about technical interview rounds and how candidates prepare for them.\",\"sameAs\":[\"https:\\\/\\\/in.linkedin.com\\\/in\\\/shekhar-t-09259314b\"],\"url\":\"https:\\\/\\\/craqly.com\\\/blog\\\/author\\\/shekhar-babu\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Interview Questions: React, JS & CSS | Craqly","description":"Deep prep guide for React, JavaScript, and CSS interview questions. Real examples, coding patterns, and what interviewers actually want to hear.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/craqly.com\/blog\/?p=137","og_locale":"en_US","og_type":"article","og_title":"Frontend Interview Questions: React, JS & CSS | Craqly","og_description":"Deep prep guide for React, JavaScript, and CSS interview questions. Real examples, coding patterns, and what interviewers actually want to hear.","og_url":"https:\/\/craqly.com\/blog\/?p=137","og_site_name":"Craqly Blog","article_published_time":"2026-03-10T04:27:08+00:00","article_modified_time":"2026-07-22T12:19:47+00:00","og_image":[{"url":"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop","type":"","width":"","height":""}],"author":"Shekhar Babu","twitter_card":"summary_large_image","twitter_image":"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop","twitter_misc":{"Written by":"Shekhar Babu","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/craqly.com\/blog\/?p=137#article","isPartOf":{"@id":"https:\/\/craqly.com\/blog\/?p=137"},"author":{"name":"Shekhar Babu","@id":"https:\/\/craqly.com\/blog\/#\/schema\/person\/2d367ffecd1340d5b34c9fff026bf761"},"headline":"Front-End Interview Questions: React, JavaScript, and CSS Deep Dive","datePublished":"2026-03-10T04:27:08+00:00","dateModified":"2026-07-22T12:19:47+00:00","mainEntityOfPage":{"@id":"https:\/\/craqly.com\/blog\/?p=137"},"wordCount":1165,"commentCount":0,"image":{"@id":"https:\/\/craqly.com\/blog\/?p=137#primaryimage"},"thumbnailUrl":"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop","keywords":["css interview","frontend interview","javascript interview","react interview","web development"],"articleSection":["Technical Prep"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/craqly.com\/blog\/?p=137#respond"]}]},{"@type":"WebPage","@id":"https:\/\/craqly.com\/blog\/?p=137","url":"https:\/\/craqly.com\/blog\/?p=137","name":"Frontend Interview Questions: React, JS & CSS | Craqly","isPartOf":{"@id":"https:\/\/craqly.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/craqly.com\/blog\/?p=137#primaryimage"},"image":{"@id":"https:\/\/craqly.com\/blog\/?p=137#primaryimage"},"thumbnailUrl":"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop","datePublished":"2026-03-10T04:27:08+00:00","dateModified":"2026-07-22T12:19:47+00:00","author":{"@id":"https:\/\/craqly.com\/blog\/#\/schema\/person\/2d367ffecd1340d5b34c9fff026bf761"},"description":"Deep prep guide for React, JavaScript, and CSS interview questions. Real examples, coding patterns, and what interviewers actually want to hear.","breadcrumb":{"@id":"https:\/\/craqly.com\/blog\/?p=137#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/craqly.com\/blog\/?p=137"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/craqly.com\/blog\/?p=137#primaryimage","url":"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop","contentUrl":"https:\/\/images.unsplash.com\/photo-1627398242454-45a1465c2479?w=1200&h=630&fit=crop","caption":"Front-End Interview Questions: React, JavaScript, and CSS Deep Dive"},{"@type":"BreadcrumbList","@id":"https:\/\/craqly.com\/blog\/?p=137#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/craqly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Front-End Interview Questions: React, JavaScript, and CSS Deep Dive"}]},{"@type":"WebSite","@id":"https:\/\/craqly.com\/blog\/#website","url":"https:\/\/craqly.com\/blog\/","name":"Craqly Blog","description":"AI interview prep, career advice, company guides","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/craqly.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/craqly.com\/blog\/#\/schema\/person\/2d367ffecd1340d5b34c9fff026bf761","name":"Shekhar Babu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/65adfea7b83f8159b447d8e0245a7e47b930966daebf4377dea2f2e88cfb9a05?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/65adfea7b83f8159b447d8e0245a7e47b930966daebf4377dea2f2e88cfb9a05?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/65adfea7b83f8159b447d8e0245a7e47b930966daebf4377dea2f2e88cfb9a05?s=96&d=mm&r=g","caption":"Shekhar Babu"},"description":"Shekhar Babu is an engineer on the Craqly team building the AI interview assistant. He writes about technical interview rounds and how candidates prepare for them.","sameAs":["https:\/\/in.linkedin.com\/in\/shekhar-t-09259314b"],"url":"https:\/\/craqly.com\/blog\/author\/shekhar-babu\/"}]}},"_links":{"self":[{"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/posts\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":2,"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":934,"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions\/934"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/media\/480"}],"wp:attachment":[{"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/craqly.com\/blog\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}